Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop frontend for creating announcements #83

Merged
merged 3 commits into from
Jul 29, 2024
Merged

Develop frontend for creating announcements #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
230b79c
Develop frontend for creating announcements
KathleenX7 Jun 6, 2024
d92f3a2
Merge branch 'dev' into kathleen-ammielle/develop-frontend-for-creati…
ya5er Jul 29, 2024
ce290a5
Added FlexGrow to announcements page
ya5er Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 45 additions & 14 deletions frontend/src/components/pages/announcements/AnnouncementsGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,12 @@ interface ProcessedGroupAnnouncements {

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(", ");
};
Expand All @@ -43,12 +48,17 @@ const GroupTab = ({
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)}
Expand All @@ -58,7 +68,7 @@ const GroupTab = ({
borderBottomColor="gray.300"
_hover={{ bg: "purple.100", cursor: "pointer" }}
>
<Flex alignItems="center">
<Flex alignItems="center" minH="93px">
<Box
borderRadius="full"
border="1px solid"
Expand All @@ -76,14 +86,16 @@ const GroupTab = ({
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>
Expand All @@ -93,10 +105,12 @@ const GroupTab = ({
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: {},
Expand All @@ -106,6 +120,7 @@ const GroupList: React.FC<{
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;
Expand All @@ -116,23 +131,38 @@ const GroupList: React.FC<{
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%">
Expand All @@ -159,6 +189,7 @@ const GroupList: React.FC<{
border="solid"
borderColor="gray.200"
mr={5}
onClick={addRoom}
/>
</Flex>

Expand Down
9 changes: 9 additions & 0 deletions frontend/src/components/pages/announcements/AnnouncementsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -21,10 +23,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>
</Flex>
Expand Down
84 changes: 77 additions & 7 deletions frontend/src/components/pages/announcements/AnnouncementsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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) => (
Expand Down Expand Up @@ -99,8 +117,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%">
Expand All @@ -111,9 +180,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"
Expand All @@ -126,13 +196,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>
Expand Down
Loading