diff --git a/src/components/Header/Notifications.tsx b/src/components/Header/Notifications.tsx index 74e2c6e..2bf4c9b 100644 --- a/src/components/Header/Notifications.tsx +++ b/src/components/Header/Notifications.tsx @@ -1,27 +1,35 @@ import React from 'react'; -import { Menu, MenuButton, MenuList, MenuGroup, IconButton, MenuDivider } from '@chakra-ui/react'; +import moment from 'moment'; +import { Menu, MenuButton, MenuList, MenuItem, MenuGroup, IconButton, MenuDivider, Flex, Text } from '@chakra-ui/react'; import { Skeleton } from '@chakra-ui/skeleton'; -import { MdNotifications } from 'react-icons/md'; -import { useRootStore } from '@educt/hooks/useRootStore'; +import { MdNotifications, MdOutlineMessage } from 'react-icons/md'; import { observer } from 'mobx-react'; -export interface INotificationsProps { - count?: number | undefined; -} +/** + * Hooks + */ +import { useHistory } from 'react-router-dom'; +import { useRootStore } from '@educt/hooks/useRootStore'; -const Notifications: React.FC = observer(props => { +const Notifications: React.FC = observer(() => { const { userStore: { me }, } = useRootStore(); - - const { count, ...menuProps } = props; + const history = useHistory(); if (me === null) { return ; } + const count = me.notifications.length; + + /** + * Filter types of notifications + */ + const messages = me.notifications.filter(notification => notification.type === 'MESSAGE'); + return ( - + = observer(props => { borderRadius: '100%', }} /> - - + + 0 ? `${count} new notifications` : 'Notifications'}> + {/* MESSAGES */} + {messages.length !== 0 && ( + history.push('/messages')} py='3' icon={}> + + + You have {messages.length} new private messages + + + {moment(messages[0].time).fromNow()} + + + + )} + + {/* EMPTY NOTIFICATIONS */} + {me.notifications.length === 0 && ( + + You have no notifications + + )} diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 65fed94..ede1a38 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Flex, Box, BoxProps } from '@chakra-ui/react'; import { Logo } from './Logo'; import { Profile } from './Profile'; -import { INotificationsProps, Notifications } from './Notifications'; +import { Notifications } from './Notifications'; import ColorModeSwitcher from '@educt/components/ColorModeSwitcher'; import NavMobile from '@educt/components/Nav/Mobile'; import type { ColorModeSwitcherProps } from '../ColorModeSwitcher/ColorModeSwitcher'; @@ -15,7 +15,7 @@ import { useColorModeValue, useMediaQuery } from '@chakra-ui/react'; interface IHeaderComposition { Logo: React.FC; ThemeSwitcher: React.FC; - Notifications: React.FC; + Notifications: React.FC; Profile: React.FC; } diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index bbd3f0c..05f1cea 100644 --- a/src/interfaces/index.ts +++ b/src/interfaces/index.ts @@ -1,5 +1,12 @@ import type { RouteComponentProps } from 'react-router-dom'; -import { AttachmentFileType, ColorType, LessonProgress, LessonVideoType, LinkType } from '@educt/types'; +import { + AttachmentFileType, + ColorType, + LessonProgress, + LessonVideoType, + LinkType, + NotificationType, +} from '@educt/types'; import { CourseStatusEnum, UserRoleEnum } from '../enums'; export interface IAppConfig { @@ -135,6 +142,7 @@ export interface IMe extends IUser { */ courses?: UserCourseType[]; likes: Array>; + notifications: Array; isAdmin: boolean; isTeacher: boolean; isStudent: boolean; diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts index 8d7ca7f..365f98d 100644 --- a/src/stores/UserStore.ts +++ b/src/stores/UserStore.ts @@ -72,6 +72,7 @@ export default class UserStore { email, roles, likes, + notifications, contacts, courses, created_at, @@ -91,6 +92,7 @@ export default class UserStore { about, last_login, likes, + notifications, contacts, courses, isAdmin: helpers.userContainRoles(roles, [UserRoleEnum.ADMIN]), diff --git a/src/types/index.d.ts b/src/types/index.d.ts index a741313..bda37bd 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -76,6 +76,13 @@ export type HistoryMessageType = { time: string; }; +export type NotificationType = { + id: string; + content: string; + time: string; + type: 'SYSTEM' | 'MESSAGE'; +}; + export type UserSeesionType = { sessionId: string | undefined; userId: string | undefined;