Fix: render notification center icon on the same spot as on the header

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

@@ -2,7 +2,7 @@ import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 import ActionButton from 'src/components/buttons/ActionButton'
 import { H5 } from 'src/components/typography'
@@ -52,19 +52,27 @@ const CLEAR_ALL_NOTIFICATIONS = gql`
   }
 `
 
-const NotificationCenter = ({ close, notifyUnread }) => {
+const NotificationCenter = ({
+  close,
+  notifyUnread,
+  hasUnreadProp,
+  notifButtonCoords
+}) => {
   const classes = useStyles()
   const { data, loading } = useQuery(GET_NOTIFICATIONS, {
     pollInterval: 60000
   })
   const [showingUnread, setShowingUnread] = useState(false)
+  const [xOffset, setXOffset] = useState(0)
   const machines = R.compose(
     R.map(R.prop('name')),
     R.indexBy(R.prop('deviceId'))
   )(data?.machines ?? [])
 
   const notifications = R.path(['notifications'])(data) ?? []
-  const hasUnread = data?.hasUnreadNotifications ?? false
+  const hasUnread = hasUnreadProp || (data?.hasUnreadNotifications ?? false)
+  const popperDOM = document.querySelector('#notifications-popper')
+
   if (!hasUnread) {
     notifyUnread && notifyUnread()
   }
@@ -77,6 +85,9 @@ const NotificationCenter = ({ close, notifyUnread }) => {
     refetchQueries: () => ['getNotifications']
   })
 
+  useEffect(() => {
+    if (popperDOM) setXOffset(popperDOM.getBoundingClientRect().x)
+  }, [popperDOM])
   const buildNotifications = () => {
     const notificationsToShow =
       !showingUnread || !hasUnread
@@ -106,13 +117,20 @@ const NotificationCenter = ({ close, notifyUnread }) => {
 
   return (
     <>
-      <div className={classes.container}>
+      <button
-        <div className={classes.header}>
+        onClick={close}
-          <H5 className={classes.headerText}>Notifications</H5>
+        className={classes.notificationIcon}
-          <button onClick={close} className={classes.notificationIcon}>
+        style={{
+          position: 'absolute',
+          top: notifButtonCoords.y,
+          left: notifButtonCoords.x - xOffset
+        }}>
         <NotificationIconZodiac />
         {hasUnread && <div className={classes.hasUnread} />}
       </button>
+      <div className={classes.container}>
+        <div className={classes.header}>
+          <H5 className={classes.headerText}>Notifications</H5>
         </div>
         <div className={classes.actionButtons}>
           {hasUnread && (

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

@@ -38,9 +38,9 @@ const styles = {
     height: 0
   },
   notificationIcon: {
-    position: 'absolute',
+    /*     position: 'absolute',
-    left: spacer * 33,
+    left: spacer * 22 + 2,
-    top: spacer * 2 + 4,
+    top: spacer + 5, */
     cursor: 'pointer',
     background: 'transparent',
     boxShadow: '0px 0px 0px transparent',
@@ -59,7 +59,7 @@ const styles = {
     maxHeight: '100vh',
     marginTop: spacer * 3,
     marginLeft: 0,
-    marginRight: 10,
+    marginRight: -50,
     overflowY: 'auto',
     overflowX: 'hidden',
     backgroundColor: white,

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

@@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
-import React, { memo, useState, useEffect } from 'react'
+import React, { memo, useState, useEffect, useRef } from 'react'
 import { NavLink, useHistory } from 'react-router-dom'
 
 import NotificationCenter from 'src/components/NotificationCenter'
@@ -61,13 +61,16 @@ const notNil = R.compose(R.not, R.isNil)
 
 const Header = memo(({ tree }) => {
   const [open, setOpen] = useState(false)
-  const [anchorEl, setAnchorEl] = React.useState(null)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [notifButtonCoords, setNotifButtonCoords] = useState({ x: 0, y: 0 })
   const [active, setActive] = useState()
-  const { data, refetch } = useQuery(HAS_UNREAD, { pollInterval: 60000 })
   const [hasUnread, setHasUnread] = useState(false)
 
+  const { data, refetch } = useQuery(HAS_UNREAD, { pollInterval: 60000 })
+  const notifCenterButtonRef = useRef()
   const history = useHistory()
   const classes = useStyles()
+
   useEffect(() => {
     if (data?.hasUnreadNotifications) return setHasUnread(true)
     // if not true, make sure it's false and not undefined
@@ -90,6 +93,9 @@ const Header = memo(({ tree }) => {
   }
 
   const handleClick = event => {
+    const coords = notifCenterButtonRef.current.getBoundingClientRect()
+    setNotifButtonCoords({ x: coords.x, y: coords.y })
+
     setAnchorEl(anchorEl ? null : event.currentTarget)
     document.querySelector('#root').classList.add('root-notifcenter-open')
     document.querySelector('body').classList.add('body-notifcenter-open')
@@ -141,7 +147,7 @@ const Header = memo(({ tree }) => {
               Add machine
             </ActionButton>
             <ClickAwayListener onClickAway={onClickAway}>
-              <div>
+              <div ref={notifCenterButtonRef}>
                 <button
                   onClick={handleClick}
                   className={classes.notificationIcon}>
@@ -163,6 +169,8 @@ const Header = memo(({ tree }) => {
                   <NotificationCenter
                     close={onClickAway}
                     notifyUnread={refetch}
+                    hasUnread={hasUnread}
+                    notifButtonCoords={notifButtonCoords}
                   />
                 </Popper>
               </div>

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

@@ -170,8 +170,8 @@ const styles = {
   },
   hasUnread: {
     position: 'absolute',
-    top: 5,
+    top: 4,
-    left: 185,
+    left: 182,
     width: '9px',
     height: '9px',
     backgroundColor: secondaryColor,