Chore: make notification center UI

Chore: fiatBalancesNotify refactor

Chore: removed now-unused code in some files

Feat: change column "detail" in database to use jsonb

Chore: add notification center background and button

Chore: notifications screen scaffolding

Fix: change position of notification UI

Feat: join backend and frontend

Feat: notification icons and machine names

Feat: add clear all button, stripe overlay on invalid notification

Fix: rework notification styles

Feat: use popper to render notifications

Feat: make notification center UI

Fix: fix css on notification center

Fix: fix invalidateNotification

Chore: apply PR requested changes

Fix: PR fixes

Fix: make toggleable body/root styles be handled by react

Chore: delete old notifier file

Fix: undo variable name changes for cryptobalance notifs

new-lamassu-admin/src/components/layout/Header.js

@@ -1,19 +1,31 @@
+import { useQuery } from '@apollo/react-hooks'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Popper from '@material-ui/core/Popper'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
+import gql from 'graphql-tag'
 import React, { memo, useState } from 'react'
 import { NavLink, useHistory } from 'react-router-dom'
 
+import NotificationCenter from 'src/components/NotificationCenter'
 import ActionButton from 'src/components/buttons/ActionButton'
 import { H4 } from 'src/components/typography'
 import AddMachine from 'src/pages/AddMachine'
 import { ReactComponent as AddIconReverse } from 'src/styling/icons/button/add/white.svg'
 import { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'
 import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
+import { ReactComponent as NotificationIcon } from 'src/styling/icons/menu/notification.svg'
 
 import styles from './Header.styles'
 
 const useStyles = makeStyles(styles)
 
+const HAS_UNREAD = gql`
+  query getUnread {
+    hasUnreadNotifications
+  }
+`
+
 const Subheader = ({ item, classes }) => {
   const [prev, setPrev] = useState(null)
 
@@ -46,8 +58,10 @@ const Subheader = ({ item, classes }) => {
 
 const Header = memo(({ tree }) => {
   const [open, setOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = React.useState(null)
   const [active, setActive] = useState()
-
+  const { data, refetch } = useQuery(HAS_UNREAD)
+  const hasUnread = data?.hasUnreadNotifications ?? false
   const history = useHistory()
   const classes = useStyles()
 
@@ -56,8 +70,26 @@ const Header = memo(({ tree }) => {
     history.push('/maintenance/machine-status', { id: machine.deviceId })
   }
 
+  // these inline styles prevent scroll bubbling: when the user reaches the bottom of the notifications list and keeps scrolling,
+  // the body scrolls, stealing the focus from the notification center, preventing the admin from scrolling the notifications back up
+  // on the first scroll, needing to move the mouse to recapture the focus on the notification center
+  // it also disables the scrollbars caused by the notification center's background to the right of the page, but keeps the scrolling on the body enabled
+  const onClickAway = () => {
+    setAnchorEl(null)
+    document.querySelector('#root').classList.remove('root-notifcenter-open')
+    document.querySelector('body').classList.remove('body-notifcenter-open')
+  }
+
+  const handleClick = event => {
+    setAnchorEl(anchorEl ? null : event.currentTarget)
+    document.querySelector('#root').classList.add('root-notifcenter-open')
+    document.querySelector('body').classList.add('body-notifcenter-open')
+  }
+
+  const popperOpen = Boolean(anchorEl)
+  const id = popperOpen ? 'notifications-popper' : undefined
   return (
-    <header>
+    <header className={classes.headerContainer}>
       <div className={classes.header}>
         <div className={classes.content}>
           <div
@@ -87,6 +119,8 @@ const Header = memo(({ tree }) => {
                 </NavLink>
               ))}
             </ul>
+          </nav>
+          <div className={classes.actionButtonsContainer}>
             <ActionButton
               color="secondary"
               Icon={AddIcon}
@@ -94,7 +128,34 @@ const Header = memo(({ tree }) => {
               onClick={() => setOpen(true)}>
               Add machine
             </ActionButton>
-          </nav>
+            <ClickAwayListener onClickAway={onClickAway}>
+              <div>
+                <button
+                  onClick={handleClick}
+                  className={classes.notificationIcon}>
+                  <NotificationIcon />
+                  {hasUnread && <div className={classes.hasUnread} />}
+                </button>
+                <Popper
+                  id={id}
+                  open={popperOpen}
+                  anchorEl={anchorEl}
+                  className={classes.popper}
+                  disablePortal={false}
+                  modifiers={{
+                    preventOverflow: {
+                      enabled: true,
+                      boundariesElement: 'viewport'
+                    }
+                  }}>
+                  <NotificationCenter
+                    close={onClickAway}
+                    notifyUnread={refetch}
+                  />
+                </Popper>
+              </div>
+            </ClickAwayListener>
+          </div>
         </div>
       </div>
       {active && active.children && (