Fixing routes and merging prs

frontend/src/App.tsx

@@ -92,7 +92,7 @@ const App = (): React.ReactElement => {
                   path={Routes.ANNOUNCEMENTS_PAGE}
                   element={
                     <PrivateRoute>
-                      <HomePage />
+                      <AnnouncementsPage />
                     </PrivateRoute>
                   }
                 />
@@ -113,7 +113,7 @@ const App = (): React.ReactElement => {
                   }
                 />
                 <Route
-                  path={Routes.RESIDENTS_PAGE}
+                  path={Routes.PARTICIPANTS_PAGE}
                   element={
                     <PrivateRoute>
                       <ResidentsPage />

frontend/src/components/common/SideBar.tsx

@@ -6,10 +6,10 @@
   Tab,
   Box,
   Button,
   Avatar,
   Text,
   Flex,
   Heading,
   useBreakpointValue,
 } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
@@ -76,10 +76,10 @@
   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 },
   ];

frontend/src/components/pages/announcements/AnnouncementsGroups.tsx

@@ -62,7 +62,10 @@
   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 (
     <Box
@@ -93,14 +96,22 @@
         </Box>
         <Flex flexDir="column" w="100%">
           <Flex justifyContent="space-between">
-            <Text as="b" color={isDraft ? 'gray.500' : 'black'}>{formatRooms(rooms)}</Text>
+            <Text as="b" color={isDraft ? "gray.500" : "black"}>
+              {formatRooms(rooms)}
+            </Text>
             <Text margin="0" color="gray.500">
-              {firstAnnouncement? moment(firstAnnouncement.createdAt).fromNow(): moment(Date.now()).fromNow()}
+              {firstAnnouncement
+                ? moment(firstAnnouncement.createdAt).fromNow()
+                : moment(Date.now()).fromNow()}
             </Text>
           </Flex>
-
-          <Text marginBottom="0" marginTop="4px">{truncateMessage(firstAnnouncement? firstAnnouncement.message: "", 60)}</Text>
-
+
+          <Text marginBottom="0" marginTop="4px">
+            {truncateMessage(
+              firstAnnouncement ? firstAnnouncement.message : "",
+              60,
+            )}
+          </Text>
         </Flex>
       </Flex>
     </Box>
@@ -113,12 +124,20 @@
   addingNewRoom: boolean;
   setAddingNewRoom: React.Dispatch<React.SetStateAction<boolean>>;
   selectedRooms: number[];
-}> = ({ announcements, setSelectedGroup, addingNewRoom, setAddingNewRoom, selectedRooms}) => {
+}> = ({
+  announcements,
+  setSelectedGroup,
+  addingNewRoom,
+  setAddingNewRoom,
+  selectedRooms,
+}) => {
+  const [searchRooms, setSearchRooms] = useState<number[]>([]);
+  const [allRooms, setAllRooms] = useState([1, 2, 3, 4, 5, 6]);
   const [processedAnnouncements, setProcessedAnnouncements] =
     useState<ProcessedGroupAnnouncements>();
 
   const [searchRooms, setSearchRooms] = useState<number[]>([]);
   const [allRooms, setAllRooms] = useState([1, 2, 3, 4, 5, 6]);
 
   useEffect(() => {
     const processedData: ProcessedGroupAnnouncements = {
@@ -140,27 +159,46 @@
         processedData.groups[key] = announcementData;
       }
     });
-    
+
     setProcessedAnnouncements(processedData);
   }, [announcements]);
 
   const renderGroupTabs = (announcementsGroup: GroupAnnouncements) => {
     return (
       announcementsGroup &&
-      Object.keys(announcementsGroup).filter((roomKey) =>
-            !searchRooms ||
-            searchRooms.length === 0 ||
-            searchRooms.some((room) =>
-              roomKey.split(",").map(Number).includes(room),
-            ),
-        ).map((roomKey) => (
+      [
+        addingNewRoom ? (
           <GroupTab
-            key={roomKey}
-            roomKey={roomKey}
-            firstAnnouncement={announcementsGroup[roomKey][0]}
+            key={null}
+            roomKey="0"
+            firstAnnouncement={null}
             setSelectedGroup={setSelectedGroup}
+            selectedRooms={selectedRooms}
+            isDraft
           />
-        ))
+        ) : (
+          <></>
+        ),
+      ].concat(
+        Object.keys(announcementsGroup)
+          .filter(
+            (roomKey) =>
+              !searchRooms ||
+              searchRooms.length === 0 ||
+              searchRooms.some((room) =>
+                roomKey.split(",").map(Number).includes(room),
+              ),
+          )
+          .map((roomKey) => (
+            <GroupTab
+              key={roomKey}
+              roomKey={roomKey}
+              isDraft={false}
+              firstAnnouncement={announcementsGroup[roomKey][0]}
+              setSelectedGroup={setSelectedGroup}
+            />
+          )),
+      )
     );
   };
 
@@ -178,6 +216,10 @@
       setSearchRooms([...searchRooms, roomId]);
     }
   };
+
+  const addRoom = () => {
+    setAddingNewRoom(true);
+  };
 
   return (
     <Box h="100vh" w="100%" borderRight="solid" borderRightColor="gray.300">

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<GroupAnnouncements>({});
   const [selectedGroup, setSelectedGroup] = useState<string>("");
+  const [addingNewRoom, setAddingNewRoom] = useState<boolean>(false);
+  const [selectedRooms, setSelectedRooms] = useState<number[]>([]);
 
   useEffect(() => {
     // TODO: Fetch announcements from API
@@ -41,14 +42,21 @@ const AnnouncementsPage = (): React.ReactElement => {
         <AnnouncementsGroups
           announcements={announcements}
           setSelectedGroup={setSelectedGroup}
+          addingNewRoom={addingNewRoom}
+          setAddingNewRoom={setAddingNewRoom}
+          selectedRooms={selectedRooms}
         />
         <AnnouncementsView
           announcements={announcements}
           selectedGroup={selectedGroup}
+          addingNewRoom={addingNewRoom}
+          setAddingNewRoom={setAddingNewRoom}
+          selectedRooms={selectedRooms}
+          setSelectedRooms={setSelectedRooms}
         />
       </Flex>
     </Flex>
   );
 };
 
-export default AnnouncementsPage;
+export default AnnouncementsPage;

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 (
     <Box>
       {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 <Flex fontSize="16px">
-        <HStack spacing={4}>
-          {selectedRooms.map((room) => (
-            <Tag key={room} variant='solid' height="30px" color='#57469D' border='1px solid #57469D' backgroundColor='#F9F7FF'>
-              <TagLabel textAlign="center"> Room {room}</TagLabel>
-              <TagCloseButton onClick = {() => deleteRoomSelected(room)} color='#57469D'/>
-            </Tag>
-          ))}
-          <Menu>
-            <MenuButton>
-              <AddCircleOutlineOutlinedIcon sx={{color: "#57469D"}}/>
-            </MenuButton>
-            <MenuList maxH="40vh" overflow="auto">
-              {allRooms.filter(room => !selectedRooms.includes(room)).map((room) => (
-                <MenuItem onClick={()=>addRoomToNewRoom(room)} key={room}>Room {room}</MenuItem>
-              ))}
-            </MenuList>
-          </Menu>
-        </HStack>
-      </Flex>
+    if (addingNewRoom && selectedGroup === "0") {
+      return (
+        <Flex fontSize="16px">
+          <HStack spacing={4}>
+            {selectedRooms.map((room) => (
+              <Tag
+                key={room}
+                variant="solid"
+                height="30px"
+                color="#57469D"
+                border="1px solid #57469D"
+                backgroundColor="#F9F7FF"
+              >
+                <TagLabel textAlign="center"> Room {room}</TagLabel>
+                <TagCloseButton
+                  onClick={() => deleteRoomSelected(room)}
+                  color="#57469D"
+                />
+              </Tag>
+            ))}
+            <Menu>
+              <MenuButton>
+                <AddCircleOutlineOutlinedIcon sx={{ color: "#57469D" }} />
+              </MenuButton>
+              <MenuList maxH="40vh" overflow="auto">
+                {allRooms
+                  .filter((room) => !selectedRooms.includes(room))
+                  .map((room) => (
+                    <MenuItem onClick={() => addRoomToNewRoom(room)} key={room}>
+                      Room {room}
+                    </MenuItem>
+                  ))}
+              </MenuList>
+            </Menu>
+          </HStack>
+        </Flex>
+      );
     }
     return "All Rooms";
   };
@@ -183,7 +199,9 @@ const AnnouncementsView = ({
           h="10vh"
         >
           <h1 style={{ fontSize: "24px", margin: "0" }}>
-            {selectedGroup === "" || selectedGroup === "0" ? formatHeader(rooms) : formatRooms(rooms)}
+            {selectedGroup === "" || selectedGroup === "0"
+              ? formatHeader(rooms)
+              : formatRooms(rooms)}
           </h1>
           <IconButton
             aria-label="info"
@@ -196,10 +214,12 @@ const AnnouncementsView = ({
           </IconButton>
         </Box>
         <Box flex={1} h="100vh" overflowY="scroll">
-          {selectedGroup !== "0" && <AnnouncementsList
-            announcements={announcements}
-            selectedGroup={selectedGroup}
-          />}
+          {selectedGroup !== "0" && (
+            <AnnouncementsList
+              announcements={announcements}
+              selectedGroup={selectedGroup}
+            />
+          )}
         </Box>
         <Box p="27px 39px">
           <MessageInput handlePost={handlePost} />

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";