Feat: notification center polling, prevent page moving when opening it

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js

@@ -53,7 +53,9 @@ const CLEAR_ALL_NOTIFICATIONS = gql`
 
 const NotificationCenter = ({ close, notifyUnread }) => {
   const classes = useStyles()
-  const { data, loading } = useQuery(GET_NOTIFICATIONS)
+  const { data, loading } = useQuery(GET_NOTIFICATIONS, {
+    pollInterval: 60000
+  })
   const [showingUnread, setShowingUnread] = useState(false)
   const machines = R.compose(
     R.map(R.prop('name')),

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

@@ -4,7 +4,8 @@ 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 * as R from 'ramda'
+import React, { memo, useState, useEffect } from 'react'
 import { NavLink, useHistory } from 'react-router-dom'
 
 import NotificationCenter from 'src/components/NotificationCenter'
@@ -56,14 +57,22 @@ const Subheader = ({ item, classes }) => {
   )
 }
 
+const notNil = R.compose(R.not, R.isNil)
+
 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 { data, refetch } = useQuery(HAS_UNREAD, { pollInterval: 60000 })
+  const [hasUnread, setHasUnread] = useState(false)
+
   const history = useHistory()
   const classes = useStyles()
+  useEffect(() => {
+    if (data?.hasUnreadNotifications) return setHasUnread(true)
+    // if not true, make sure it's false and not undefined
+    if (notNil(data?.hasUnreadNotifications)) return setHasUnread(false)
+  }, [data])
 
   const onPaired = machine => {
     setOpen(false)

new-lamassu-admin/src/styling/global/index.js

@@ -13,7 +13,7 @@ export default {
     },
     '.root-notifcenter-open': {
       // for when notification center is open
-      overflowY: 'scroll',
+      overflowY: 'auto',
       position: 'absolute',
       top: 0,
       bottom: 0,