Katie hanah/add backend to home (#58)

* connect backend and create new type * add fetching all events and event count in home * Small fixes Co-authored-by: Hanah Kim <[email protected]> --------- Co-authored-by: wkim10 <[email protected]> Co-authored-by: Hanah Kim <[email protected]>
JumboCode · Jan 31, 2025 · 3862b4c · 3862b4c
1 parent bbf3b91
commit 3862b4c
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 24 deletions.
diff --git a/src/app/api/event/route.client.ts b/src/app/api/event/route.client.ts
@@ -40,3 +40,14 @@ export const deleteEvent = async (id: string) => {
 
   return json;
 };
+
+// NOTE: This is for fetching all events
+export const fetchEvent = async () => {
+  const response = await fetch("/api/event", {
+    method: "GET",
+  });
+
+  const json = await response.json();
+
+  return json;
+};
diff --git a/src/app/api/event/route.ts b/src/app/api/event/route.ts
@@ -72,3 +72,36 @@ export const DELETE = async (request: NextRequest) => {
     });
   }
 };
+
+// NOTE: This is for fetching all events
+export const GET = async () => {
+  // currently implemented for fetching all events
+  // need to add filtering
+  try {
+    const fetchedEvents = await prisma.event.findMany(); // Use findMany to fetch all events
+
+    if (!fetchedEvents || fetchedEvents.length === 0) {
+      return NextResponse.json(
+        {
+          code: "NOT_FOUND",
+          message: "No events found",
+        },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json({
+      code: "SUCCESS",
+      data: fetchedEvents,
+    });
+  } catch (error) {
+    console.error("Error fetching events:", error);
+    return NextResponse.json(
+      {
+        code: "ERROR",
+        message: "An error occurred while fetching events",
+      },
+      { status: 500 }
+    );
+  }
+};
diff --git a/src/app/private/page.tsx b/src/app/private/page.tsx
@@ -4,29 +4,40 @@ import { useSession } from "next-auth/react";
 import StatsCard from "@components/StatsCard";
 import EventCard from "@components/EventCard";
 import VolunteerTable from "@components/VolunteerTable";
-import { Role, User } from "@prisma/client";
+import { Role, Event } from "@prisma/client";
 import React from "react";
 import { getUsersByRole } from "@api/user/route.client";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { useRouter } from "next/navigation";
+import { UserWithVolunteerDetail } from "../types";
+import { fetchEvent } from "../api/event/route.client";
 
 export default function HomePage() {
   const router = useRouter();
 
   const { data: session } = useSession();
-  const [users, setUsers] = React.useState<User[]>();
+  const [users, setUsers] = React.useState<UserWithVolunteerDetail[]>([]);
+  const [events, setEvents] = React.useState<Event[]>([]);
+  const [loading, setLoading] = React.useState<boolean>(true);
 
   React.useEffect(() => {
-    const fetchUsers = async () => {
+    const fetchData = async () => {
       try {
-        const response = await getUsersByRole(Role.VOLUNTEER);
-        setUsers(response.data);
+        const [usersResponse, eventsResponse] = await Promise.all([
+          getUsersByRole(Role.VOLUNTEER),
+          fetchEvent(),
+        ]);
+
+        setUsers(usersResponse.data);
+        setEvents(eventsResponse.data);
       } catch (error) {
-        console.error("Error fetching volunteers:", error);
+        console.error("Error fetching data:", error);
+      } finally {
+        setLoading(false);
       }
     };
 
-    fetchUsers();
+    fetchData();
   }, []);
 
   if (!session) {
@@ -49,33 +60,49 @@ export default function HomePage() {
       </div>
 
       <div className="flex flex-nowrap gap-x-7 pt-8">
+        {session.user.role === Role.ADMIN && (
+          <StatsCard
+            heading="Total volunteers"
+            value={!loading ? users.length : "..."}
+            icon="pepicons-pencil:people"
+            date="October 5th, 2024" // NOTE: Date will soon be moved
+          />
+        )}
         <StatsCard
           heading={
             session.user.role === Role.ADMIN
-              ? "Total volunteers"
+              ? "Total volunteer hours"
               : "Personal volunteer hours"
           }
-          value="50"
-          icon="pepicons-pencil:people"
-          date="October 5th, 2024"
+          value={
+            !loading
+              ? session.user.role === Role.ADMIN && users
+                ? users.reduce(
+                    (sum, user) =>
+                      sum + (user.volunteerDetails?.hoursWorked || 0),
+                    0
+                  )
+                : session.user.volunteerDetails?.hoursWorked || 0
+              : "..."
+          }
+          icon="tabler:clock-check"
+          date="October 5th, 2024" // NOTE: Date will soon be moved
         />
-        {session.user.role === Role.ADMIN ? (
-          <StatsCard
-            heading="Total volunteer hours"
-            value="200"
-            icon="tabler:clock-check"
-            date="October 5th, 2024"
-          />
-        ) : null}
         <StatsCard
           heading={
             session.user.role === Role.ADMIN
               ? "Total events"
               : "Events attended"
           }
-          value="10"
+          value={
+            !loading
+              ? session.user.role === Role.ADMIN
+                ? events.length
+                : 9999 // @TODO: Replace with actual user's events in the future
+              : "..."
+          }
           icon="mdi:calendar-outline"
-          date="December 11th, 2024"
+          date="December 11th, 2024" // NOTE: Date will soon be moved
         />
       </div>
 

diff --git a/src/app/types/index.ts b/src/app/types/index.ts
@@ -0,0 +1,5 @@
+import { User, VolunteerDetails } from "@prisma/client";
+
+export type UserWithVolunteerDetail = User & {
+    volunteerDetails?: VolunteerDetails;
+};
diff --git a/src/components/VolunteerTable.tsx b/src/components/VolunteerTable.tsx
@@ -12,14 +12,14 @@ import IconButton from "@mui/material/IconButton";
 import Checkbox from "@mui/material/Checkbox";
 import React, { useEffect, useRef, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { User } from "@prisma/client";
 import { Box, Button, Typography } from "@mui/material";
 import UserAvatar from "@components/UserAvatar";
+import { UserWithVolunteerDetail } from "../app/types";
 
 interface VolunteerTableProps {
   showPagination: boolean;
   fromVolunteerPage: boolean;
-  users: User[] | undefined;
+  users: UserWithVolunteerDetail[] | undefined;
   selected?: string[];
   setSelected?: React.Dispatch<React.SetStateAction<string[]>>;
 }
@@ -284,7 +284,14 @@ export default function VolunteerTable({
                 }}
                 align="left"
               >
-                Location Coming Soon!
+                {row?.volunteerDetails?.address &&
+                  row?.volunteerDetails?.address +
+                    ", " +
+                    row?.volunteerDetails?.city +
+                    ", " +
+                    row?.volunteerDetails?.state +
+                    " " +
+                    row?.volunteerDetails?.zipCode}
               </TableCell>
               <TableCell
                 sx={{