Fix: fix notification icon blinking

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

@@ -54,15 +54,20 @@ const CLEAR_ALL_NOTIFICATIONS = gql`
 
 const NotificationCenter = ({
   close,
-  notifyUnread,
   hasUnreadProp,
-  notifButtonCoords
+  notifButtonCoords,
+  popperRef,
+  refetchHasUnreadHeader,
+  setHeaderHasUnread
 }) => {
   const { data, loading } = useQuery(GET_NOTIFICATIONS, {
     pollInterval: 60000
   })
+
+  const [xOffset, setXoffset] = useState(300)
+
   const [showingUnread, setShowingUnread] = useState(false)
-  const [xOffset, setXOffset] = useState(0)
+
   const classes = useStyles({ notifButtonCoords, xOffset })
   const machines = R.compose(
     R.map(R.prop('name')),
@@ -70,12 +75,9 @@ const NotificationCenter = ({
   )(data?.machines ?? [])
 
   const notifications = R.path(['notifications'])(data) ?? []
-  const hasUnread = hasUnreadProp || (data?.hasUnreadNotifications ?? false)
-  const popperDOM = document.querySelector('#notifications-popper')
-
-  if (!hasUnread) {
-    notifyUnread && notifyUnread()
-  }
+  const [hasUnread, setHasUnread] = useState(
+    hasUnreadProp || (data?.hasUnreadNotifications ?? false)
+  )
   const [toggleClearNotification] = useMutation(TOGGLE_CLEAR_NOTIFICATION, {
     onError: () => console.error('Error while clearing notification'),
     refetchQueries: () => ['getNotifications']
@@ -86,8 +88,13 @@ const NotificationCenter = ({
   })
 
   useEffect(() => {
-    if (popperDOM) setXOffset(popperDOM.getBoundingClientRect().x)
-  }, [popperDOM])
+    setXoffset(popperRef.current.getBoundingClientRect().x)
+    if (data && data.hasUnreadNotifications !== hasUnread) {
+      refetchHasUnreadHeader()
+      setHasUnread(!hasUnread)
+    }
+  }, [popperRef, data, hasUnread, refetchHasUnreadHeader])
+
   const buildNotifications = () => {
     const notificationsToShow =
       !showingUnread || !hasUnread
@@ -117,13 +124,13 @@ const NotificationCenter = ({
 
   return (
     <>
-      <button onClick={close} className={classes.notificationIcon}>
-        <NotificationIconZodiac />
-        {hasUnread && <div className={classes.hasUnread} />}
-      </button>
       <div className={classes.container}>
         <div className={classes.header}>
           <H5 className={classes.headerText}>Notifications</H5>
+          <button onClick={close} className={classes.notificationIcon}>
+            <NotificationIconZodiac />
+            {hasUnread && <div className={classes.hasUnread} />}
+          </button>
         </div>
         <div className={classes.actionButtons}>
           {hasUnread && (

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

@@ -39,7 +39,7 @@ const styles = {
   },
   notificationIcon: ({ notifButtonCoords, xOffset }) => ({
     position: 'absolute',
-    top: notifButtonCoords ? notifButtonCoords.y : 0,
+    top: notifButtonCoords ? notifButtonCoords.y - 1 : 0,
     left: notifButtonCoords ? notifButtonCoords.x - xOffset : 0,
     cursor: 'pointer',
     background: 'transparent',

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

@@ -68,6 +68,7 @@ const Header = memo(({ tree }) => {
 
   const { data, refetch } = useQuery(HAS_UNREAD, { pollInterval: 60000 })
   const notifCenterButtonRef = useRef()
+  const popperRef = useRef()
   const history = useHistory()
   const classes = useStyles()
 
@@ -155,6 +156,7 @@ const Header = memo(({ tree }) => {
                   {hasUnread && <div className={classes.hasUnread} />}
                 </button>
                 <Popper
+                  ref={popperRef}
                   id={id}
                   open={popperOpen}
                   anchorEl={anchorEl}
@@ -167,10 +169,13 @@ const Header = memo(({ tree }) => {
                     }
                   }}>
                   <NotificationCenter
-                    close={onClickAway}
-                    notifyUnread={refetch}
-                    hasUnread={hasUnread}
+                    popperRef={popperRef}
                     notifButtonCoords={notifButtonCoords}
+                    close={onClickAway}
+                    refetchHasUnreadHeader={refetch}
+                    setHeaderHasUnread={unread => {
+                      setHasUnread(unread)
+                    }}
                   />
                 </Popper>
               </div>