[Update] Example7: Add slack webhook example

Author: marcoeh

components/Example7.vue

@@ -0,0 +1,41 @@
+<script>
+export default {
+  name: 'Example7',
+  data() {
+    return {
+      form: {
+        name: ''
+      },
+      response: '—',
+      error: null
+    }
+  },
+  methods: {
+    async sendSlackMessage(name) {
+      try {
+        const res = await this.$axios.$post(
+          '/.netlify/functions/slack-webhook',
+          { name: name }
+        )
+        this.response = res
+        this.error = null
+      } catch (e) {
+        this.error = e.response
+        this.response = '—'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="sendSlackMessage(form.name)">
+    <h2>7. Send a Slack message</h2>
+    <ElFormItem label="Name">
+      <ElInput v-model="form.name" placeholder="Your name" />
+    </ElFormItem>
+    <ElButton type="primary" @click="sendSlackMessage(form.name)">👋 Say hello</ElButton>
+    <p>Response: {{ response }}</p>
+    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+  </ElForm>
+</template>

netlify-lambda-src/slack-webhook.js

@@ -0,0 +1,30 @@
+import fetch from 'node-fetch'
+require('dotenv').config()
+
+// eslint-disable-next-line require-await
+exports.handler = async (event, context) => {
+  // Only allow POST
+  if (event.httpMethod !== 'POST') {
+    return { statusCode: 405, body: 'Method Not Allowed' }
+  }
+
+  const data = JSON.parse(event.body)
+  const name = data.name || 'noname'
+
+  // Send greeting to Slack
+  return fetch(process.env.SLACK_WEBHOOK_URL, {
+    headers: {
+      'content-type': 'application/json'
+    },
+    method: 'POST',
+    body: JSON.stringify({ text: `${name} says hello!` })
+  })
+    .then(() => ({
+      statusCode: 200,
+      body: `Hello, ${name}! Your greeting has been sent to Slack 👋`
+    }))
+    .catch(error => ({
+      statusCode: 422,
+      body: `Oops! Something went wrong. ${error}`
+    }))
+}

pages/index.vue

@@ -5,6 +5,7 @@ import Example3 from '@/components/Example3'
 import Example4 from '@/components/Example4'
 import Example5 from '@/components/Example5'
 import Example6 from '@/components/Example6'
+import Example7 from '@/components/Example7'
 
 export default {
   components: {
@@ -13,7 +14,8 @@ export default {
     Example3,
     Example4,
     Example5,
-    Example6
+    Example6,
+    Example7
   }
 }
 </script>
@@ -33,6 +35,8 @@ export default {
     <hr class="separator">
     <Example6 />
     <hr class="separator">
+    <Example7 />
+    <hr class="separator">
   </div>
 </template>