From b89ba7d9397f0e77acb438ef94e2015bc4df9827 Mon Sep 17 00:00:00 2001
From: csrapr <26280794+csrapr@users.noreply.github.com>
Date: Mon, 15 Feb 2021 16:09:07 +0000
Subject: [PATCH] Feat: notification center polling, prevent page moving when
 opening it

---
 .../NotificationCenter/NotificationCenter.js      |  4 +++-
 new-lamassu-admin/src/components/layout/Header.js | 15 ++++++++++++---
 new-lamassu-admin/src/styling/global/index.js     |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
index b2d78f5a..8292530f 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
+++ b/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')),
diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js
index 98601869..a942aa99 100644
--- a/new-lamassu-admin/src/components/layout/Header.js
+++ b/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)
diff --git a/new-lamassu-admin/src/styling/global/index.js b/new-lamassu-admin/src/styling/global/index.js
index 1dd3742d..69c68b14 100644
--- a/new-lamassu-admin/src/styling/global/index.js
+++ b/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,