lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: fix notification icon blinking

Browse source
This commit is contained in:
csrapr 2021-02-17 17:20:00 +00:00 • committed by Josh Harvey
parent e723791916
commit f752bad447
3 changed files with 31 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

35
new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
View file

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

2
new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js
View file

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

11
new-lamassu-admin/src/components/layout/Header.js
View file

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