diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx index a5f3add3..b523cd4b 100644 --- a/src/components/Banner/index.tsx +++ b/src/components/Banner/index.tsx @@ -2,14 +2,15 @@ import cn from 'classnames' import { createUseStyles } from 'react-jss' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { IconButton } from 'components/IconButton' -import { isUndefined } from 'lodash' import { mappedTypesToIcons } from 'components/NotificationV2/utils' import { ev as NotificationTypes } from '@dassana-io/web-utils' import { Banners, generateThemedBannerStyles, - getBannerPreferences -} from './util' + getBannerPreferences, + isNewBanner, + updateBannerPreferences +} from './utils' import React, { FC, ReactNode, useLayoutEffect, useState } from 'react' import { styleguide, themedStyles, ThemeType } from 'components/assets/styles' @@ -100,19 +101,11 @@ export const Banner: FC = ({ const banners: Banners = getBannerPreferences() - const [renderBanner, setRenderBanner] = useState( - !(id in banners) || banners[id] === true - ) + const [renderBanner, setRenderBanner] = useState(true) useLayoutEffect(() => { - if (isUndefined(banners[id])) { - localStorage.setItem( - 'bannerPref', - JSON.stringify({ - ...banners, - [id]: true - }) - ) + if (isNewBanner(banners, id)) { + updateBannerPreferences(banners, id, true) } else if (!banners[id]) { setRenderBanner(false) } @@ -120,13 +113,7 @@ export const Banner: FC = ({ const onBannerClose = () => { setRenderBanner(false) - localStorage.setItem( - 'bannerPref', - JSON.stringify({ - ...banners, - [id]: false - }) - ) + updateBannerPreferences(banners, id, false) } return renderBanner ? ( diff --git a/src/components/Banner/util.ts b/src/components/Banner/utils.ts similarity index 94% rename from src/components/Banner/util.ts rename to src/components/Banner/utils.ts index 45a0ec52..37a00a84 100644 --- a/src/components/Banner/util.ts +++ b/src/components/Banner/utils.ts @@ -12,7 +12,7 @@ export const generateThemedBannerStyles = (themeType: ThemeType) => { } } -const BANNER_PREFERENCE = 'bannerPref' +export const BANNER_PREFERENCE = 'bannerPref' export interface Banners { [key: string]: boolean @@ -20,6 +20,7 @@ export interface Banners { export const getBannerPreferences = (): Banners => { const bannerPref = localStorage.getItem(BANNER_PREFERENCE) + return bannerPref ? JSON.parse(bannerPref) : {} }