Start to work on async/await

components/Contact.tsx

@@ -9,33 +9,33 @@ the axios.post here, line 18.
 import axios from 'axios';
 import { toast } from 'react-toastify';
 
-const sendEmail = (): void => {
+const sendEmail = async (): Promise<void> => {
   const name = (document.querySelector('#name') as HTMLInputElement).value;
   const email = (document.querySelector('#email') as HTMLInputElement).value;
   const message = (document.querySelector('#message') as HTMLInputElement)
     .value;
 
+  interface EmailData {
+    success: boolean;
+    message: string;
+  }
+
   if (name && email && message) {
-    axios
+    try {
-      .post('/api/sendgrid', { email, name, message })
+      const mail = await axios.post<EmailData>('/api/sendgrid', {
-      .then(
+        email,
-        (result: {
+        name,
-          data: {
+        message,
-            success: boolean;
-            message: string;
-          };
-        }) => {
-          if (result.data.success === true) {
-            toast.success(result.data.message);
-            (document.querySelector('#name') as HTMLInputElement).value = '';
-            (document.querySelector('#email') as HTMLInputElement).value = '';
-            (document.querySelector('#message') as HTMLInputElement).value = '';
-          }
-        }
-      )
-      .catch((error) => {
-        console.log(error);
       });
+      if (mail.data.success === true) {
+        toast.success(mail.data.message);
+        (document.querySelector('#name') as HTMLInputElement).value = '';
+        (document.querySelector('#email') as HTMLInputElement).value = '';
+        (document.querySelector('#message') as HTMLInputElement).value = '';
+      }
+    } catch (error) {
+      console.log(error);
+    }
   } else {
     toast.info('Please fill all the fields ', {
       position: 'top-center',
@@ -97,7 +97,7 @@ const Contact = (): JSX.Element => {
           className="btn btn-primary btn-sm"
           onClick={(event) => {
             event.preventDefault();
-            sendEmail();
+            void sendEmail();
           }}>
           Submit{' '}
         </button>

components/MailingList.tsx

@@ -21,7 +21,7 @@ const MailingList = (): JSX.Element => {
 
     if (regex.test(mail)) {
       // this is a valid email address
-      subscribe();
+      void subscribe();
       setValid(true);
     } else {
       // invalid email.
@@ -30,24 +30,21 @@ const MailingList = (): JSX.Element => {
     }
   };
 
-  const subscribe = (): void => {
+  const subscribe = async (): Promise<void> => {
     setLoading(true);
-    axios
+
-      .put('api/mailingList', {
+    const data = await axios.put('api/mailingList', {
-        mail,
+      mail,
-      })
+    });
-      .then((result) => {
+
-        if (result.status === 200) {
+    if (data.status === 200) {
-          toast.success(
+      toast.success('You have been added to our mailing list. Welcome 👋');
-            'Your email has been succesfully added to the mailing list. Welcome 👋'
+      setLoading(false);
-          );
+      setMail('');
-          setLoading(false);
+    } else {
-        }
+      toast.error('Something went wrong');
-      })
+      setLoading(false);
-      .catch((error) => {
+    }
-        console.log(error);
-        setLoading(false);
-      });
   };
   return (
     <div className="flex flex-col m-auto my-10 mt-24">

components/Pricing.tsx

@@ -21,15 +21,20 @@ const Pricing = (): JSX.Element => {
 
   useEffect(() => {
     if (user) {
-      void getSub().then((result) => setSub(result));
+      const subFunction = async (): Promise<void> => {
-      void supabase
+        const sub = await getSub();
-        .from<definitions['subscriptions']>('subscriptions')
+        if (sub) {
-        .select(`customer_id`)
+          setSub(sub);
-        .eq('id', user.id)
+        }
-        .single()
+        const subSupa = await supabase
-        .then((result) => {
+          .from<definitions['subscriptions']>('subscriptions')
-          setCustomerId(result.data?.customer_id);
+          .select(`customer_id`)
-        });
+          .eq('id', user.id)
+          .single();
+
+        setCustomerId(subSupa.data?.customer_id);
+      };
+      void subFunction();
     }
   }, [user]);