Home Page Room Card API Calls

frontend/src/components/pages/home/HomeRoomCard.tsx

@@ -6,9 +6,16 @@ import { Flex, Heading, Text, Box, Circle } from "@chakra-ui/react";
 type Props = {
   room: string | number;
   residentId: number;
+  pendingTasks: number;
+  assignedTasks: number;
 };
 
-const RoomCard = ({ room, residentId }: Props): React.ReactElement => {
+const RoomCard = ({
+  room,
+  residentId,
+  pendingTasks,
+  assignedTasks,
+}: Props): React.ReactElement => {
   return (
     <Box
       p="10px"
@@ -32,7 +39,7 @@ const RoomCard = ({ room, residentId }: Props): React.ReactElement => {
               padding={2.5}
             >
               <Flex alignItems="center" justifyContent="center" fontSize="sm">
-                1
+                {pendingTasks}
               </Flex>
             </Circle>
             <Flex
@@ -53,7 +60,7 @@ const RoomCard = ({ room, residentId }: Props): React.ReactElement => {
               padding={2.5}
             >
               <Flex alignItems="center" justifyContent="center" fontSize="sm">
-                2
+                {assignedTasks}
               </Flex>
             </Circle>
             <Flex

frontend/src/components/pages/home/RoomGrid.tsx

@@ -1,22 +1,33 @@
 import React, { useEffect, useState } from "react";
 import { Flex, Grid } from "@chakra-ui/react";
+import { useQuery } from "@apollo/client";
 import RoomCard from "./HomeRoomCard";
+import { GET_ACTIVE_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries";
+import { GET_TASKS_BY_STATUS } from "../../../APIClients/Queries/TaskQueries";
 
-const rooms = [
-  { id: 1, name: "1", info: "Info about Room 1" },
-  { id: 2, name: "2", info: "Info about Room 2" },
-  { id: 3, name: "3", info: "Info about Room 3" },
-  { id: 4, name: "4", info: "Info about Room 4" },
-  { id: 5, name: "5", info: "Info about Room 5" },
-  { id: 6, name: "6", info: "Info about Room 6" },
-  { id: 7, name: "7", info: "Info about Room 7" },
-  { id: 8, name: "8", info: "Info about Room 8" },
-  { id: 9, name: "9", info: "Info about Room 9" },
-  { id: 10, name: "10", info: "Info about Room 10" },
-  { id: 11, name: "11", info: "Info about Room 11" },
-];
+const RoomGrid = () => {
+  const { data: residentData } = useQuery(GET_ACTIVE_RESIDENTS);
+
+  const { data: pending } = useQuery(GET_TASKS_BY_STATUS, {
+    variables: { status: "PENDING_APPROVAL" },
+  });
+
+  const { data: assigned } = useQuery(GET_TASKS_BY_STATUS, {
+    variables: { status: "ASSIGNED" },
+  });
+
+  const fetchTasksForResident = (assigneeId: number) => {
+    const assignedTasks =
+      assigned?.getTasksByStatus?.filter(
+        (task: { assigneeId: number }) => task.assigneeId === assigneeId,
+      ).length || 0;
+    const pendingTasks =
+      pending?.getTasksByStatus?.filter(
+        (task: { assigneeId: number }) => task.assigneeId === assigneeId,
+      ).length || 0;
+    return { assignedTasks, pendingTasks, loading: false, error: null };
+  };
 
-function RoomGrid() {
   return (
     <Flex justifyContent="center" alignItems="center" width="100%">
       <Grid
@@ -28,12 +39,30 @@ function RoomGrid() {
         gap="20px"
         width="100%"
       >
-        {rooms.map((room) => (
-          <RoomCard room={room.name} residentId={room.id} key={room.id} />
-        ))}
+        {residentData?.getAllResidents?.map(
+          (room: {
+            roomNumber: string;
+            residentId: number;
+            userId: number;
+          }) => {
+            const { assignedTasks, pendingTasks } = fetchTasksForResident(
+              room.userId,
+            );
+
+            return (
+              <RoomCard
+                key={room.userId}
+                room={room.roomNumber}
+                residentId={room.residentId}
+                assignedTasks={assignedTasks}
+                pendingTasks={pendingTasks}
+              />
+            );
+          },
+        )}
       </Grid>
     </Flex>
   );
-}
+};
 
 export default RoomGrid;