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,17 +41,24 @@ const MailingList = (): JSX.Element => {
   const subscribe = async (): Promise<void> => {
     setLoading(true);
 
-    const data = await axios.put('api/mailingList', {
+    try {
-      mail,
+      const data = await axios.put('api/mailingList', {
-    });
+        mail,
+      });
 
-    if (data.status === 200) {
+      if (data.status === 200) {
-      toast.success('You have been added to our mailing list. Welcome 👋');
+        toast.success('You have been added to our mailing list. Welcome 👋');
-      setLoading(false);
+        setLoading(false);
-      setMail('');
+        setMail('');
-    } else {
+      }
-      toast.error('Something went wrong');
+    } catch (error: unknown) {
-      setLoading(false);
+      const errorChecked = error as AxiosError;
+      const errorMessage = errorChecked.response as ErrorAxios;
+
+      if (errorMessage.data.error) {
+        toast.error(errorMessage.data.error);
+        setLoading(false);
+      }
     }
   };
   return (

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);
+    if (result.error) {
-      } else toast.success('Check your email to reset your password!');
+      toast.error(result.error.message);
-    });
+    } 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);
-      }
     });
+
+    if (result.error) {
+      toast.error(result.error.message);
+    } else if (result.user) {
+      void router.push('/');
+    }
   };
 
   return (

components/UI/SignUpPanel.tsx

@@ -32,21 +32,20 @@ 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) {
-        toast.success(
-          'A confirmation email has been sent to you, watch your mailbox!'
-        );
-      } else if (result.user) {
-        void router.push('/');
-      }
     });
+
+    if (result.error) {
+      toast.error(result.error.message);
+    } else if (result.user?.confirmation_sent_at) {
+      toast.success(
+        'A confirmation email has been sent to you, watch your mailbox!'
+      );
+    } else if (result.user) {
+      void router.push('/');
+    }
   };
 
   return (

pages/api/mailingList.ts

@@ -37,33 +37,30 @@ 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',
-        'https://api.sendgrid.com/v3/marketing/contacts',
+      {
-        {
+        contacts: [{ email: `${request.body.mail}` }],
-          contacts: [{ email: `${request.body.mail}` }],
+        list_ids: [process.env.SENDGRID_MAILING_ID],
-          list_ids: [process.env.SENDGRID_MAILING_ID],
+      },
+      {
+        headers: {
+          'content-type': 'application/json',
+          Authorization: `Bearer ${process.env.SENDGRID_SECRET || ''}`,
         },
-        {
+      }
-          headers: {
+    );
-            'content-type': 'application/json',
+
-            Authorization: `Bearer ${process.env.SENDGRID_SECRET || ''}`,
+    if (result.status === 200) {
-          },
+      response.status(200).json({
-        }
+        message:
-      )
+          'Your email has been succesfully added to the mailing list. Welcome 👋',
-      .then((result) => {
-        console.log(result);
-        response.status(200).send({
-          message:
-            'Your email has been succesfully added to the mailing list. Welcome 👋',
-        });
-      })
-      .catch((error) => {
-        response.status(500).send({
-          message:
-            'Oups, there was a problem with your subscription, please try again or contact us',
-          error: error as string,
-        });
       });
+    } else {
+      response.status(500).json({
+        error:
+          'Oups, there was a problem with your subscription, please try again or contact us',
+      });
+    }
   }
 }

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;