⚡ perf: decrease number of calls and improve error handling

Author: Andrea Aramini, INI-MBM-BNC (EXT)

src/app/components/ContactSection.jsx

@@ -14,11 +14,25 @@ const EmailSection = () => {
       e.target.email.value,
       e.target.subject.value,
       e.target.message.value,
-    ).then((response) => {
-      if (response.status === 201) {
+    )
+      .then((_) => {
         formRef.current.reset();
-      }
-    });
+      })
+      .then((_) => {
+        controls.set({ opacity: 0, scale: 1 });
+        controls.start({
+          opacity: 1,
+          scale: 1,
+          transition: {
+            repeat: 1,
+            repeatType: 'reverse',
+            duration: 2,
+          },
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   };
   return (
     <section
@@ -108,18 +122,6 @@ const EmailSection = () => {
           <button
             type="submit"
             className="rounded hover:bg-primary-400 bg-primary-600 text-primaryText w-full py-2.5 flex justify-center"
-            onClick={() => {
-              controls.set({ opacity: 0, scale: 1 });
-              controls.start({
-                opacity: 1,
-                scale: 1,
-                transition: {
-                  repeat: 1,
-                  repeatType: 'reverse',
-                  duration: 2,
-                },
-              });
-            }}
           >
             Send Message
           </button>

src/app/components/HeroSection.jsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { TypeAnimation } from 'react-type-animation';
 import Link from 'next/link';
@@ -8,16 +8,24 @@ import { generateCurriculum } from '../lib/client';
 const HeroSection = () => {
   const [hasCvDownloaded, setHasCvDownloaded] = useState(false);
   const [downloadLink, setDownloadLink] = useState();
+  const initialized = useRef(false);
 
   useEffect(() => {
     const getDownloadLink = async () => {
-      await generateCurriculum().then((response) => {
-        if (response.status === 200) {
-          setDownloadLink(response.data.download_link);
-        }
-      });
+      await generateCurriculum()
+        .then((response) => {
+          if (response) {
+            setDownloadLink(response.data.download_link);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     };
-    getDownloadLink();
+    if (!initialized.current) {
+      initialized.current = true;
+      getDownloadLink();
+    }
   });
 
   return (

src/app/lib/client.js

@@ -6,6 +6,9 @@ const instance = axios.create({
     : '/api/v1',
   timeout: 10000,
   headers: { 'Content-Type': 'application/json' },
+  validateStatus: (status) => {
+    return status >= 200 && status < 300;
+  },
 });
 
 export async function sendContactMeEmail(emailFrom, subject, text) {
@@ -14,17 +17,9 @@ export async function sendContactMeEmail(emailFrom, subject, text) {
     subject: subject,
     text: text,
   };
-  try {
-    return await instance.post('/contact-me/', data);
-  } catch (error) {
-    console.log(`unable to send email ${error}`);
-  }
+  return await instance.post('/contact-me/', data);
 }
 
 export async function generateCurriculum() {
-  try {
-    return await instance.post('/curriculum/');
-  } catch (error) {
-    console.log(`unable to generate curriculum ${error}`);
-  }
+  return await instance.post('/curriculum/');
 }