From 2019a9b79e212a1085f248c87cd3035b47ddaf7b Mon Sep 17 00:00:00 2001
From: Giacomo Baggio <giacomobaggio13@gmail.com>
Date: Tue, 10 Aug 2021 11:15:53 +0200
Subject: [PATCH 1/5] Fix page reloading

---
 .../form-messages/models/form-messages.settings.json  |  3 ++-
 .../page/sections/ContactsSection/ContactsSection.tsx | 11 ++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/backend/api/form-messages/models/form-messages.settings.json b/backend/api/form-messages/models/form-messages.settings.json
index e73d2ce..243d346 100644
--- a/backend/api/form-messages/models/form-messages.settings.json
+++ b/backend/api/form-messages/models/form-messages.settings.json
@@ -2,7 +2,8 @@
   "kind": "collectionType",
   "collectionName": "form_messages",
   "info": {
-    "name": "formMessages"
+    "name": "formMessages",
+    "description": ""
   },
   "options": {
     "increments": true,
diff --git a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
index 2aa88a9..a990345 100644
--- a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
+++ b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
@@ -263,8 +263,6 @@ function reducer(state: FormState, action: FormAction) {
         state.validationErrors.message = null;
       }
 
-      event?.preventDefault();
-
       return {
         ...state,
         validationErrors: result.validationErrors,
@@ -333,6 +331,13 @@ export function ContactsForm() {
     []
   );
 
+  function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    dispatch({
+      type: FormActionType.Submit,
+    });
+  }
+
   return (
     <Box
       flexWrap="wrap"
@@ -375,7 +380,7 @@ export function ContactsForm() {
       </Box>
       <Box
         noValidate
-        onSubmit={() => dispatch({ type: FormActionType.Submit })}
+        onSubmit={onSubmit}
         as="form"
         display={
           state.status === FormStatus.Submitted ? "none" : "inline-block"

From dfeec737cc4a6158be6d6259769e4aefebd458c0 Mon Sep 17 00:00:00 2001
From: Giacomo Baggio <giacomobaggio13@gmail.com>
Date: Thu, 12 Aug 2021 13:28:33 +0200
Subject: [PATCH 2/5] Update ContactsSection.tsx

---
 .../ContactsSection/ContactsSection.tsx       | 82 +++++++++++++------
 1 file changed, 55 insertions(+), 27 deletions(-)

diff --git a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
index a990345..b00f0d1 100644
--- a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
+++ b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
@@ -64,7 +64,8 @@ export function ContactsSectionBlock({
         my="0"
         mx="auto"
         pos="relative"
-        flexDir="column">
+        flexDir="column"
+      >
         <Box
           color="rgb(129, 82, 188)"
           fontSize="sm"
@@ -89,7 +90,8 @@ export function ContactsSectionBlock({
                   backgroundColor: "rgb(129, 82, 188)",
                 }
               : undefined
-          }>
+          }
+        >
           <InlineTextarea name="sectionTitle" />
         </Box>
 
@@ -97,7 +99,8 @@ export function ContactsSectionBlock({
           flexDir={{
             base: "column",
             md: "row",
-          }}>
+          }}
+        >
           <Flex
             flex={{
               base: "0 0 full",
@@ -109,13 +112,15 @@ export function ContactsSectionBlock({
               md: "20",
               lg: "36",
             }}
-            flexDir="column">
+            flexDir="column"
+          >
             <Box
               as="h2"
               fontSize={{ base: "3xl", sm: "4xl", md: "5xl" }}
               fontFamily="Europa"
               fontWeight="bold"
-              lineHeight="1.1em">
+              lineHeight="1.1em"
+            >
               <InlineTextarea name="title" />
             </Box>
             <Text fontSize="sm" pt="5" color="description">
@@ -127,7 +132,8 @@ export function ContactsSectionBlock({
                 fontSize="sm"
                 pt="14"
                 lineHeight="1.8em"
-                textDecoration="none">
+                textDecoration="none"
+              >
                 <InlineTextarea name="email" />
               </Box>
             </Link>
@@ -139,19 +145,22 @@ export function ContactsSectionBlock({
           <SocialLink
             href="https://twitter.com/inkofpixel"
             color="rgba(29, 161, 242, 0.7)"
-            onHoverColor="rgba(29, 161, 242, 1)">
+            onHoverColor="rgba(29, 161, 242, 1)"
+          >
             <TwitterIcon color="white" />
           </SocialLink>
           <SocialLink
             href="https://facebook.com/inkofpixel"
             color="rgba(59, 89, 152, 0.7)"
-            onHoverColor="rgba(59, 89, 152, 1)">
+            onHoverColor="rgba(59, 89, 152, 1)"
+          >
             <FacebookIcon color="white" />
           </SocialLink>
           <SocialLink
             href="https://github.com/inkofpixel"
             color="rgba(24, 23, 23, 0.7)"
-            onHoverColor="rgba(24, 23, 23, 1)">
+            onHoverColor="rgba(24, 23, 23, 1)"
+          >
             <GithubIcon color="white" />
           </SocialLink>
         </Flex>
@@ -275,6 +284,7 @@ function reducer(state: FormState, action: FormAction) {
         // Display thanks page
         ...state,
         status: FormStatus.Submitted,
+        // API call POST to slack :)
       };
 
     case FormActionType.Failed:
@@ -359,19 +369,22 @@ export function ContactsForm() {
         sm: "row",
         md: "column",
         lg: "row",
-      }}>
+      }}
+    >
       <Box
         display={
           state.status === FormStatus.Submitted ? "inline-block" : "none"
         }
-        pb="12">
+        pb="12"
+      >
         <Text
           as="h3"
           fontSize={{ base: "3xl", sm: "4xl", md: "5xl" }}
           fontWeight="bold"
           fontFamily="Europa"
           lineHeight="1.1em"
-          pb="5">
+          pb="5"
+        >
           Thank you!
         </Text>
         <Text as="p" fontSize="sm" color="#5c5c5c">
@@ -384,7 +397,8 @@ export function ContactsForm() {
         as="form"
         display={
           state.status === FormStatus.Submitted ? "none" : "inline-block"
-        }>
+        }
+      >
         <Box
           w={{
             base: "calc(100% - 20px)",
@@ -394,7 +408,8 @@ export function ContactsForm() {
           }}
           m="2.5"
           display="inline-block"
-          pos="relative">
+          pos="relative"
+        >
           <FormControl
             id="name"
             isInvalid={
@@ -402,7 +417,8 @@ export function ContactsForm() {
               state.validationErrors.name == null
                 ? false
                 : true
-            }>
+            }
+          >
             <FormLabel
               fontWeight="400"
               fontSize="sm"
@@ -411,7 +427,8 @@ export function ContactsForm() {
               pos="relative"
               w="full"
               display="block"
-              mb="0">
+              mb="0"
+            >
               Name
             </FormLabel>
             <Input
@@ -452,7 +469,8 @@ export function ContactsForm() {
               w="0"
               h="1px"
               backgroundColor="dark"
-              transition="all 0.4s ease 0s"></Box>
+              transition="all 0.4s ease 0s"
+            ></Box>
           </FormControl>
         </Box>
         <Box
@@ -464,7 +482,8 @@ export function ContactsForm() {
           }}
           m="2.5"
           pos="relative"
-          display="inline-block">
+          display="inline-block"
+        >
           <FormControl
             id="email"
             isInvalid={
@@ -472,7 +491,8 @@ export function ContactsForm() {
               state.validationErrors.email == null
                 ? false
                 : true
-            }>
+            }
+          >
             <FormLabel
               mb="0"
               fontWeight="400"
@@ -481,7 +501,8 @@ export function ContactsForm() {
               letterSpacing="0.1em"
               pos="relative"
               w="full"
-              display="block">
+              display="block"
+            >
               Email
             </FormLabel>
             <Input
@@ -522,7 +543,8 @@ export function ContactsForm() {
               w="0"
               h="1px"
               backgroundColor="dark"
-              transition="all 0.4s ease 0s"></Box>
+              transition="all 0.4s ease 0s"
+            ></Box>
           </FormControl>
         </Box>
 
@@ -530,7 +552,8 @@ export function ContactsForm() {
           w="calc(100% - 10px)"
           m="2.5"
           pos="relative"
-          display="inline-block">
+          display="inline-block"
+        >
           <FormControl
             id="message"
             isInvalid={
@@ -538,7 +561,8 @@ export function ContactsForm() {
               state.validationErrors.message == null
                 ? false
                 : true
-            }>
+            }
+          >
             <FormLabel
               mb="0"
               fontWeight="400"
@@ -547,7 +571,8 @@ export function ContactsForm() {
               letterSpacing="0.1em"
               pos="relative"
               w="full"
-              display="block">
+              display="block"
+            >
               Message
             </FormLabel>
             <Input
@@ -590,7 +615,8 @@ export function ContactsForm() {
               w="0"
               h="1px"
               backgroundColor="dark"
-              transition="all 0.4s ease 0s"></Box>
+              transition="all 0.4s ease 0s"
+            ></Box>
           </FormControl>
         </Box>
         <Text color="red">{state.submitError}</Text>
@@ -620,7 +646,8 @@ export function ContactsForm() {
           }}
           mt="10"
           mr="2.5"
-          mb="2.5">
+          mb="2.5"
+        >
           <Box
             as="span"
             _after={{
@@ -633,7 +660,8 @@ export function ContactsForm() {
               left: "0",
               top: "0",
               w: "0",
-            }}>
+            }}
+          >
             SEND
           </Box>
         </Button>

From 1f66eb3d2ffc5515624c68d934bf5e88e7f14c24 Mon Sep 17 00:00:00 2001
From: Giacomo Baggio <giacomobaggio13@gmail.com>
Date: Tue, 17 Aug 2021 13:34:08 +0200
Subject: [PATCH 3/5] Add notification on Strapi

---
 frontend/.env.environment                     |   3 +-
 frontend/components/AppProviders.tsx          |   3 +-
 .../ContactsSection/ContactsSection.tsx       | 152 ++++++++++++------
 frontend/package-lock.json                    |  28 ++++
 frontend/package.json                         |   1 +
 frontend/pages/api/send.ts                    |  39 +++++
 6 files changed, 171 insertions(+), 55 deletions(-)
 create mode 100644 frontend/pages/api/send.ts

diff --git a/frontend/.env.environment b/frontend/.env.environment
index 393ac2b..9734f03 100644
--- a/frontend/.env.environment
+++ b/frontend/.env.environment
@@ -1 +1,2 @@
-NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
\ No newline at end of file
+NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
+
diff --git a/frontend/components/AppProviders.tsx b/frontend/components/AppProviders.tsx
index 714da90..71ecb26 100644
--- a/frontend/components/AppProviders.tsx
+++ b/frontend/components/AppProviders.tsx
@@ -66,7 +66,8 @@ const EditButton = () => {
       position="fixed"
       right="4"
       bottom="4"
-      onClick={() => (cms.enabled ? cms.disable() : cms.enable())}>
+      onClick={() => (cms.enabled ? cms.disable() : cms.enable())}
+    >
       {cms.enabled ? `Stop Editing ` : `Edit this Site `}
     </Button>
   );
diff --git a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
index b00f0d1..5ccd79f 100644
--- a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
+++ b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
@@ -6,7 +6,6 @@ import {
   FormErrorMessage,
   FormLabel,
   Input,
-  Text,
 } from "@chakra-ui/react";
 import * as React from "react";
 import {
@@ -123,9 +122,9 @@ export function ContactsSectionBlock({
             >
               <InlineTextarea name="title" />
             </Box>
-            <Text fontSize="sm" pt="5" color="description">
+            <Box fontSize="sm" pt="5" color="description">
               <InlineTextarea name="subtitle" />
-            </Text>
+            </Box>
             <Link href="mailto:DA INSERIRE" passHref>
               <Box
                 as="a"
@@ -200,14 +199,25 @@ interface SubmitAction {
   type: FormActionType.Submit;
 }
 
+interface ValidationFailed {
+  type: FormActionType.ValidationFailed;
+  validationErrors: FormState["validationErrors"];
+}
+
 enum FormActionType {
   UpdateField = "update-field",
   Success = "success",
   Failed = "failed",
   Submit = "submit",
+  ValidationFailed = "validationFailed",
 }
 
-type FormAction = UpdateFieldAction | SuccessAction | FailAction | SubmitAction;
+type FormAction =
+  | UpdateFieldAction
+  | SuccessAction
+  | FailAction
+  | SubmitAction
+  | ValidationFailed;
 
 interface FormState {
   status: FormStatus;
@@ -225,7 +235,6 @@ interface FormState {
 }
 
 function reducer(state: FormState, action: FormAction) {
-  const regex = /^[^@\s]+@[^@\s\.]+\.[^@\.\s]+$/;
   switch (action.type) {
     case FormActionType.UpdateField: {
       return {
@@ -244,38 +253,14 @@ function reducer(state: FormState, action: FormAction) {
 
     case FormActionType.Submit: {
       //Check errors
-      let result: FormState = {
-        status: FormStatus.Idle,
-        values: { name: "", email: "", message: "" },
-        validationErrors: { name: null, email: null, message: null },
-        submitError: null,
-      };
-      let hasValidationErrors = false;
-
-      if (state.values.name.trim().length === 0) {
-        result.validationErrors.name = "Please insert your name";
-        hasValidationErrors = true;
-      } else {
-        state.validationErrors.name = null;
-      }
 
-      if (!regex.test(state.values.email)) {
-        result.validationErrors.email = "Please insert a valid email";
-        hasValidationErrors = true;
-      } else {
-        state.validationErrors.email = null;
-      }
-      if (state.values.message.trim().length == 0) {
-        result.validationErrors.message = "Please insert a message";
-        hasValidationErrors = true;
-      } else {
-        state.validationErrors.message = null;
-      }
+      const hasNoErrors = Object.values(state.validationErrors).every(
+        (prop) => prop == null || prop === ""
+      );
 
       return {
         ...state,
-        validationErrors: result.validationErrors,
-        status: hasValidationErrors ? FormStatus.Idle : FormStatus.Submitting,
+        status: hasNoErrors ? FormStatus.Submitting : FormStatus.Idle,
       };
     }
 
@@ -284,18 +269,23 @@ function reducer(state: FormState, action: FormAction) {
         // Display thanks page
         ...state,
         status: FormStatus.Submitted,
-        // API call POST to slack :)
+        // API POST call to slack :)
       };
 
     case FormActionType.Failed:
       return {
         // Resta in idle, setta errore e resetta i campi?
         ...state,
-
         submitError: "Error while sending your message",
         status: FormStatus.Idle,
       };
 
+    case FormActionType.ValidationFailed:
+      return {
+        ...state,
+        validationErrors: action.validationErrors,
+      };
+
     default: {
       assertNever(action);
     }
@@ -304,6 +294,35 @@ function reducer(state: FormState, action: FormAction) {
 
 export function ContactsForm() {
   const [state, dispatch] = React.useReducer(reducer, blankForm);
+
+  function validateErrors(values: FormState["values"]) {
+    const regex = /^[^@\s]+@[^@\s\.]+\.[^@\.\s]+$/;
+
+    const validationErrors: FormState["validationErrors"] = {
+      name: null,
+      email: null,
+      message: null,
+    };
+
+    if (values.name.trim().length === 0) {
+      validationErrors.name = "Please insert your name";
+    } else {
+      validationErrors.name = null;
+    }
+
+    if (!regex.test(state.values.email)) {
+      validationErrors.email = "Please insert a valid email";
+    } else {
+      validationErrors.email = null;
+    }
+    if (state.values.message.trim().length == 0) {
+      validationErrors.message = "Please insert a message";
+    } else {
+      validationErrors.message = null;
+    }
+    return validationErrors;
+  }
+
   React.useEffect(() => {
     if (state.status === FormStatus.Submitting) {
       async function sendMessage() {
@@ -341,12 +360,32 @@ export function ContactsForm() {
     []
   );
 
-  function onSubmit(event: React.FormEvent) {
-    event.preventDefault();
-    dispatch({
-      type: FormActionType.Submit,
-    });
-  }
+  const onFormSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const validationErrors = validateErrors(state.values);
+
+    const hasNoErrors = Object.values(validationErrors).every(
+      (prop) => prop == null || prop === ""
+    );
+
+    if (hasNoErrors) {
+      try {
+        dispatch({ type: FormActionType.Submit });
+        await fetch("/api/send", {
+          body: JSON.stringify({ data: state.values }),
+          method: "POST",
+        });
+      } catch (error) {
+        dispatch({ type: FormActionType.Failed });
+      }
+    } else {
+      dispatch({
+        type: FormActionType.ValidationFailed,
+        validationErrors: validationErrors,
+      });
+    }
+  };
 
   return (
     <Box
@@ -377,7 +416,7 @@ export function ContactsForm() {
         }
         pb="12"
       >
-        <Text
+        <Box
           as="h3"
           fontSize={{ base: "3xl", sm: "4xl", md: "5xl" }}
           fontWeight="bold"
@@ -386,14 +425,14 @@ export function ContactsForm() {
           pb="5"
         >
           Thank you!
-        </Text>
-        <Text as="p" fontSize="sm" color="#5c5c5c">
+        </Box>
+        <Box as="p" fontSize="sm" color="#5c5c5c">
           We&apos;ll get in touch soon.
-        </Text>
+        </Box>
       </Box>
       <Box
         noValidate
-        onSubmit={onSubmit}
+        onSubmit={onFormSubmit}
         as="form"
         display={
           state.status === FormStatus.Submitted ? "none" : "inline-block"
@@ -406,7 +445,8 @@ export function ContactsForm() {
             md: "calc(100% - 20px)",
             lg: "calc(50% - 20px)",
           }}
-          m="2.5"
+          mx="2.5"
+          my="5"
           display="inline-block"
           pos="relative"
         >
@@ -460,7 +500,9 @@ export function ContactsForm() {
               placeholder="Peter Smith"
               isRequired
             />
-            <FormErrorMessage>{state.validationErrors.name}</FormErrorMessage>
+            <FormErrorMessage pos="absolute">
+              {state.validationErrors.name}
+            </FormErrorMessage>
             <Box
               as="span"
               pos="absolute"
@@ -480,7 +522,8 @@ export function ContactsForm() {
             md: "calc(100% - 20px)",
             lg: "calc(50% - 20px)",
           }}
-          m="2.5"
+          mx="2.5"
+          my="5"
           pos="relative"
           display="inline-block"
         >
@@ -534,7 +577,9 @@ export function ContactsForm() {
               type="email"
               placeholder="example@yourdomain.com"
             />
-            <FormErrorMessage>{state.validationErrors.email}</FormErrorMessage>
+            <FormErrorMessage pos="absolute">
+              {state.validationErrors.email}
+            </FormErrorMessage>
             <Box
               as="span"
               pos="absolute"
@@ -550,7 +595,8 @@ export function ContactsForm() {
 
         <Box
           w="calc(100% - 10px)"
-          m="2.5"
+          mx="2.5"
+          my="5"
           pos="relative"
           display="inline-block"
         >
@@ -603,7 +649,7 @@ export function ContactsForm() {
               type="text"
               placeholder="Hi there..."
             />
-            <FormErrorMessage>
+            <FormErrorMessage pos="absolute">
               {state.validationErrors.message}
             </FormErrorMessage>
             <Box
@@ -619,7 +665,7 @@ export function ContactsForm() {
             ></Box>
           </FormControl>
         </Box>
-        <Text color="red">{state.submitError}</Text>
+        <Box color="red">{state.submitError}</Box>
         <Button
           type="submit"
           userSelect="none"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b427c0e..7ca764c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2395,6 +2395,21 @@
       "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
       "dev": true
     },
+    "@slack/types": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@slack/types/-/types-1.10.0.tgz",
+      "integrity": "sha512-tA7GG7Tj479vojfV3AoxbckalA48aK6giGjNtgH6ihpLwTyHE3fIgRrvt8TWfLwW8X8dyu7vgmAsGLRG7hWWOg=="
+    },
+    "@slack/webhook": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@slack/webhook/-/webhook-6.0.0.tgz",
+      "integrity": "sha512-2fohfhLI9lkAmOSWt1R457JBsB3iFNqahu4GqdFZRtcp/bT+xeG/kPn/hQa78JS74poRjWTt5G/qJjNaWMGOEQ==",
+      "requires": {
+        "@slack/types": "^1.2.1",
+        "@types/node": ">=12.0.0",
+        "axios": "^0.21.1"
+      }
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -3022,6 +3037,14 @@
       "integrity": "sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -5040,6 +5063,11 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
+    },
     "foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9d23efb..d39dcc2 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/pages/api/send.ts b/frontend/pages/api/send.ts
new file mode 100644
index 0000000..c3730a0
--- /dev/null
+++ b/frontend/pages/api/send.ts
@@ -0,0 +1,39 @@
+import { NextApiRequest } from "next";
+import { IncomingWebhook } from "@slack/webhook";
+
+const url = process.env.SLACK_WEBHOOK_URL!;
+
+const webhook = new IncomingWebhook(url);
+
+console.log("url", 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,
+        },
+      },
+    ],
+  });
+}

From 04cd8a5615b08165c1673572f77730ef831fdba0 Mon Sep 17 00:00:00 2001
From: Giacomo Baggio <giacomobaggio13@gmail.com>
Date: Fri, 20 Aug 2021 16:24:18 +0200
Subject: [PATCH 4/5] Update package-lock.json

---
 frontend/package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7ca764c..10f3f60 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -5064,9 +5064,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.2.tgz",
+      "integrity": "sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA=="
     },
     "foreach": {
       "version": "2.0.5",

From 6fcc1dd62a7eb2a591eae376b5ed70880a8e9f22 Mon Sep 17 00:00:00 2001
From: Giacomo Baggio <giacomobaggio13@gmail.com>
Date: Fri, 20 Aug 2021 16:52:30 +0200
Subject: [PATCH 5/5] Add slack notification when someone left a message

---
 .../page/sections/ContactsSection/ContactsSection.tsx        | 5 ++++-
 frontend/pages/api/send.ts                                   | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
index e5913a2..a6aee22 100644
--- a/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
+++ b/frontend/features/page/sections/ContactsSection/ContactsSection.tsx
@@ -300,7 +300,6 @@ function reducer(state: FormState, action: FormAction) {
       return {
         ...state,
         status: FormStatus.Submitted,
-        // API POST call to slack :)
       };
 
     case FormActionType.Failed:
@@ -385,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 });
diff --git a/frontend/pages/api/send.ts b/frontend/pages/api/send.ts
index c3730a0..7037166 100644
--- a/frontend/pages/api/send.ts
+++ b/frontend/pages/api/send.ts
@@ -5,8 +5,6 @@ const url = process.env.SLACK_WEBHOOK_URL!;
 
 const webhook = new IncomingWebhook(url);
 
-console.log("url", url);
-
 export default async function handler(req: NextApiRequest) {
   const parsedBody = JSON.parse(req.body);
   await webhook.send({