Move fetch user data logic and format date out

ChangePlusPlusVandy · Nov 15, 2023 · 8fe91f8 · 8fe91f8
1 parent 057d57c
commit 8fe91f8
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 38 deletions.
diff --git a/components/Home/MainDashboard.tsx b/components/Home/MainDashboard.tsx
@@ -17,6 +17,8 @@ import {
   MobilePastActivityContainer,
   MobileHeader,
 } from '@/styles/dashboard.styles';
+import { formatDate } from '@/utils/utils';
+import { QueriedUserData } from 'bookem-shared/src/types/database';
 
 /**
  * format main dashboard on home page
@@ -28,18 +30,10 @@ import {
  *   dollarsDonated: number;
  * }
  */
-const MainDashboard = ({ userData }: any) => {
+const MainDashboard = ({ userData }: { userData: QueriedUserData | null }) => {
   // state for showing mobile past activities
   const [onMobilePastActivity, setOnMobilePastActivity] = useState(false);
-
-  const formatDate = ({ userData }: any) => {
-    const dateObject = new Date(userData.createdAt);
-    const year = dateObject.getFullYear();
-    const month = String(dateObject.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
-    const day = String(dateObject.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
-  const formattedDate = formatDate({ userData });
+  const formattedDate = formatDate(new Date(userData?.createdAt as Date));
 
   const content = (
     <div>
@@ -49,17 +43,18 @@ const MainDashboard = ({ userData }: any) => {
 
   return (
     <>
-      {onMobilePastActivity ? (
+      {onMobilePastActivity && (
         <>
           {/* Display PastActivity when click on arrow button */}
           <PastActivity userData={userData} />
         </>
-      ) : (
+      )}
+      {!onMobilePastActivity && (
         <DashboardLayout>
           <Container>
             {/* Mobile Greeting and InfoIcon*/}
             <Media lessThan="sm">
-              <Greeting>Hello, {userData.name}</Greeting>
+              <Greeting>Hello, {userData?.name}</Greeting>
 
               <Popover content={content} title="Info">
                 <InfoIcon>
@@ -76,7 +71,7 @@ const MainDashboard = ({ userData }: any) => {
             {/* Desktop Greeting and InfoIcon */}
             <Media greaterThanOrEqual="sm">
               <Greeting>
-                Hello {userData.name}, thanks for checking in!
+                Hello {userData?.name}, thanks for checking in!
               </Greeting>
               <Popover content={content} title="Info">
                 <InfoIcon>
@@ -103,7 +98,7 @@ const MainDashboard = ({ userData }: any) => {
 
               <StatsFlex>
                 <FlexChild>
-                  <StatsNumber>{userData.events.length}</StatsNumber>
+                  <StatsNumber>{userData?.events.length}</StatsNumber>
                   <StatsDescription>Events volunteered</StatsDescription>
                 </FlexChild>
 

diff --git a/lib/useUserData.ts b/lib/useUserData.ts
@@ -0,0 +1,15 @@
+import { fetchData } from '@/utils/utils';
+import { QueriedUserData } from 'bookem-shared/src/types/database';
+import { useEffect, useState } from 'react';
+
+export const useUserData = () => {
+  const [userData, setUserData] = useState<QueriedUserData | null>(null);
+
+  useEffect(() => {
+    fetchData('/api/users/')
+      .then(data => setUserData(data))
+      .catch(err => console.error('Error fetching user data:', err));
+  }, []);
+
+  return userData;
+};
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,23 +2,12 @@ import MainDashboard from '@/components/Home/MainDashboard';
 import React from 'react';
 import { fetchData } from '@/utils/utils';
 import { useEffect, useState } from 'react';
+import { useUserData } from '@/lib/useUserData';
+import { QueriedUserData } from 'bookem-shared/src/types/database';
 
 const HomePage = () => {
-  const [userData, setUserData] = useState(null);
   const [error, setError] = useState<Error>();
-
-  useEffect(() => {
-    try {
-      fetchData('/api/users/')
-        .then(data => {
-          setUserData(data);
-        })
-        .catch(err => setError(err));
-    } catch (error) {
-      setError(new Error('Error fetching user data'));
-      console.error('Error fetching user data:', error);
-    }
-  }, []);
+  const userData = useUserData();
 
   return (
     <>

diff --git a/pages/volunteer.tsx b/pages/volunteer.tsx
@@ -1,16 +1,9 @@
 import React from 'react';
 import VolunteerDashboard from '@/components/Volunteer/VolunteerDashboard';
-
-const userData = {
-  name: 'Carol He',
-  hoursVolunteered: 10,
-  booksShared: 5,
-  dollarsDonated: 100,
-  booksDistributed: 231,
-  eventsAssisted: 15,
-};
+import { useUserData } from '@/lib/useUserData';
 
 const VolunteerPage = () => {
+  const userData = useUserData();
   return (
     <>
       <VolunteerDashboard userData={userData} />

diff --git a/utils/utils.ts b/utils/utils.ts
@@ -93,6 +93,18 @@ export const formatBirthday = (value: string) => {
   )}`;
 };
 
+/**
+ * Format a date object in year-month-day
+ * @param date
+ * @returns formatted string: year-month-day
+ */
+export const formatDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
 /**
  * validate inputted birthday in the format
  * adapted from https://bobbyhadz.com/blog/javascript-check-if-date-is-valid#validate-a-date-formatted-as-ddmmyyyy-in-javascript