Develop frontend for creating announcements

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

@@ -34,7 +34,12 @@
 
 export const formatRooms = (roomIDs: number[]) => {
   // Map each room ID to its formatted string
-  const formattedRooms = roomIDs.map((id) => `Room ${id}`);
+  const formattedRooms = roomIDs.map((id) => {
+    if (id === 0) {
+      return "New Announcement";
+    }
+    return `Room ${id}`;
+  });
   // Join the formatted room strings with commas
   return formattedRooms.join(", ");
 };
@@ -43,12 +48,17 @@
   roomKey,
   firstAnnouncement,
   setSelectedGroup,
+  isDraft,
+  selectedRooms,
 }: {
   roomKey: string;
-  firstAnnouncement: Announcement;
+  firstAnnouncement: Announcement | null;
   setSelectedGroup: React.Dispatch<React.SetStateAction<string>>;
+  isDraft: boolean;
+  selectedRooms?: number[] | null;
 }) => {
-  const rooms = roomKey.split(",").map(Number);
+  const rooms = (selectedRooms && selectedRooms.length > 0)? selectedRooms: roomKey.split(",").map(Number);
+
   return (
     <Box
       onClick={() => setSelectedGroup(roomKey)}
@@ -58,7 +68,7 @@
       borderBottomColor="gray.300"
       _hover={{ bg: "purple.100", cursor: "pointer" }}
     >
-      <Flex alignItems="center">
+      <Flex alignItems="center" minH="93px">
         <Box
           borderRadius="full"
           border="1px solid"
@@ -76,14 +86,16 @@
             color="purple.main"
           />
         </Box>
-        <Flex flexDir="column">
-          <Flex justifyContent="space-between" alignItems="center" w="100%">
-            <Text as="b">{formatRooms(rooms)}</Text>
-            <Text color="gray.500">
-              {moment(firstAnnouncement.createdAt).fromNow()}
+        <Flex flexDir="column" w="100%">
+          <Flex justifyContent="space-between">
+            <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()}
             </Text>
           </Flex>
-          <Text>{truncateMessage(firstAnnouncement.message, 60)}</Text>
+
+          <Text marginBottom="0" marginTop="4px">{truncateMessage(firstAnnouncement? firstAnnouncement.message: "", 60)}</Text>
+
         </Flex>
       </Flex>
     </Box>
@@ -93,10 +105,12 @@
 const GroupList: React.FC<{
   announcements: GroupAnnouncements;
   setSelectedGroup: React.Dispatch<React.SetStateAction<string>>;
-}> = ({ announcements, setSelectedGroup }) => {
+  addingNewRoom: boolean;
+  setAddingNewRoom: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedRooms: number[];
+}> = ({ announcements, setSelectedGroup, addingNewRoom, setAddingNewRoom, selectedRooms}) => {
   const [processedAnnouncements, setProcessedAnnouncements] =
     useState<ProcessedGroupAnnouncements>();
-
   useEffect(() => {
     const processedData: ProcessedGroupAnnouncements = {
       all: {},
@@ -106,6 +120,7 @@
     Object.keys(announcements).forEach((key) => {
       const rooms = key.split(",").map((room) => parseInt(room.trim(), 10));
       const announcementData = announcements[key];
+
       if (rooms.length === 1) {
         // Add announcement to 'all' and 'private' if there is only 1 room
         processedData.all[key] = announcementData;
@@ -116,23 +131,38 @@
         processedData.groups[key] = announcementData;
       }
     });
+
     setProcessedAnnouncements(processedData);
   }, [announcements]);
 
   const renderGroupTabs = (announcementsGroup: GroupAnnouncements) => {
     return (
       announcementsGroup &&
+      [addingNewRoom? 
+        <GroupTab 
+          key={null}
+          roomKey="0"
+          firstAnnouncement={null}
+          setSelectedGroup={setSelectedGroup}
+          selectedRooms={selectedRooms}
+          isDraft
+        />: <></>].concat(
       Object.keys(announcementsGroup).map((roomKey) => (
         <GroupTab
           key={roomKey}
           roomKey={roomKey}
-          firstAnnouncement={announcementsGroup[roomKey][0]}
+          firstAnnouncement={roomKey===""? null: announcementsGroup[roomKey][0]}
           setSelectedGroup={setSelectedGroup}
+          isDraft={false}
         />
-      ))
+      )))
     );
   };
 
+  const addRoom = () => {
+    setAddingNewRoom(true);
+  }
+
   return (
     <Box h="100vh" w="100%" borderRight="solid" borderRightColor="gray.300">
       <Flex flexDir="column" bg="purple.50" w="100%">
@@ -159,6 +189,7 @@
             border="solid"
             borderColor="gray.200"
             mr={5}
+            onClick={addRoom}
           />
         </Flex>
 

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

@@ -9,6 +9,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
@@ -20,10 +22,17 @@ 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>
   );

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

@@ -9,7 +9,16 @@ import {
   Avatar,
   Heading,
   Input,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Tag,
+  HStack,
+  TagLabel,
+  TagCloseButton,
 } from "@chakra-ui/react";
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 import { GroupAnnouncements } from "../../../types/NotificationTypes";
@@ -56,13 +65,22 @@ const MessageInput = ({
 type Props = {
   announcements: GroupAnnouncements;
   selectedGroup: string;
+  addingNewRoom: boolean;
+  setAddingNewRoom: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedRooms: number[];
+  setSelectedRooms: React.Dispatch<React.SetStateAction<number[]>>;
 };
 
-const AnnouncementsList = ({ announcements, selectedGroup }: Props) => {
+type PropsList = {
+  announcements: GroupAnnouncements;
+  selectedGroup: string;
+};
+
+const AnnouncementsList = ({ announcements, selectedGroup }: PropsList) => {
   if (selectedGroup.length === 0) {
     return null;
   }
-
+  
   return (
     <Box>
       {announcements[selectedGroup].map((announcement, index) => (
@@ -98,8 +116,59 @@ const AnnouncementsList = ({ announcements, selectedGroup }: Props) => {
 const AnnouncementsView = ({
   announcements,
   selectedGroup,
+  addingNewRoom,
+  setAddingNewRoom,
+  selectedRooms,
+  setSelectedRooms
 }: Props): React.ReactElement => {
   const rooms = selectedGroup.split(",").map(Number);
+  const [allRooms, setAllRooms] = useState([1,2,3,4,5,6]);
+
+  const addRoomToNewRoom = (roomId: number) => {
+    if(!selectedRooms.includes(roomId)) {
+      setSelectedRooms([...selectedRooms, roomId]);
+    }
+  }
+
+  const deleteRoomSelected = (roomId: number) => {
+    if(selectedRooms.includes(roomId)) {
+      setSelectedRooms(selectedRooms.filter(room => room !== roomId));
+    }
+  }
+
+  const handlePost = (message: string) => {
+    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>
+    }
+    return "All Rooms";
+  };
+
   return (
     <Box h="100vh" w="100%">
       <Flex align="left" flexDir="column" h="100%">
@@ -110,9 +179,10 @@ const AnnouncementsView = ({
           display="flex"
           alignItems="center"
           justifyContent="space-between"
+          h="10vh"
         >
-          <h1 style={{ fontSize: "24px" }}>
-            {selectedGroup === "" ? "All Rooms" : formatRooms(rooms)}
+          <h1 style={{ fontSize: "24px", margin: "0" }}>
+            {selectedGroup === "" || selectedGroup === "0" ? formatHeader(rooms) : formatRooms(rooms)}
           </h1>
           <IconButton
             aria-label="info"
@@ -125,13 +195,13 @@ const AnnouncementsView = ({
           </IconButton>
         </Box>
         <Box flex={1} h="100vh" overflowY="scroll">
-          <AnnouncementsList
+          {selectedGroup !== "0" && <AnnouncementsList
             announcements={announcements}
             selectedGroup={selectedGroup}
-          />
+          />}
         </Box>
         <Box p="27px 39px">
-          <MessageInput handlePost={() => {}} />
+          <MessageInput handlePost={handlePost} />
         </Box>
       </Flex>
     </Box>