Clean most of callback functions

components/Contact.tsx

@@ -6,7 +6,8 @@ If you want to change the email provider, don't hesitate to create a new api rou
 the axios.post here, line 18.
 */
 
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
+
 import { toast } from 'react-toastify';
 
 const sendEmail = async (): Promise<void> => {
@@ -20,6 +21,13 @@ const sendEmail = async (): Promise<void> => {
     message: string;
   }
 
+  interface ErrorAxios {
+    data: {
+      error: string;
+      success: boolean;
+    };
+  }
+
   if (name && email && message) {
     try {
       const mail = await axios.post<EmailData>('/api/sendgrid', {
@@ -33,8 +41,10 @@ const sendEmail = async (): Promise<void> => {
         (document.querySelector('#email') as HTMLInputElement).value = '';
         (document.querySelector('#message') as HTMLInputElement).value = '';
       }
-    } catch (error) {
+    } catch (error: unknown) {
-      console.log(error);
+      const errorChecked = error as AxiosError;
+      const errorMessage = errorChecked.response as ErrorAxios;
+      toast.error(errorMessage.data.error);
     }
   } else {
     toast.info('Please fill all the fields ', {

components/MailingList.tsx

@@ -3,9 +3,11 @@ This is the form component to register an email adress to your mailing list.
 This is just the frontend, and the email will be send to our backend API (/api/mailingList)
 */
 
+import axios, { AxiosError } from 'axios';
+
 import Image from 'next/image';
 import Mailing from 'public/landing/mailing.svg';
-import axios from 'axios';
+import { Toast } from 'react-toastify/dist/types';
 import { toast } from 'react-toastify';
 import { useState } from 'react';
 
@@ -14,6 +16,12 @@ const MailingList = (): JSX.Element => {
   const [loading, setLoading] = useState(false);
   const [valid, setValid] = useState(true);
 
+  interface ErrorAxios {
+    data: {
+      error: string;
+      success: boolean;
+    };
+  }
   const validateEmail = (): void => {
     // Regex patern for email validation
     const regex =
@@ -33,6 +41,7 @@ const MailingList = (): JSX.Element => {
   const subscribe = async (): Promise<void> => {
     setLoading(true);
 
+    try {
       const data = await axios.put('api/mailingList', {
         mail,
       });
@@ -41,10 +50,16 @@ const MailingList = (): JSX.Element => {
         toast.success('You have been added to our mailing list. Welcome 👋');
         setLoading(false);
         setMail('');
-    } else {
+      }
-      toast.error('Something went wrong');
+    } catch (error: unknown) {
+      const errorChecked = error as AxiosError;
+      const errorMessage = errorChecked.response as ErrorAxios;
+
+      if (errorMessage.data.error) {
+        toast.error(errorMessage.data.error);
         setLoading(false);
       }
+    }
   };
   return (
     <div className="flex flex-col m-auto my-10 mt-24">

components/UI/Login.tsx

@@ -24,11 +24,15 @@ const Login = ({ resetPassword, signIn }: LoginProperties): JSX.Element => {
   const [forgot, setForgot] = useState(false);
 
   const resetPasswordLogin = async (): Promise<void> => {
-    await resetPassword(email).then((result: { error: ApiError | null }) => {
+    const result = await resetPassword(email);
+
     if (result.error) {
       toast.error(result.error.message);
-      } else toast.success('Check your email to reset your password!');
+    } else if (result.data) {
-    });
+      toast.success(
+        'A password reset email has been sent to you, watch your mailbox!'
+      );
+    }
   };
 
   const login = async (
@@ -37,17 +41,16 @@ const Login = ({ resetPassword, signIn }: LoginProperties): JSX.Element => {
     event.preventDefault();
 
     // Handle the login. Go to the homepage if success or display an error.
-    await signIn({
+    const result = await signIn({
       email,
       password,
-    }).then((result) => {
+    });
-      if (result) {
+
-        void router.push('/');
-      }
     if (result.error) {
       toast.error(result.error.message);
+    } else if (result.user) {
+      void router.push('/');
     }
-    });
   };
 
   return (

components/UI/SignUpPanel.tsx

@@ -32,11 +32,11 @@ const SignUpPanel = ({
     event.preventDefault();
 
     // Handle the login. Go to the homepage if success or display an error.
-    await signUp({
+    const result = await signUp({
       email,
       password,
-    }).then((result) => {
+    });
-      console.log(result);
+
     if (result.error) {
       toast.error(result.error.message);
     } else if (result.user?.confirmation_sent_at) {
@@ -46,7 +46,6 @@ const SignUpPanel = ({
     } else if (result.user) {
       void router.push('/');
     }
-    });
   };
 
   return (

pages/api/mailingList.ts

@@ -37,8 +37,7 @@ export default async function handler(
   await cors(request, response);
   await limiter(request, response);
   if (request.method === 'PUT') {
-    axios
+    const result = await axios.put(
-      .put(
       'https://api.sendgrid.com/v3/marketing/contacts',
       {
         contacts: [{ email: `${request.body.mail}` }],
@@ -50,20 +49,18 @@ export default async function handler(
           Authorization: `Bearer ${process.env.SENDGRID_SECRET || ''}`,
         },
       }
-      )
+    );
-      .then((result) => {
+
-        console.log(result);
+    if (result.status === 200) {
-        response.status(200).send({
+      response.status(200).json({
         message:
           'Your email has been succesfully added to the mailing list. Welcome 👋',
       });
-      })
+    } else {
-      .catch((error) => {
+      response.status(500).json({
-        response.status(500).send({
+        error:
-          message:
           'Oups, there was a problem with your subscription, please try again or contact us',
-          error: error as string,
-        });
       });
     }
   }
+}

pages/api/sendgrid.ts

@@ -15,7 +15,10 @@ interface Request extends NextApiRequest {
   };
 }
 
-const sendGrid = (request: Request, response: NextApiResponse): void => {
+const sendGrid = async (
+  request: Request,
+  response: NextApiResponse
+): Promise<void> => {
   if (request.method === 'POST') {
     sgMail.setApiKey(process.env.SENDGRID_SECRET || '');
 
@@ -29,20 +32,25 @@ const sendGrid = (request: Request, response: NextApiResponse): void => {
       reply_to: request.body.email,
     };
 
-    sgMail
+    try {
-      .send(message)
+      const result = await sgMail.send(message);
-      .then(() => {
+      console.log(result);
-        response
+      if (result) {
-          .status(200)
+        response.status(200).json({
-          .send({ message: 'Your email has been sent', success: true });
+          message:
-      })
+            'Your message has been succesfully sent. Thank you for your feedback.',
-      .catch((error: string) => {
+          success: true,
-        console.error(error);
-        response.status(500).send({
-          message: 'There was an issue with your email... please retry',
-          error,
         });
+      }
+    } catch (error: unknown) {
+      if (error) {
+        response.status(500).json({
+          error:
+            'Oups, there was a problem with your email, please try again or contact us',
+          success: false,
         });
       }
+    }
+  }
 };
 export default sendGrid;