⚙️Integrate: Sendgrid ➕ADD: Sendgrid UI

Author: manuarora700

components/Contact.js

@@ -24,30 +24,30 @@ export default function Contact() {
     e.preventDefault();
     setForm({ state: "loading" });
 
-    // const res = await fetch("/api/subscribe", {
-    //   body: JSON.stringify({
-    //     email: inputEl.current.value,
-    //   }),
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   method: "POST",
-    // });
+    const res = await fetch("/api/sendgrid", {
+      body: JSON.stringify({
+        email: inputEl.current.value,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
 
-    // const { error } = await res.json();
-    // if (error) {
-    //   setForm({
-    //     state: "error",
-    //     message: error,
-    //   });
-    //   return;
-    // }
+    const { error } = await res.json();
+    if (error) {
+      setForm({
+        state: "error",
+        message: error,
+      });
+      return;
+    }
 
     // trackGoal("JYFUFMSF", 0);
     inputEl.current.value = "";
     setForm({
       state: "success",
-      message: `Hooray! You're now on the list. I'll get back to you soon.`,
+      message: `Hooray! You're now on the list. Check your inbox or promotions for a mail.`,
     });
   };
 

package-lock.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@sendgrid/mail": "^7.4.2",
     "@tailwindcss/typography": "^0.4.0",
     "comma-number": "^2.0.1",
     "date-fns": "^2.19.0",

package.json

@@ -0,0 +1,21 @@
+import sendgrid from "@sendgrid/mail";
+
+sendgrid.setApiKey(process.env.SENDGRID_API_KEY);
+
+export default async (req, res) => {
+  try {
+    // console.log("REQ.BODY", req.body);
+    await sendgrid.send({
+      to: req.body.email,
+      from: "manuarorawork@gmail.com",
+      subject: "Greetings! Thankyou for contacting Manu",
+      text:
+        "Thank you for contacting me from my website.\nPlease reply to this mail with your requirements and let me know how I can help you with your project.\n\nBest Regards,\nManu Arora\nSoftware Developer\n+91, 9587738861\n",
+    });
+  } catch (error) {
+    console.log(error);
+    return res.status(error.statusCode || 500).json({ error: error.message });
+  }
+
+  return res.status(200).json({ error: "" });
+};

pages/api/sendgrid.js

@@ -24,14 +24,6 @@
     <loc>https://manuarora.in/tweets</loc>
   </url>
 
-  <url>
-    <loc>https://manuarora.in/blog/css-with-react</loc>
-  </url>
-
-  <url>
-    <loc>https://manuarora.in/blog/demo-blog</loc>
-  </url>
-
   <url>
     <loc>https://manuarora.in/blog/top-5-nextjs-resources</loc>
   </url>