From 345ea5279adda26ea64c60f61c98d05151c22e03 Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Sat, 21 Sep 2024 02:21:18 -0400 Subject: [PATCH 1/2] fixed routing --- frontend/src/App.tsx | 4 +- frontend/src/components/common/SideBar.tsx | 6 +- .../announcements/AnnouncementsGroups.tsx | 79 ++++++++++------ .../pages/announcements/AnnouncementsPage.tsx | 12 ++- .../pages/announcements/AnnouncementsView.tsx | 94 +++++++++++-------- frontend/src/constants/Routes.ts | 2 +- 6 files changed, 125 insertions(+), 72 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 76bc67ed..a77fe7fc 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -92,7 +92,7 @@ const App = (): React.ReactElement => { path={Routes.ANNOUNCEMENTS_PAGE} element={ - + } /> @@ -113,7 +113,7 @@ const App = (): React.ReactElement => { } /> diff --git a/frontend/src/components/common/SideBar.tsx b/frontend/src/components/common/SideBar.tsx index 37615f18..397f7150 100644 --- a/frontend/src/components/common/SideBar.tsx +++ b/frontend/src/components/common/SideBar.tsx @@ -76,10 +76,10 @@ const SideBar: React.FC = () => { const pages = [ { label: "Home", route: Routes.HOME_PAGE }, { label: "Tasks", route: Routes.TASKS_PAGE }, - { label: "Approvals", route: Routes.APPROVALS_PAGE }, + // { label: "Approvals", route: Routes.APPROVALS_PAGE }, { label: "Schedule", route: Routes.SCHEDULE_PAGE }, - { label: "Announcements", route: Routes.HOME_PAGE }, // NEED NEW NAME - { label: "Participants", route: Routes.RESIDENTS_PAGE }, // RESIDENTS/PARTICIPANTS + { label: "Announcements", route: Routes.ANNOUNCEMENTS_PAGE }, + { label: "Participants", route: Routes.PARTICIPANTS_PAGE }, // RESIDENTS/PARTICIPANTS { label: "Task List", route: Routes.TASKS_PAGE }, // { label: "Insights", route: Routes.INSIGHTS_PAGE }, ]; diff --git a/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx b/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx index afad6ab9..bf38353f 100644 --- a/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx +++ b/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx @@ -57,7 +57,10 @@ const GroupTab = ({ isDraft: boolean; selectedRooms?: number[] | null; }) => { - const rooms = (selectedRooms && selectedRooms.length > 0)? selectedRooms: roomKey.split(",").map(Number); + const rooms = + selectedRooms && selectedRooms.length > 0 + ? selectedRooms + : roomKey.split(",").map(Number); return ( - {formatRooms(rooms)} + + {formatRooms(rooms)} + - {firstAnnouncement? moment(firstAnnouncement.createdAt).fromNow(): moment(Date.now()).fromNow()} + {firstAnnouncement + ? moment(firstAnnouncement.createdAt).fromNow() + : moment(Date.now()).fromNow()} - - {truncateMessage(firstAnnouncement? firstAnnouncement.message: "", 60)} - + + + {truncateMessage( + firstAnnouncement ? firstAnnouncement.message : "", + 60, + )} + @@ -108,7 +119,13 @@ const GroupList: React.FC<{ addingNewRoom: boolean; setAddingNewRoom: React.Dispatch>; selectedRooms: number[]; -}> = ({ announcements, setSelectedGroup, addingNewRoom, setAddingNewRoom, selectedRooms}) => { +}> = ({ + announcements, + setSelectedGroup, + addingNewRoom, + setAddingNewRoom, + selectedRooms, +}) => { const [processedAnnouncements, setProcessedAnnouncements] = useState(); useEffect(() => { @@ -131,37 +148,45 @@ const GroupList: React.FC<{ processedData.groups[key] = announcementData; } }); - + setProcessedAnnouncements(processedData); }, [announcements]); const renderGroupTabs = (announcementsGroup: GroupAnnouncements) => { return ( announcementsGroup && - [addingNewRoom? - : <>].concat( - Object.keys(announcementsGroup).map((roomKey) => ( - - ))) + [ + addingNewRoom ? ( + + ) : ( + <> + ), + ].concat( + Object.keys(announcementsGroup).map((roomKey) => ( + + )), + ) ); }; const addRoom = () => { setAddingNewRoom(true); - } + }; return ( diff --git a/frontend/src/components/pages/announcements/AnnouncementsPage.tsx b/frontend/src/components/pages/announcements/AnnouncementsPage.tsx index 9df5f401..6e762e41 100644 --- a/frontend/src/components/pages/announcements/AnnouncementsPage.tsx +++ b/frontend/src/components/pages/announcements/AnnouncementsPage.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; import { Flex } from "@chakra-ui/react"; - import { GroupAnnouncements, Announcement, @@ -12,6 +11,8 @@ import { announcementsMockData } from "../../../mocks/notifications"; const AnnouncementsPage = (): React.ReactElement => { const [announcements, setAnnouncements] = useState({}); const [selectedGroup, setSelectedGroup] = useState(""); + const [addingNewRoom, setAddingNewRoom] = useState(false); + const [selectedRooms, setSelectedRooms] = useState([]); useEffect(() => { // TODO: Fetch announcements from API @@ -41,14 +42,21 @@ const AnnouncementsPage = (): React.ReactElement => { ); }; -export default AnnouncementsPage; \ No newline at end of file +export default AnnouncementsPage; diff --git a/frontend/src/components/pages/announcements/AnnouncementsView.tsx b/frontend/src/components/pages/announcements/AnnouncementsView.tsx index 748813d7..06ad2f32 100644 --- a/frontend/src/components/pages/announcements/AnnouncementsView.tsx +++ b/frontend/src/components/pages/announcements/AnnouncementsView.tsx @@ -18,7 +18,7 @@ import { TagLabel, TagCloseButton, } from "@chakra-ui/react"; -import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined'; +import AddCircleOutlineOutlinedIcon from "@mui/icons-material/AddCircleOutlineOutlined"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import { GroupAnnouncements } from "../../../types/NotificationTypes"; @@ -80,7 +80,7 @@ const AnnouncementsList = ({ announcements, selectedGroup }: PropsList) => { if (selectedGroup.length === 0) { return null; } - + return ( {announcements[selectedGroup].map((announcement, index) => ( @@ -120,52 +120,68 @@ const AnnouncementsView = ({ addingNewRoom, setAddingNewRoom, selectedRooms, - setSelectedRooms + setSelectedRooms, }: Props): React.ReactElement => { const rooms = selectedGroup.split(",").map(Number); - const [allRooms, setAllRooms] = useState([1,2,3,4,5,6]); + const [allRooms, setAllRooms] = useState([1, 2, 3, 4, 5, 6]); const addRoomToNewRoom = (roomId: number) => { - if(!selectedRooms.includes(roomId)) { + if (!selectedRooms.includes(roomId)) { setSelectedRooms([...selectedRooms, roomId]); } - } + }; const deleteRoomSelected = (roomId: number) => { - if(selectedRooms.includes(roomId)) { - setSelectedRooms(selectedRooms.filter(room => room !== roomId)); + if (selectedRooms.includes(roomId)) { + setSelectedRooms(selectedRooms.filter((room) => room !== roomId)); } - } + }; const handlePost = (message: string) => { - if(addingNewRoom && selectedRooms.length > 0) { + if (addingNewRoom && selectedRooms.length > 0) { setSelectedRooms([]); setAddingNewRoom(false); } - } + }; const formatHeader = (roomIDs: number[]) => { - if(addingNewRoom && selectedGroup === "0"){ - return - - {selectedRooms.map((room) => ( - - Room {room} - deleteRoomSelected(room)} color='#57469D'/> - - ))} - - - - - - {allRooms.filter(room => !selectedRooms.includes(room)).map((room) => ( - addRoomToNewRoom(room)} key={room}>Room {room} - ))} - - - - + if (addingNewRoom && selectedGroup === "0") { + return ( + + + {selectedRooms.map((room) => ( + + Room {room} + deleteRoomSelected(room)} + color="#57469D" + /> + + ))} + + + + + + {allRooms + .filter((room) => !selectedRooms.includes(room)) + .map((room) => ( + addRoomToNewRoom(room)} key={room}> + Room {room} + + ))} + + + + + ); } return "All Rooms"; }; @@ -183,7 +199,9 @@ const AnnouncementsView = ({ h="10vh" >

- {selectedGroup === "" || selectedGroup === "0" ? formatHeader(rooms) : formatRooms(rooms)} + {selectedGroup === "" || selectedGroup === "0" + ? formatHeader(rooms) + : formatRooms(rooms)}

- {selectedGroup !== "0" && } + {selectedGroup !== "0" && ( + + )} diff --git a/frontend/src/constants/Routes.ts b/frontend/src/constants/Routes.ts index a7b3a65b..2261350f 100644 --- a/frontend/src/constants/Routes.ts +++ b/frontend/src/constants/Routes.ts @@ -12,6 +12,6 @@ export const TASKS_PAGE = "/tasks"; export const SCHEDULE_PAGE = "/schedule"; -export const RESIDENTS_PAGE = "/residents"; +export const PARTICIPANTS_PAGE = "/participants"; export const INSIGHTS_PAGE = "/insights"; From 29f128774131bec1a0ec3a742ca80f8d0de6794e Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Sat, 21 Sep 2024 02:41:19 -0400 Subject: [PATCH 2/2] fixed announcements page filter/searching --- .../announcements/AnnouncementsGroups.tsx | 107 +++++++++++++++--- 1 file changed, 91 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx b/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx index bf38353f..c490c57b 100644 --- a/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx +++ b/frontend/src/components/pages/announcements/AnnouncementsGroups.tsx @@ -14,6 +14,14 @@ import { TabPanel, IconButton, Text, + Menu, + MenuButton, + MenuList, + MenuItem, + Tag, + TagLabel, + TagCloseButton, + HStack, } from "@chakra-ui/react"; import { Search } from "@mui/icons-material"; import EditNoteIcon from "@mui/icons-material/EditNote"; @@ -126,6 +134,8 @@ const GroupList: React.FC<{ setAddingNewRoom, selectedRooms, }) => { + const [searchRooms, setSearchRooms] = useState([]); + const [allRooms, setAllRooms] = useState([1, 2, 3, 4, 5, 6]); const [processedAnnouncements, setProcessedAnnouncements] = useState(); useEffect(() => { @@ -169,21 +179,42 @@ const GroupList: React.FC<{ <> ), ].concat( - Object.keys(announcementsGroup).map((roomKey) => ( - - )), + Object.keys(announcementsGroup) + .filter( + (roomKey) => + !searchRooms || + searchRooms.length === 0 || + searchRooms.some((room) => + roomKey.split(",").map(Number).includes(room), + ), + ) + .map((roomKey) => ( + + )), ) ); }; + const deleteSearchRoom = ( + e: React.MouseEvent, + roomId: number, + ) => { + if (searchRooms.includes(roomId)) { + setSearchRooms(searchRooms.filter((room) => room !== roomId)); + } + }; + + const addRoomToSearch = (roomId: number) => { + if (!searchRooms.includes(roomId)) { + setSearchRooms([...searchRooms, roomId]); + } + }; const addRoom = () => { setAddingNewRoom(true); }; @@ -199,12 +230,56 @@ const GroupList: React.FC<{ mb={4} bg="purple.50" > - - + + + + + {allRooms + .filter((room) => !searchRooms.includes(room)) + .map((room) => ( + addRoomToSearch(room)} key={room}> + Room {room} + + ))} + + + + - - - + {searchRooms.map((room) => ( + + Room {room} + deleteSearchRoom(e, room)} + color="#57469D" + /> + + ))} + + } aria-label="Edit"