From e9d41b87aab39466934cd07cbc1e2d835c5a5b0e Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Sat, 2 Nov 2024 11:57:52 -0400 Subject: [PATCH 1/5] added resident query --- .../components/pages/home/HomeRoomCard.tsx | 8 +++-- .../src/components/pages/home/RoomGrid.tsx | 35 ++++++++++--------- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/pages/home/HomeRoomCard.tsx b/frontend/src/components/pages/home/HomeRoomCard.tsx index 47870709..b8830960 100644 --- a/frontend/src/components/pages/home/HomeRoomCard.tsx +++ b/frontend/src/components/pages/home/HomeRoomCard.tsx @@ -6,9 +6,11 @@ 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 ( { padding={2.5} > - 1 + {pendingTasks} { padding={2.5} > - 2 + {assignedTasks} { +// return useQuery(GET_TASKS_BY_ASSIGNEE_ID, { +// variables: { assigneeId }, +// }); +// }; function RoomGrid() { - return ( + const { data: rooms, error: roomError, loading: roomLoading } = useQuery(GET_ALL_RESIDENTS); + if (roomError) { + return
Error
; + } + + return roomLoading ?
load
: ( - {rooms.map((room) => ( - + {rooms.map((room: { roomNumber: string; residentId: number; userId: string }) => ( + ))} From 73b0164a99e064a835c8dd62d3ded0303a6d99ab Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Sat, 16 Nov 2024 10:17:12 -0500 Subject: [PATCH 2/5] added roomgrid api calls --- .../src/components/pages/home/RoomGrid.tsx | 222 ++++++++++++++++-- 1 file changed, 204 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/pages/home/RoomGrid.tsx b/frontend/src/components/pages/home/RoomGrid.tsx index 2194b94d..00bf7c6d 100644 --- a/frontend/src/components/pages/home/RoomGrid.tsx +++ b/frontend/src/components/pages/home/RoomGrid.tsx @@ -1,26 +1,202 @@ +// import React, { useEffect, useState } from "react"; +// import { Flex, Grid } from "@chakra-ui/react"; +// import { useQuery } from "@apollo/client"; +// import RoomCard from "./HomeRoomCard"; +// import { TaskType } from "../../../types/TaskTypes"; + + +// import { GET_TASKS_BY_ASSIGNEE_ID } from "../../../APIClients/Queries/TaskQueries"; +// import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; + +// const { +// // loading: residentAllLoading, MAY NEED TO ADD LOADING ICON/STATE +// // error: residentAllError, +// data: residentAllData, +// } = useQuery(GET_ALL_RESIDENTS); + +// useEffect(() => { +// if (residentAllData?.getAllResidents) { +// console.log(residentAllData.getAllResidents); +// } +// }, [residentAllData]); + +// function RoomGrid() { +// const { data: rooms, error: roomError, loading: roomLoading } = useQuery(GET_ALL_RESIDENTS); +// if (roomError) { +// return
Error
; +// } + +// return roomLoading ?
load
: ( +// +// +// {rooms.map((room: { roomNumber: string; residentId: number; userId: string }) => ( +// +// ))} +// +// +// ); +// } + +// export default RoomGrid; + +// import React, { useEffect, useState } from "react"; +// import { Flex, Grid } from "@chakra-ui/react"; +// import { useQuery } from "@apollo/client"; +// import RoomCard from "./HomeRoomCard"; +// import { GET_TASKS_BY_ASSIGNEE_ID } from "../../../APIClients/Queries/TaskQueries"; +// import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; +// import { TaskType } from "../../../types/TaskTypes"; + +// function RoomGrid() { +// // Fetch all residents data +// const { data: residentData, error: residentError, loading: residentLoading } = useQuery(GET_ALL_RESIDENTS); + +// // Local state for storing task counts +// const [taskCounts, setTaskCounts] = useState<{ [key: number]: { assignedTasks: number; pendingTasks: number } }>({}); + +// const useFetchTasksForResident = (assigneeId: number) => { +// const { data, loading, error } = useQuery(GET_TASKS_BY_ASSIGNEE_ID, { +// variables: { assigneeId }, +// skip: !assigneeId, // Skip if no assigneeId +// }); + +// // Handle loading and error states +// if (loading) return { assignedTasks: 0, pendingTasks: 0, loading: true }; +// if (error) return { assignedTasks: 0, pendingTasks: 0, error: error.message }; + +// // Return the task count data (you can expand this logic as needed) +// const assignedTasks = data?.getTasksByAssigneeId?.length || 0; +// const pendingTasks = 0; // Placeholder for pending tasks logic + +// return { assignedTasks, pendingTasks, loading: false, error: null }; +// }; + +// // UseEffect to fetch tasks for all residents +// useEffect(() => { +// if (residentData?.getAllResidents) { +// const fetchAllTasks = async () => { +// const counts: { [key: number]: { assignedTasks: number; pendingTasks: number } } = {}; + +// // We use Promise.all to fetch tasks for all residents concurrently +// const taskPromises = residentData.getAllResidents.map(async (resident: { userId: number }) => { +// const { userId } = resident; +// const taskData = useFetchTasksForResident(userId); +// counts[userId] = taskData; +// }); + +// // Wait for all tasks to be fetched and then update state +// await Promise.all(taskPromises); + +// // Set the state with the results +// setTaskCounts(counts); +// }; + +// fetchAllTasks(); +// } +// }, [residentData]); + +// return ( +// +// +// {residentData.getAllResidents.map((room: { roomNumber: string; residentId: number; userId: number }) => { +// const taskData = taskCounts[room.userId] || { assignedTasks: 0, pendingTasks: 0 }; + +// return ( +// +// ); +// })} +// +// +// ); +// } + +// export default RoomGrid; + + import React, { useEffect, useState } from "react"; import { Flex, Grid } from "@chakra-ui/react"; import { useQuery } from "@apollo/client"; import RoomCard from "./HomeRoomCard"; -import { TaskType } from "../../../types/TaskTypes"; +import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; +import { GET_TASKS_BY_ASSIGNEE_ID } from "../../../APIClients/Queries/TaskQueries"; +const RoomGrid = () => { + // Fetch all residents data + const { data: residentData, error: residentError, loading: residentLoading } = useQuery(GET_ALL_RESIDENTS); -import { GET_TASKS_BY_ASSIGNEE_ID } from "../../../APIClients/Queries/TaskQueries"; -import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; + // Local state for storing task counts and loading states + const [taskCounts, setTaskCounts] = useState<{ [key: number]: { assignedTasks: number; pendingTasks: number } }>({}); + + const useFetchTasksForResident = (assigneeId: number) => { + const { data, loading, error } = useQuery(GET_TASKS_BY_ASSIGNEE_ID, { + variables: { assigneeId }, + skip: !assigneeId, // Skip if no assigneeId + }); + + // Handle loading and error states + if (loading) return { assignedTasks: 0, pendingTasks: 0, loading: true }; + if (error) return { assignedTasks: 0, pendingTasks: 0, error: error.message }; + + // Return the task count data (you can expand this logic as needed) + const assignedTasks = data?.getTasksByAssigneeId?.filter((task) => task.status === Status.PENDING_APPROVAL).length || 0; + const pendingTasks = 0; // Placeholder for pending tasks logic + + return { assignedTasks, pendingTasks, loading: false, error: null }; + }; + + // Fetch task counts for all residents + useEffect(() => { + if (residentData?.getAllResidents) { + const newTaskCounts: { [key: number]: { assignedTasks: number; pendingTasks: number } } = {}; + let tasksFetched = 0; + let totalResidents = residentData.getAllResidents.length; -// export const fetchRoomsWithTaskCounts = (assigneeId: number) => { -// return useQuery(GET_TASKS_BY_ASSIGNEE_ID, { -// variables: { assigneeId }, -// }); -// }; + // We can map over residents and use the hook directly for each one + residentData.getAllResidents.forEach((resident: { userId: number }) => { + const { assignedTasks, pendingTasks, loading, error } = useFetchTasksForResident(resident.userId); -function RoomGrid() { - const { data: rooms, error: roomError, loading: roomLoading } = useQuery(GET_ALL_RESIDENTS); - if (roomError) { - return
Error
; - } + // Check if data is loading + if (loading) { + newTaskCounts[resident.userId] = { assignedTasks: 0, pendingTasks: 0 }; // Default placeholder + } else if (error) { + newTaskCounts[resident.userId] = { assignedTasks: 0, pendingTasks: 0 }; // Handle error + } else { + newTaskCounts[resident.userId] = { assignedTasks, pendingTasks }; // Set fetched task data + } - return roomLoading ?
load
: ( + tasksFetched++; + + // Once all residents' tasks are fetched, set the task counts + if (tasksFetched === totalResidents) { + setTaskCounts(newTaskCounts); + } + }); + } + }, [residentData]); // Trigger effect when residentData changes + + return ( - {rooms.map((room: { roomNumber: string; residentId: number; userId: string }) => ( - - ))} + {residentData?.getAllResidents?.map((room: { roomNumber: string; residentId: number; userId: number }) => { + const taskData = taskCounts[room.userId] || { assignedTasks: 0, pendingTasks: 0 }; + + return ( + + ); + })} ); -} +}; export default RoomGrid; From 2df820e07a45a4d795dffbf54ba625fad780cb40 Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Sat, 16 Nov 2024 11:58:52 -0500 Subject: [PATCH 3/5] fixed room card api calls --- .../src/components/pages/home/RoomGrid.tsx | 204 ++---------------- 1 file changed, 15 insertions(+), 189 deletions(-) diff --git a/frontend/src/components/pages/home/RoomGrid.tsx b/frontend/src/components/pages/home/RoomGrid.tsx index 00bf7c6d..92396774 100644 --- a/frontend/src/components/pages/home/RoomGrid.tsx +++ b/frontend/src/components/pages/home/RoomGrid.tsx @@ -1,201 +1,27 @@ -// import React, { useEffect, useState } from "react"; -// import { Flex, Grid } from "@chakra-ui/react"; -// import { useQuery } from "@apollo/client"; -// import RoomCard from "./HomeRoomCard"; -// import { TaskType } from "../../../types/TaskTypes"; - - -// import { GET_TASKS_BY_ASSIGNEE_ID } from "../../../APIClients/Queries/TaskQueries"; -// import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; - -// const { -// // loading: residentAllLoading, MAY NEED TO ADD LOADING ICON/STATE -// // error: residentAllError, -// data: residentAllData, -// } = useQuery(GET_ALL_RESIDENTS); - -// useEffect(() => { -// if (residentAllData?.getAllResidents) { -// console.log(residentAllData.getAllResidents); -// } -// }, [residentAllData]); - -// function RoomGrid() { -// const { data: rooms, error: roomError, loading: roomLoading } = useQuery(GET_ALL_RESIDENTS); -// if (roomError) { -// return
Error
; -// } - -// return roomLoading ?
load
: ( -// -// -// {rooms.map((room: { roomNumber: string; residentId: number; userId: string }) => ( -// -// ))} -// -// -// ); -// } - -// export default RoomGrid; - -// import React, { useEffect, useState } from "react"; -// import { Flex, Grid } from "@chakra-ui/react"; -// import { useQuery } from "@apollo/client"; -// import RoomCard from "./HomeRoomCard"; -// import { GET_TASKS_BY_ASSIGNEE_ID } from "../../../APIClients/Queries/TaskQueries"; -// import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; -// import { TaskType } from "../../../types/TaskTypes"; - -// function RoomGrid() { -// // Fetch all residents data -// const { data: residentData, error: residentError, loading: residentLoading } = useQuery(GET_ALL_RESIDENTS); - -// // Local state for storing task counts -// const [taskCounts, setTaskCounts] = useState<{ [key: number]: { assignedTasks: number; pendingTasks: number } }>({}); - -// const useFetchTasksForResident = (assigneeId: number) => { -// const { data, loading, error } = useQuery(GET_TASKS_BY_ASSIGNEE_ID, { -// variables: { assigneeId }, -// skip: !assigneeId, // Skip if no assigneeId -// }); - -// // Handle loading and error states -// if (loading) return { assignedTasks: 0, pendingTasks: 0, loading: true }; -// if (error) return { assignedTasks: 0, pendingTasks: 0, error: error.message }; - -// // Return the task count data (you can expand this logic as needed) -// const assignedTasks = data?.getTasksByAssigneeId?.length || 0; -// const pendingTasks = 0; // Placeholder for pending tasks logic - -// return { assignedTasks, pendingTasks, loading: false, error: null }; -// }; - -// // UseEffect to fetch tasks for all residents -// useEffect(() => { -// if (residentData?.getAllResidents) { -// const fetchAllTasks = async () => { -// const counts: { [key: number]: { assignedTasks: number; pendingTasks: number } } = {}; - -// // We use Promise.all to fetch tasks for all residents concurrently -// const taskPromises = residentData.getAllResidents.map(async (resident: { userId: number }) => { -// const { userId } = resident; -// const taskData = useFetchTasksForResident(userId); -// counts[userId] = taskData; -// }); - -// // Wait for all tasks to be fetched and then update state -// await Promise.all(taskPromises); - -// // Set the state with the results -// setTaskCounts(counts); -// }; - -// fetchAllTasks(); -// } -// }, [residentData]); - -// return ( -// -// -// {residentData.getAllResidents.map((room: { roomNumber: string; residentId: number; userId: number }) => { -// const taskData = taskCounts[room.userId] || { assignedTasks: 0, pendingTasks: 0 }; - -// return ( -// -// ); -// })} -// -// -// ); -// } - -// export default RoomGrid; - - import React, { useEffect, useState } from "react"; import { Flex, Grid } from "@chakra-ui/react"; import { useQuery } from "@apollo/client"; import RoomCard from "./HomeRoomCard"; import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; -import { GET_TASKS_BY_ASSIGNEE_ID } from "../../../APIClients/Queries/TaskQueries"; +import { GET_TASKS_BY_STATUS } from "../../../APIClients/Queries/TaskQueries"; const RoomGrid = () => { - // Fetch all residents data - const { data: residentData, error: residentError, loading: residentLoading } = useQuery(GET_ALL_RESIDENTS); + const { data: residentData } = useQuery(GET_ALL_RESIDENTS); - // Local state for storing task counts and loading states - const [taskCounts, setTaskCounts] = useState<{ [key: number]: { assignedTasks: number; pendingTasks: number } }>({}); + const { data: pending } = useQuery(GET_TASKS_BY_STATUS, { + variables: { status: "PENDING_APPROVAL" }, + }); - const useFetchTasksForResident = (assigneeId: number) => { - const { data, loading, error } = useQuery(GET_TASKS_BY_ASSIGNEE_ID, { - variables: { assigneeId }, - skip: !assigneeId, // Skip if no assigneeId - }); - - // Handle loading and error states - if (loading) return { assignedTasks: 0, pendingTasks: 0, loading: true }; - if (error) return { assignedTasks: 0, pendingTasks: 0, error: error.message }; - - // Return the task count data (you can expand this logic as needed) - const assignedTasks = data?.getTasksByAssigneeId?.filter((task) => task.status === Status.PENDING_APPROVAL).length || 0; - const pendingTasks = 0; // Placeholder for pending tasks logic - + 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 }; }; - // Fetch task counts for all residents - useEffect(() => { - if (residentData?.getAllResidents) { - const newTaskCounts: { [key: number]: { assignedTasks: number; pendingTasks: number } } = {}; - let tasksFetched = 0; - let totalResidents = residentData.getAllResidents.length; - - // We can map over residents and use the hook directly for each one - residentData.getAllResidents.forEach((resident: { userId: number }) => { - const { assignedTasks, pendingTasks, loading, error } = useFetchTasksForResident(resident.userId); - - // Check if data is loading - if (loading) { - newTaskCounts[resident.userId] = { assignedTasks: 0, pendingTasks: 0 }; // Default placeholder - } else if (error) { - newTaskCounts[resident.userId] = { assignedTasks: 0, pendingTasks: 0 }; // Handle error - } else { - newTaskCounts[resident.userId] = { assignedTasks, pendingTasks }; // Set fetched task data - } - - tasksFetched++; - - // Once all residents' tasks are fetched, set the task counts - if (tasksFetched === totalResidents) { - setTaskCounts(newTaskCounts); - } - }); - } - }, [residentData]); // Trigger effect when residentData changes - return ( { width="100%" > {residentData?.getAllResidents?.map((room: { roomNumber: string; residentId: number; userId: number }) => { - const taskData = taskCounts[room.userId] || { assignedTasks: 0, pendingTasks: 0 }; + const { assignedTasks, pendingTasks } = fetchTasksForResident(room.userId); return ( ); })} From fa6a36ffb66d64c0269c8d7f8cf4f7c0c2e5938c Mon Sep 17 00:00:00 2001 From: karthikbselva Date: Thu, 21 Nov 2024 21:33:37 -0500 Subject: [PATCH 4/5] Used the Get_Active_Residents query --- frontend/src/components/pages/home/RoomGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/pages/home/RoomGrid.tsx b/frontend/src/components/pages/home/RoomGrid.tsx index 92396774..34f80124 100644 --- a/frontend/src/components/pages/home/RoomGrid.tsx +++ b/frontend/src/components/pages/home/RoomGrid.tsx @@ -2,11 +2,11 @@ import React, { useEffect, useState } from "react"; import { Flex, Grid } from "@chakra-ui/react"; import { useQuery } from "@apollo/client"; import RoomCard from "./HomeRoomCard"; -import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; +import { GET_ACTIVE_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries"; import { GET_TASKS_BY_STATUS } from "../../../APIClients/Queries/TaskQueries"; const RoomGrid = () => { - const { data: residentData } = useQuery(GET_ALL_RESIDENTS); + const { data: residentData } = useQuery(GET_ACTIVE_RESIDENTS); const { data: pending } = useQuery(GET_TASKS_BY_STATUS, { variables: { status: "PENDING_APPROVAL" }, From 19b906a11c1a6265e2f5dc942012e68809207569 Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Wed, 4 Dec 2024 00:19:52 -0500 Subject: [PATCH 5/5] Merge branch 'dev' into karthik-cindy/home-page --- .../components/pages/home/HomeRoomCard.tsx | 7 +++- .../src/components/pages/home/RoomGrid.tsx | 42 ++++++++++++------- 2 files changed, 34 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/pages/home/HomeRoomCard.tsx b/frontend/src/components/pages/home/HomeRoomCard.tsx index b8830960..19cd933e 100644 --- a/frontend/src/components/pages/home/HomeRoomCard.tsx +++ b/frontend/src/components/pages/home/HomeRoomCard.tsx @@ -10,7 +10,12 @@ type Props = { assignedTasks: number; }; -const RoomCard = ({ room, residentId, pendingTasks, assignedTasks }: Props): React.ReactElement => { +const RoomCard = ({ + room, + residentId, + pendingTasks, + assignedTasks, +}: Props): React.ReactElement => { return ( { }); 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; + 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 }; }; @@ -33,19 +39,27 @@ const RoomGrid = () => { gap="20px" width="100%" > - {residentData?.getAllResidents?.map((room: { roomNumber: string; residentId: number; userId: number }) => { - const { assignedTasks, pendingTasks } = fetchTasksForResident(room.userId); + {residentData?.getAllResidents?.map( + (room: { + roomNumber: string; + residentId: number; + userId: number; + }) => { + const { assignedTasks, pendingTasks } = fetchTasksForResident( + room.userId, + ); - return ( - - ); - })} + return ( + + ); + }, + )} );