Dashboard fix

components/DesktopSidebar/UserIcon.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { fetchData } from '@/utils/utils';
 import {
   ImageContainer,
   Name,
   UserIconContainer,
 } from '@/styles/components/Sidebar/userIcon.styles';
 import { Media } from '@/lib/media';
+import { useSession } from 'next-auth/react';
 
 export const UserIcon = () => {
+  const { data: session } = useSession();
+
   return (
     <UserIconContainer>
       <ImageContainer>
@@ -20,7 +25,7 @@ export const UserIcon = () => {
           <Image src="/bookem-logo.png" width="73" height="73" alt="" />
         </Media>
       </ImageContainer>
-      <Name>Linda S.</Name>
+      <Name>{session?.user && session.user.name}</Name>
     </UserIconContainer>
   );
 };

components/Home/MainDashboard.tsx

@@ -3,6 +3,7 @@ import { Media } from '@/lib/media';
 import Image from 'next/image';
 import UpcomingEvents from '@/components/Home/UpcomingEvents';
 import PastActivity from '@/components/Home/PastActivity';
+import { Popover } from 'antd';
 import {
   Container,
   DashboardLayout,
@@ -16,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
@@ -27,48 +30,58 @@ 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 content = (
+    <div>
+      <p>This is the main dashboard for book&apos;em user</p>
+    </div>
+  );
+
   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>
-
-              <InfoIcon>
-                <Image
-                  src="/home/info.png"
-                  alt="Info icon"
-                  width="19"
-                  height="19"
-                />
-              </InfoIcon>
+              <Greeting>Hello, {userData?.name}</Greeting>
+
+              <Popover content={content} title="Info">
+                <InfoIcon>
+                  <Image
+                    src="/home/info.png"
+                    alt="Info icon"
+                    width="19"
+                    height="19"
+                  />
+                </InfoIcon>
+              </Popover>
             </Media>
 
             {/* Desktop Greeting and InfoIcon */}
             <Media greaterThanOrEqual="sm">
               <Greeting>
-                Hello {userData.name}, thanks for checking in!
+                Hello {userData?.name}, thanks for checking in!
               </Greeting>
-
-              <InfoIcon>
-                <Image
-                  src="/home/info.png"
-                  alt="Info icon"
-                  width="44"
-                  height="44"
-                />
-              </InfoIcon>
+              <Popover content={content} title="Info">
+                <InfoIcon>
+                  <Image
+                    src="/home/info.png"
+                    alt="Info icon"
+                    width="35"
+                    height="35"
+                  />
+                </InfoIcon>
+              </Popover>
             </Media>
 
             <div>
@@ -84,18 +97,15 @@ const MainDashboard = ({ userData }: any) => {
 
               <StatsFlex>
                 <FlexChild>
-                  <StatsNumber>{userData.hoursVolunteered}</StatsNumber>
-                  <StatsDescription>hours volunteered</StatsDescription>
-                </FlexChild>
-
-                <FlexChild>
-                  <StatsNumber>{userData.booksShared}</StatsNumber>
-                  <StatsDescription>books shared</StatsDescription>
+                  <StatsNumber>{userData?.events.length}</StatsNumber>
+                  <StatsDescription>Events attended</StatsDescription>
                 </FlexChild>
 
                 <FlexChild>
-                  <StatsNumber>{userData.dollarsDonated}</StatsNumber>
-                  <StatsDescription>dollars donated</StatsDescription>
+                  <StatsNumber>
+                    {formatDate(new Date(userData?.createdAt as Date))}
+                  </StatsNumber>
+                  <StatsDescription>Date joined</StatsDescription>
                 </FlexChild>
               </StatsFlex>
             </div>
@@ -133,7 +143,7 @@ const MainDashboard = ({ userData }: any) => {
 
           {/* Desktop PastActivity is shown on the right side of main dashboard*/}
           <Media greaterThanOrEqual="sm">
-            <PastActivity />
+            <PastActivity userData={userData} />
           </Media>
         </DashboardLayout>
       )}

components/Home/PastActivity.tsx

@@ -1,7 +1,10 @@
 import React, { Suspense, useState } from 'react';
 import mongoose from 'mongoose';
 import { Media } from '@/lib/media';
-import { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
+import {
+  QueriedUserData,
+  QueriedVolunteerEventData,
+} from 'bookem-shared/src/types/database';
 import Image from 'next/image';
 const EventCard = React.lazy(() => import('@/components/shared/EventCard')); // implement lazy loading
 import MainDashboard from '@/components/Home/MainDashboard';
@@ -39,7 +42,7 @@ const dummyEventData: QueriedVolunteerEventData = {
 };
 
 // vertical list of sample PastEvents
-const PastActivity = ({ userData }: any) => {
+const PastActivity = ({ userData }: { userData: QueriedUserData | null }) => {
   // state for hiding/showing mobile Past Activities
   const [onMobileHide, setOnMobileHide] = useState(false);
 

components/Volunteer/VolunteerDashboard.tsx

@@ -19,8 +19,14 @@ import {
 import LogHoursPopupWindowForm from '@/components/Forms/LogHoursPopupWindowForm';
 import { Media } from '@/lib/media';
 import { BOOKEM_THEME } from '@/utils/constants';
+import { QueriedUserData } from 'bookem-shared/src/types/database';
+import { formatDate } from '@/utils/utils';
 
-const VolunteerDashboard = ({ userData }: any) => {
+const VolunteerDashboard = ({
+  userData,
+}: {
+  userData: QueriedUserData | null;
+}) => {
   // set pop up window to false
   const [showPopup, setShowPopup] = useState(false);
 
@@ -87,19 +93,16 @@ const VolunteerDashboard = ({ userData }: any) => {
         <VolunteerStatsContainer>
           <StatsFlex>
             <FlexChild>
-              <StatsNumber>{userData.hoursVolunteered}</StatsNumber>
-              <StatsDescription>Hours volunteered</StatsDescription>
+              <StatsNumber>{userData?.events.length}</StatsNumber>
+              <StatsDescription>Events attended</StatsDescription>
             </FlexChild>
 
             <FlexChild>
-              <StatsNumber>{userData.booksDistributed}</StatsNumber>
+              <StatsNumber>
+                {formatDate(new Date(userData?.createdAt as Date))}
+              </StatsNumber>
               <StatsDescription>Books distributed</StatsDescription>
             </FlexChild>
-
-            <FlexChild>
-              <StatsNumber>{userData.eventsAssisted}</StatsNumber>
-              <StatsDescription>Events assisted</StatsDescription>
-            </FlexChild>
           </StatsFlex>
         </VolunteerStatsContainer>
       </DashboardContainer>

lib/useUserData.ts

@@ -0,0 +1,19 @@
+import { fetchData } from '@/utils/utils';
+import { QueriedUserData } from 'bookem-shared/src/types/database';
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook to fetch user data and return
+ * @returns
+ */
+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;
+};