feat: Add async/await to generateStats function for improved loading experience

The code changes include adding the `async` keyword and `await` keyword to the `generateStats` function in the `GenerateStats` component. This allows for asynchronous fetching of data from the API endpoint, improving the loading experience for the user. Additionally, error handling has been added to display appropriate toast notifications in case of errors.

Recent user commits:
- Added skeleton loading component
- Update Navbar component with responsive styling and search functionality
- Add react-toastify dependency and implement toast notifications
- Add mongoose dependency and create API endpoints for fetching and adding user data
- Add PromotionCard component to Home page + api working

Recent repository commits:
- Update Card component with additional styling for responsiveness
- Update Navbar component with responsive styling and search functionality
- Add lazy loading for images and update grid layout in home page
- card component created

Author: druvkotwani

client/src/app/components/GenerateStats.tsx

@@ -13,7 +13,7 @@ const GenerateStats = ({ showStats, setShowStats }: any) => {
   const [data, setData] = useState<any>(defaultData);
   const [loading, setLoading] = useState(false);
 
-  const generateStats = (e: React.FormEvent) => {
+  const generateStats = async (e: React.FormEvent) => {
     setLoading(true);
     e.preventDefault();
 
@@ -22,15 +22,21 @@ const GenerateStats = ({ showStats, setShowStats }: any) => {
     }
 
     try {
-      fetch("/api/" + username)
-        .then((res) => res.json())
-        .then((data) => {
-          setData(data);
-          toast("🫡Stats generated successfully");
-          setLoading(false);
-        });
+      const res = await fetch("/api/" + username);
+      if (!res.ok) {
+        toast("👻 User not found");
+        setLoading(false);
+        return;
+      }
+
+      const data = await res.json();
+      setData(data);
+      toast("🫡 Stats generated successfully");
     } catch (error) {
       console.error("An error occurred. Please try again later");
+      toast("😞 An error occurred. Please try again later");
+    } finally {
+      setLoading(false);
     }
   };
 

client/src/app/page.tsx

@@ -32,7 +32,7 @@ export default function Home() {
 
   useEffect(() => {
     fetchData();
-  }, [datas.length]);
+  }, [datas && datas.length]);
 
   const searchedData = datas?.filter((data: any) =>
     data.profileData.fullName.toLowerCase().includes(search.toLowerCase())