Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #104 from uwblueprint/ryan-jesse/announcement-home…
…page-component announcement homepage component
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,54 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { Flex } from "@chakra-ui/react"; | ||
|
|
||
| import { | ||
| GroupAnnouncements, | ||
| Announcement, | ||
| } from "../../../types/NotificationTypes"; | ||
| import AnnouncementsGroups from "./AnnouncementsGroups"; | ||
| import AnnouncementsView from "./AnnouncementsView"; | ||
| import { announcementsMockData } from "../../../mocks/notifications"; | ||
|
|
||
| const AnnouncementsPage = (): React.ReactElement => { | ||
| const [announcements, setAnnouncements] = useState<GroupAnnouncements>({}); | ||
| const [selectedGroup, setSelectedGroup] = useState<string>(""); | ||
|
|
||
| useEffect(() => { | ||
| // TODO: Fetch announcements from API | ||
| const combinedAnnouncements: GroupAnnouncements = {}; | ||
| Object.entries(announcementsMockData).forEach(([key, value]) => { | ||
| for (let i = 0; i < value.length; i += 1) { | ||
| const newAnnouncement: Announcement = { | ||
| room: key, | ||
| author: value[i].author, | ||
| message: value[i].message, | ||
| createdAt: value[i].createdAt, | ||
| }; | ||
| // check if alr exists, if not create new | ||
| if (!combinedAnnouncements[key]) { | ||
| combinedAnnouncements[key] = []; | ||
| } | ||
| combinedAnnouncements[key].push(newAnnouncement); | ||
| } | ||
| }); | ||
|
|
||
| setAnnouncements(combinedAnnouncements); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Flex flexDir="column" flexGrow={1}> | ||
| <Flex flexDir="row" alignItems="flex-start" w="100%" flexGrow={1}> | ||
| <AnnouncementsGroups | ||
| announcements={announcements} | ||
| setSelectedGroup={setSelectedGroup} | ||
| /> | ||
| <AnnouncementsView | ||
| announcements={announcements} | ||
| selectedGroup={selectedGroup} | ||
| /> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export default AnnouncementsPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { useState } from "react"; | ||
| import moment from "moment"; | ||
| import { Box, Text, Flex, Icon, IconButton } from "@chakra-ui/react"; | ||
| import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined"; | ||
| import ChevronRightIcon from "@mui/icons-material/ChevronRight"; | ||
| import ExpandLessIcon from "@mui/icons-material/ExpandLess"; | ||
|
|
||
| import { Announcement } from "../../../types/NotificationTypes"; | ||
|
|
||
| const AnnouncementNotification = ({ | ||
| room, | ||
| message, | ||
| createdAt, | ||
| }: Announcement): React.ReactElement => { | ||
| const [showFullMessage, setShowFullMessage] = useState(false); | ||
|
|
||
| return ( | ||
| <Box w="100%" p={3}> | ||
| <Flex alignItems="center"> | ||
| <Box | ||
| borderRadius="full" | ||
| border="2px solid" | ||
| borderColor="gray.300" | ||
| p={1} | ||
| mr={3} | ||
| > | ||
| <Icon | ||
| as={PersonOutlineOutlinedIcon} | ||
| boxSize={10} | ||
| color="purple.main" | ||
| /> | ||
| </Box> | ||
| <Flex flexDir="column" w="80%"> | ||
| <Flex alignItems="baseline" w="100%"> | ||
| <Text as="b" mr={4}> | ||
| {"Admin to Room ".concat(room)} | ||
| </Text> | ||
| <Text color="gray.500" fontSize="sm"> | ||
| posted at {moment(createdAt).format("h:mm a")} | ||
| </Text> | ||
| </Flex> | ||
| <Box w="80%"> | ||
| {showFullMessage ? ( | ||
| <Text mt={1}>{message}</Text> | ||
| ) : ( | ||
| <Text | ||
| mt={1} | ||
| overflow="hidden" | ||
| textOverflow="ellipsis" | ||
| whiteSpace="nowrap" | ||
| > | ||
| {message} | ||
| </Text> | ||
| )} | ||
| </Box> | ||
| </Flex> | ||
| <IconButton | ||
| aria-label="expand" | ||
| bg="white" | ||
| _hover={{ bg: "white" }} | ||
| onClick={() => setShowFullMessage(!showFullMessage)} | ||
| icon={showFullMessage ? <ChevronRightIcon /> : <ExpandLessIcon />} | ||
| size="md" | ||
| /> | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default AnnouncementNotification; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import { Flex, Box, Heading, Text } from "@chakra-ui/react"; | ||
| import { announcementsMockData } from "../../../mocks/notifications"; | ||
| import AnnouncementNotification from "./AnnouncementNotification"; | ||
| import { Announcement } from "../../../types/NotificationTypes"; | ||
|
|
||
| const HomePage = (): React.ReactElement => { | ||
| const [numberPosts, setNumberPosts] = useState(0); | ||
| const [viewAll, setViewAll] = useState(false); | ||
| const [announcements, setAnnouncements] = useState<Announcement[]>([]); | ||
| const [recentAnnouncements, setRecentAnnouncements] = useState< | ||
| Announcement[] | ||
| >([]); | ||
|
|
||
| useEffect(() => { | ||
| // Combine all announcements into a single array | ||
| const combinedAnnouncements: Announcement[] = []; | ||
| Object.entries(announcementsMockData).forEach(([key, value]) => { | ||
| for (let i = 0; i < value.length; i += 1) { | ||
| const newAnnouncement: Announcement = { | ||
| room: key, | ||
| author: value[i].author, | ||
| message: value[i].message, | ||
| createdAt: value[i].createdAt, | ||
| }; | ||
| combinedAnnouncements.push(newAnnouncement); | ||
| } | ||
| }); | ||
|
|
||
| const sortedAnnouncements = combinedAnnouncements.sort( | ||
| (a, b) => | ||
| new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), | ||
| ); | ||
| // Filter announcements from the current week | ||
| const oneWeekAgo = new Date(); | ||
| oneWeekAgo.setDate(oneWeekAgo.getDate() - 7); | ||
| const thisWeeksAnnouncements = sortedAnnouncements.filter( | ||
| (announcement) => new Date(announcement.createdAt) >= oneWeekAgo, | ||
| ); | ||
| setAnnouncements(combinedAnnouncements); | ||
| setRecentAnnouncements(thisWeeksAnnouncements.slice(0, 3)); | ||
| setNumberPosts(thisWeeksAnnouncements.length); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Flex flexDirection="column" alignItems="center" w="80vw"> | ||
| <Box> | ||
| <Heading>Home Page</Heading> | ||
| </Box> | ||
| <Box | ||
| border="2px solid grey" | ||
| p={6} | ||
| justifyContent="space-between" | ||
| borderRadius="8px" | ||
| w="75%" | ||
| > | ||
| <Flex justifyContent="space-between" alignItems="center" mb={2}> | ||
| <Flex alignItems="baseline"> | ||
| <Text fontSize="md" as="b"> | ||
| Announcements | ||
| </Text> | ||
| <Text ml={6} fontSize="smaller"> | ||
| {numberPosts === 0 | ||
| ? "You're all caught up!" | ||
| : `${numberPosts} new posts today`} | ||
| </Text> | ||
| </Flex> | ||
|
|
||
| <Text onClick={() => setViewAll(!viewAll)} cursor="pointer"> | ||
| {viewAll ? "View less" : "View all"} | ||
| </Text> | ||
| </Flex> | ||
| {(viewAll ? announcements : recentAnnouncements).map( | ||
| (announcement, index) => ( | ||
| <AnnouncementNotification | ||
| room={announcement.room} | ||
| author={announcement.author} | ||
| message={announcement.message} | ||
| createdAt={announcement.createdAt} | ||
| key={index} | ||
| /> | ||
| ), | ||
| )} | ||
| </Box> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export default HomePage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| export interface Announcement { | ||
| author: string; | ||
| room: string; | ||
| message: string; | ||
| createdAt: string; | ||
| } | ||
|
|
||