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;
 
-  if (name && email && message) {
-    axios
-      .post('/api/sendgrid', { email, name, message })
-      .then(
-        (result: {
-          data: {
+  interface EmailData {
     success: boolean;
     message: string;
-          };
-        }) => {
-          if (result.data.success === true) {
-            toast.success(result.data.message);
+  }
+
+  if (name && email && message) {
+    try {
+      const mail = await axios.post<EmailData>('/api/sendgrid', {
+        email,
+        name,
+        message,
+      });
+      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) => {
+    } 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,
-      })
-      .then((result) => {
-        if (result.status === 200) {
-          toast.success(
-            'Your email has been succesfully added to the mailing list. Welcome 👋'
-          );
+    });
+
+    if (data.status === 200) {
+      toast.success('You have been added to our mailing list. Welcome 👋');
+      setLoading(false);
+      setMail('');
+    } 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));
-      void supabase
+      const subFunction = async (): Promise<void> => {
+        const sub = await getSub();
+        if (sub) {
+          setSub(sub);
+        }
+        const subSupa = await supabase
           .from<definitions['subscriptions']>('subscriptions')
           .select(`customer_id`)
           .eq('id', user.id)
-        .single()
-        .then((result) => {
-          setCustomerId(result.data?.customer_id);
-        });
+          .single();
+
+        setCustomerId(subSupa.data?.customer_id);
+      };
+      void subFunction();
     }
   }, [user]);