Send notification on Slack whenever there's a new message on the database

frontend/.env.environment

@@ -1 +1,2 @@
-NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
+NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
+

frontend/features/page/sections/ContactsSection/ContactsSection.tsx

@@ -242,7 +242,7 @@ enum FormActionType {
   Success = "success",
   Failed = "failed",
   Submit = "submit",
-  ValidationFailed = "validation - failed",
+  ValidationFailed = "validation-failed",
 }
 
 interface ValidationFailedAction {
@@ -384,6 +384,10 @@ export function ContactsForm() {
         >(InsertFormMessage, { input });
 
         if (response.createFormMessage) {
+          fetch(`api/send`, {
+            method: "POST",
+            body: JSON.stringify({ data: state.values }),
+          });
           dispatch({ type: FormActionType.Success });
         } else {
           dispatch({ type: FormActionType.Failed });
@@ -643,7 +647,7 @@ export function ContactsForm() {
             ></Box>
           </FormControl>
         </Box>
-        <Text color="red">{state.submitError}</Text>
+        <Box color="red">{state.submitError}</Box>
         <Button
           type="submit"
           userSelect="none"

frontend/package.json

@@ -15,6 +15,7 @@
     "@emotion/react": "11.4.0",
     "@emotion/styled": "11.3.0",
     "@graphql-codegen/typescript-document-nodes": "1.17.13",
+    "@slack/webhook": "6.0.0",
     "framer-motion": "4.1.17",
     "graphql": "15.5.1",
     "graphql-codegen": "0.4.0",

frontend/pages/api/send.ts

@@ -0,0 +1,37 @@
+import { NextApiRequest } from "next";
+import { IncomingWebhook } from "@slack/webhook";
+
+const url = process.env.SLACK_WEBHOOK_URL!;
+
+const webhook = new IncomingWebhook(url);
+
+export default async function handler(req: NextApiRequest) {
+  const parsedBody = JSON.parse(req.body);
+  await webhook.send({
+    channel: "general",
+    text: "Someone has left a message!",
+    blocks: [
+      {
+        type: "section",
+        text: {
+          type: "mrkdwn",
+          text: parsedBody.data.email,
+        },
+      },
+      {
+        type: "section",
+        text: {
+          type: "mrkdwn",
+          text: `*${parsedBody.data.name}*`,
+        },
+      },
+      {
+        type: "section",
+        text: {
+          type: "mrkdwn",
+          text: parsedBody.data.message,
+        },
+      },
+    ],
+  });
+}