(feat) Notification bell doesn't show notifications

zubhub_frontend/zubhub/src/assets/js/styles/components/notification_button/notificationButtonStyles.js

@@ -7,6 +7,19 @@ const styles = theme => ({
   notification: {
     backgroundColor: colors["primary-01"],
   },
+  spanNumber: {
+    textAlign: 'center',
+    position: 'absolute',
+    width: '15px',
+    height: '15px',
+    top: '3px',
+    left: '16px',
+    borderRadius: '999px',
+    fontSize: '10px',
+    fontWeight: '600',
+    backgroundColor: '#F4DB57',
+    color: '#000000'
+  }
 });
 
 export default styles;

zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx

@@ -336,7 +336,7 @@ function PageWrapper(props) {
             <div className={classes.navActionStyle}>
               <SearchOutlined onClick={toggleSearchBar} className={classes.addOn894} />
 
-              <NotificationButton />
+              <NotificationButton {...props}/>
               <Hidden smDown>
                 {props.auth.username && (
                   <Box>

zubhub_frontend/zubhub/src/components/notification_button/NotificationButton.jsx

@@ -1,32 +1,62 @@
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import styles from '../../assets/js/styles/components/notification_button/notificationButtonStyles';
 import commonStyles from '../../assets/js/styles/index';
 import NotificationPanel from '../notification_panel/NotificationPanel';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Notifications } from '@material-ui/icons';
+import API from '../../api/api'
 import clsx from 'clsx';
 import { colors } from '../../assets/js/colors';
 import HamburgerMenu from '../hamburger_menu/HamburgerMenu';
 const useStyles = makeStyles(styles);
 
-const NotificationButton = ({ className, notif }) => {
+const notificationSort = (a, b) => {
+  return new Date(b.date) - new Date(a.date);
+};
+
+const NotificationButton = ({ className, notif, auth }) => {
   const classes = useStyles();
   const commonClasses = makeStyles(commonStyles)();
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [notifications, setNotifications] = useState([]);
   const buttonRef = useRef();
 
+  const unreadNotifications = useMemo(
+    () =>
+      Object.values(notifications)
+        .sort(notificationSort)
+        .filter(notification => !notification.viewed),
+    [notifications],
+  );
+
+  useEffect(() => {
+    async function fetchData() {
+    const api = new API();
+    const notifications = await api.getNotifications(1, auth.token);
+    setNotifications(notifications.results)
+    }
+    fetchData()
+  }, [auth.token])
+
   return (
     <ClickAwayListener onClickAway={() => setDropdownOpen(false)}>
       <div>
         <div
           onClick={() => setDropdownOpen(!dropdownOpen)}
           ref={buttonRef}
           className={clsx(classes.notification, commonClasses.iconBox)}
-          style={{ cursor: 'pointer' }}
+          style={{ position: 'relative', cursor: 'pointer' }}
         >
-          <Notifications style={{ color: colors.primary, fontSize: 20 }} />
+        {
+          unreadNotifications?.length > 0 && (
+           <span className={classes.spanNumber}>
+             {unreadNotifications.length > 9 ? '9+' : unreadNotifications?.length}
+           </span>
+          )
+        }
+         <Notifications style={{ color: colors.primary, fontSize: 24 }} />
         </div>
         <NotificationPanel
           open={dropdownOpen}