From 92f7f2e8a1ee65a43573cc89f0b59e2321b65222 Mon Sep 17 00:00:00 2001 From: KathleenX7 Date: Sat, 5 Oct 2024 11:15:27 -0400 Subject: [PATCH 1/3] Resident Mutations --- .../Mutations/ResidentsMutations.ts | 67 +++++++++++++++++++ .../src/APIClients/Types/ResidentsType.ts | 51 ++++++++++++++ .../pages/residents/ResidentsPage.tsx | 67 +++++++++++++++++++ 3 files changed, 185 insertions(+) create mode 100644 frontend/src/APIClients/Mutations/ResidentsMutations.ts create mode 100644 frontend/src/APIClients/Types/ResidentsType.ts diff --git a/frontend/src/APIClients/Mutations/ResidentsMutations.ts b/frontend/src/APIClients/Mutations/ResidentsMutations.ts new file mode 100644 index 00000000..330cc81b --- /dev/null +++ b/frontend/src/APIClients/Mutations/ResidentsMutations.ts @@ -0,0 +1,67 @@ +import { gql } from "@apollo/client"; + +export const ADD_RESIDENT = gql` + mutation AddResident($resident: CreateResidentDTO!) { + addResident(resident: $resident) { + userId + residentId + email + phoneNumber + firstName + lastName + displayName + profilePictureURL + isActive + birthDate + roomNumber + credits + dateJoined + dateLeft + notes + } + } +`; + +export const UPDATE_RESIDENT = gql` + mutation UpdateResident($userId: ID!, $resident: UpdateResidentDTO!) { + updateResident(userId: $userId, resident: $resident) { + userId + residentId + email + phoneNumber + firstName + lastName + displayName + profilePictureURL + isActive + birthDate + roomNumber + credits + dateJoined + dateLeft + notes + } + } +`; + +export const DELETE_RESIDENT = gql` + mutation DeleteResident($userId: ID!) { + deleteResident(userId: $userId) { + userId + residentId + email + phoneNumber + firstName + lastName + displayName + profilePictureURL + isActive + birthDate + roomNumber + credits + dateJoined + dateLeft + notes + } + } +`; diff --git a/frontend/src/APIClients/Types/ResidentsType.ts b/frontend/src/APIClients/Types/ResidentsType.ts new file mode 100644 index 00000000..79b2a8b3 --- /dev/null +++ b/frontend/src/APIClients/Types/ResidentsType.ts @@ -0,0 +1,51 @@ +export type UserResponse = { + userId: number; + residentId: number; + email: string; + phoneNumber?: string; + firstName: string; + lastName: string; + displayName?: string; + profilePictureURL?: string; + isActive: boolean; + birthDate: string; + roomNumber: number; + credits: number; + dateJoined: string; + dateLeft?: Date; + notes?: string; +}; + +export type UserRequest = { + email: string; + password: string; + phoneNumber?: string; + firstName: string; + lastName: string; + displayName?: string; + profilePictureURL?: string; + residentId: number; + birthDate: string; + roomNumber: number; + credits: number; + dateJoined: string; + dateLeft?: Date; + notes?: string; +}; + +export type UserRequestUpdate = { + email?: string; + password?: string; + phoneNumber?: string; + firstName?: string; + lastName?: string; + displayName?: string; + profilePictureURL?: string; + residentId?: number; + birthDate?: string; + roomNumber?: number; + credits?: number; + dateJoined?: string; + dateLeft?: Date; + notes?: string; +}; diff --git a/frontend/src/components/pages/residents/ResidentsPage.tsx b/frontend/src/components/pages/residents/ResidentsPage.tsx index 992212ef..acce233d 100644 --- a/frontend/src/components/pages/residents/ResidentsPage.tsx +++ b/frontend/src/components/pages/residents/ResidentsPage.tsx @@ -8,6 +8,17 @@ import { InputLeftElement, } from "@chakra-ui/react"; import { Add, Search } from "@mui/icons-material"; +import { useMutation } from "@apollo/client"; +import { + ADD_RESIDENT, + UPDATE_RESIDENT, + DELETE_RESIDENT, +} from "../../../APIClients/Mutations/ResidentsMutations"; +import { + UserResponse, + UserRequest, + UserRequestUpdate, +} from "../../../APIClients/Types/ResidentsType"; import CommonTable, { ColumnInfoTypes, @@ -41,6 +52,62 @@ const ResidentsPage = (): React.ReactElement => { const [isModalOpen, setIsModalOpen] = useState("none"); const [residentEditInfo, setEditInfo] = useState(); + const [addResident] = useMutation<{ addResident: UserResponse }>( + ADD_RESIDENT, + ); + + const [updateResident] = useMutation<{ + userId: number; + resident: UserResponse; + }>(UPDATE_RESIDENT); + + const [deleteResident] = useMutation<{ userId: number }>(DELETE_RESIDENT); + + // const handleAddResident = async () => { + // try { + // const date = new Date(); + // const formattedDate = date.toISOString().split("T")[0]; + + // const resident: UserRequest = { + // email: "dasfhsahfsoad@gmail.com", + // password: "qe8e9r789ewr", + // firstName: "Bob", + // lastName: "Bob", + // residentId: 1248120, + // birthDate: formattedDate, + // roomNumber: 3, + // credits: 500, + // dateJoined: formattedDate, + // }; + // await addResident({ variables: { resident } }); + // } catch (e) { + // console.log(e); + // } + // }; + + // const handleUpdateResident = async () => { + // try { + // const userId = 5; + // const resident: UserRequestUpdate = { + // lastName: "NEW NAME", + // roomNumber: 3, + // credits: 10, + // }; + // await updateResident({ variables: { userId, resident } }); + // } catch (e) { + // console.log(e); + // } + // }; + + // const handleDeleteResident = async () => { + // try { + // const userId = 1; + // await deleteResident({ variables: { userId } }); + // } catch (e) { + // console.log(e); + // } + // }; + useEffect(() => { // TODO: Fetch residents from API setResidents(residentsMockData); From 0747642b25c6416a559b731222f33a03fa70acca Mon Sep 17 00:00:00 2001 From: KathleenX7 Date: Sat, 5 Oct 2024 11:57:06 -0400 Subject: [PATCH 2/3] Resident Query --- .../APIClients/Queries/ResidentsQueries.ts | 67 ++++++++++++++++++ .../pages/residents/ResidentsPage.tsx | 69 ++++++++++++++++--- 2 files changed, 125 insertions(+), 11 deletions(-) create mode 100644 frontend/src/APIClients/Queries/ResidentsQueries.ts diff --git a/frontend/src/APIClients/Queries/ResidentsQueries.ts b/frontend/src/APIClients/Queries/ResidentsQueries.ts new file mode 100644 index 00000000..685c4bd8 --- /dev/null +++ b/frontend/src/APIClients/Queries/ResidentsQueries.ts @@ -0,0 +1,67 @@ +import { gql } from "@apollo/client"; + +export const GET_RESIDENTS_BY_ID = gql` + query GetResidentsByIds($userIds: [ID!]) { + getResidentsByIds(userIds: $userIds) { + userId + residentId + email + phoneNumber + firstName + lastName + displayName + profilePictureURL + isActive + birthDate + roomNumber + credits + dateJoined + dateLeft + notes + } + } +`; + +export const GET_ALL_RESIDENTS = gql` + query GetAllResidents { + getAllResidents { + userId + residentId + email + phoneNumber + firstName + lastName + displayName + profilePictureURL + isActive + birthDate + roomNumber + credits + dateJoined + dateLeft + notes + } + } +`; + +export const GET_ACTIVE_RESIDENTS = gql` + query GetActiveResidents { + getActiveResidents { + userId + residentId + email + phoneNumber + firstName + lastName + displayName + profilePictureURL + isActive + birthDate + roomNumber + credits + dateJoined + dateLeft + notes + } + } +`; diff --git a/frontend/src/components/pages/residents/ResidentsPage.tsx b/frontend/src/components/pages/residents/ResidentsPage.tsx index acce233d..b68d3a04 100644 --- a/frontend/src/components/pages/residents/ResidentsPage.tsx +++ b/frontend/src/components/pages/residents/ResidentsPage.tsx @@ -8,12 +8,19 @@ import { InputLeftElement, } from "@chakra-ui/react"; import { Add, Search } from "@mui/icons-material"; -import { useMutation } from "@apollo/client"; +import { useMutation, useQuery } from "@apollo/client"; import { ADD_RESIDENT, UPDATE_RESIDENT, DELETE_RESIDENT, } from "../../../APIClients/Mutations/ResidentsMutations"; + +import { + GET_RESIDENTS_BY_ID, + GET_ALL_RESIDENTS, + GET_ACTIVE_RESIDENTS, +} from "../../../APIClients/Queries/ResidentsQueries"; + import { UserResponse, UserRequest, @@ -52,16 +59,16 @@ const ResidentsPage = (): React.ReactElement => { const [isModalOpen, setIsModalOpen] = useState("none"); const [residentEditInfo, setEditInfo] = useState(); - const [addResident] = useMutation<{ addResident: UserResponse }>( - ADD_RESIDENT, - ); + // const [addResident] = useMutation<{ addResident: UserResponse }>( + // ADD_RESIDENT, + // ); - const [updateResident] = useMutation<{ - userId: number; - resident: UserResponse; - }>(UPDATE_RESIDENT); + // const [updateResident] = useMutation<{ + // userId: number; + // resident: UserResponse; + // }>(UPDATE_RESIDENT); - const [deleteResident] = useMutation<{ userId: number }>(DELETE_RESIDENT); + // const [deleteResident] = useMutation<{ userId: number }>(DELETE_RESIDENT); // const handleAddResident = async () => { // try { @@ -108,6 +115,35 @@ const ResidentsPage = (): React.ReactElement => { // } // }; + // const ids = [4]; + // const { + // loading: residentIdLoading, + // error: residentIdError, + // data: residentIdData, + // } = useQuery<{ userIds: [number] }>(GET_RESIDENTS_BY_ID, { + // variables: { userIds: ids }, + // }); + + // const { + // loading: residentActiveLoading, + // error: residentActiveError, + // data: residentActiveData, + // } = useQuery(GET_ACTIVE_RESIDENTS); + + const { + loading: residentAllLoading, + error: residentAllError, + data: residentAllData, + } = useQuery(GET_ALL_RESIDENTS); + + const allResidents = React.useMemo(() => { + return residentAllData; + }, [residentAllData]); + + const printAllResidents = () => { + console.log(allResidents); + }; + useEffect(() => { // TODO: Fetch residents from API setResidents(residentsMockData); @@ -144,11 +180,22 @@ const ResidentsPage = (): React.ReactElement => { { + return { + roomNumber: item.roomNumber, + arrivalDate: item.dateJoined, + departureDate: item.dateLeft ? item.dateLeft : "", + residentId: item.residentId, + password: "1231874", + }; + }) + : residents + } columnInfo={columnTypes} onEdit={handleResidentEdit} /> - setIsModalOpen("none")} From 5715ba99c8d83d8da43b7f3c878f37cead19bc17 Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Sat, 19 Oct 2024 03:18:19 -0400 Subject: [PATCH 3/3] Fix: commented out code & updated setting resident data --- .../pages/residents/ResidentsPage.tsx | 69 ++++++++----------- 1 file changed, 29 insertions(+), 40 deletions(-) diff --git a/frontend/src/components/pages/residents/ResidentsPage.tsx b/frontend/src/components/pages/residents/ResidentsPage.tsx index b68d3a04..6b76042d 100644 --- a/frontend/src/components/pages/residents/ResidentsPage.tsx +++ b/frontend/src/components/pages/residents/ResidentsPage.tsx @@ -8,24 +8,24 @@ import { InputLeftElement, } from "@chakra-ui/react"; import { Add, Search } from "@mui/icons-material"; -import { useMutation, useQuery } from "@apollo/client"; -import { - ADD_RESIDENT, - UPDATE_RESIDENT, - DELETE_RESIDENT, -} from "../../../APIClients/Mutations/ResidentsMutations"; +import { useQuery } from "@apollo/client"; +// import { +// ADD_RESIDENT, +// UPDATE_RESIDENT, +// DELETE_RESIDENT, +// } from "../../../APIClients/Mutations/ResidentsMutations"; import { - GET_RESIDENTS_BY_ID, + // GET_RESIDENTS_BY_ID, GET_ALL_RESIDENTS, - GET_ACTIVE_RESIDENTS, + // GET_ACTIVE_RESIDENTS, } from "../../../APIClients/Queries/ResidentsQueries"; -import { - UserResponse, - UserRequest, - UserRequestUpdate, -} from "../../../APIClients/Types/ResidentsType"; +// import { +// UserResponse, +// UserRequest, +// UserRequestUpdate, +// } from "../../../APIClients/Types/ResidentsType"; import CommonTable, { ColumnInfoTypes, @@ -33,7 +33,7 @@ import CommonTable, { } from "../../common/CommonTable"; import ResidentModal from "./ResidentModal"; import ResidentEditModal, { ResidentEditInfo } from "./ResidentEditModal"; -import { residentsMockData } from "../../../mocks/residents"; +// import { residentsMockData } from "../../../mocks/residents"; const columnTypes: ColumnInfoTypes[] = [ { @@ -131,23 +131,16 @@ const ResidentsPage = (): React.ReactElement => { // } = useQuery(GET_ACTIVE_RESIDENTS); const { - loading: residentAllLoading, - error: residentAllError, + // loading: residentAllLoading, MAY NEED TO ADD LOADING ICON/STATE + // error: residentAllError, data: residentAllData, } = useQuery(GET_ALL_RESIDENTS); - const allResidents = React.useMemo(() => { - return residentAllData; - }, [residentAllData]); - - const printAllResidents = () => { - console.log(allResidents); - }; - useEffect(() => { - // TODO: Fetch residents from API - setResidents(residentsMockData); - }, []); + if (residentAllData?.getAllResidents) { + setResidents(residentAllData.getAllResidents); + } + }, [residentAllData]); const handleResidentEdit = (row: any) => { setIsModalOpen("edit"); @@ -180,19 +173,15 @@ const ResidentsPage = (): React.ReactElement => { { - return { - roomNumber: item.roomNumber, - arrivalDate: item.dateJoined, - departureDate: item.dateLeft ? item.dateLeft : "", - residentId: item.residentId, - password: "1231874", - }; - }) - : residents - } + data={residents.map((item: TableData) => { + return { + roomNumber: item.roomNumber, + arrivalDate: item.dateJoined, + departureDate: item.dateLeft ? item.dateLeft : "", + residentId: item.residentId, + password: "1231874", + }; + })} columnInfo={columnTypes} onEdit={handleResidentEdit} />