[Affiliate] Update banner closed state across tabs

src/custom/components/NotificationBanner/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 import { Colors } from 'theme/styled'
 import { X } from 'react-feather'
@@ -50,10 +50,12 @@ const BannerContainer = styled.div`
   justify-content: center;
 `
 export default function NotificationBanner(props: BannerProps) {
-  const { id, canClose = true } = props
+  const { id, isVisible, canClose = true } = props
   const dispatch = useAppDispatch()
-  const isNotificationClosed = useIsNotificationClosed(id) // TODO: the notification closed state is now tied to the Affiliate state, this should generic
-  const [isActive, setIsActive] = useState(!isNotificationClosed ?? props.isVisible)
+  const isNotificationClosed = useIsNotificationClosed(id) // TODO: the notification closed state is now tied to the Affiliate state, this should be generic
+  const [isActive, setIsActive] = useState(!isNotificationClosed ?? isVisible)
+
+  const isHidden = !isVisible || isNotificationClosed || !isActive
 
   const handleClose = () => {
     setIsActive(false)
@@ -62,8 +64,14 @@ export default function NotificationBanner(props: BannerProps) {
     }
   }
 
+  useEffect(() => {
+    if (isNotificationClosed !== null) {
+      setIsActive(!isNotificationClosed)
+    }
+  }, [isNotificationClosed, isActive])
+
   return (
-    <Banner {...props} isVisible={isActive}>
+    <Banner {...props} isVisible={!isHidden}>
       <BannerContainer>{props.children}</BannerContainer>
       {canClose && <StyledClose size={24} onClick={handleClose} />}
     </Banner>

src/custom/state/affiliate/hooks.ts

@@ -31,7 +31,7 @@ export function useResetReferralAddress() {
   return useCallback(() => dispatch(updateReferralAddress(null)), [dispatch])
 }
 
-export function useIsNotificationClosed(id?: string) {
+export function useIsNotificationClosed(id?: string): boolean | null {
   return useSelector<AppState, boolean | null>((state) => {
     return id ? state.affiliate.isNotificationClosed?.[id] ?? false : null
   })

src/custom/state/affiliate/updater.tsx

@@ -1,11 +1,12 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 
-import { updateReferralAddress } from 'state/affiliate/actions'
+import { dismissNotification, updateReferralAddress } from 'state/affiliate/actions'
 import useParseReferralQueryParam from 'hooks/useParseReferralQueryParam'
 import { useAppDispatch } from 'state/hooks'
 import { useReferralAddress } from 'state/affiliate/hooks'
+import { AffiliateState } from './reducer'
 
-export default function ReferralLinkUpdater() {
+export function ReferralLinkUpdater() {
   const dispatch = useAppDispatch()
   const referralAddressParam = useParseReferralQueryParam()
   const referralAddress = useReferralAddress()
@@ -20,3 +21,36 @@ export default function ReferralLinkUpdater() {
 
   return null
 }
+
+export function NotificationClosedUpdater() {
+  const dispatch = useAppDispatch()
+
+  const handler = useCallback(
+    (e: StorageEvent) => {
+      if (e.key === 'redux_localstorage_simple_affiliate' && e.newValue) {
+        const parsed = JSON.parse(e.newValue) as AffiliateState
+        for (const id in parsed.isNotificationClosed) {
+          dispatch(dismissNotification(id))
+        }
+      }
+    },
+    [dispatch]
+  )
+
+  useEffect(() => {
+    window.addEventListener('storage', handler)
+
+    return () => window.removeEventListener('storage', handler)
+  }, [handler])
+
+  return null
+}
+
+export default function AffiliateUpdaters() {
+  return (
+    <>
+      <ReferralLinkUpdater />
+      <NotificationClosedUpdater />
+    </>
+  )
+}