diff --git a/src/components/CookiesBanner/index.jsx b/src/components/CookiesBanner/index.jsx index f3c3c129..f8da614b 100644 --- a/src/components/CookiesBanner/index.jsx +++ b/src/components/CookiesBanner/index.jsx @@ -5,12 +5,15 @@ import FormControlLabel from '@material-ui/core/FormControlLabel' import IconButton from '@material-ui/core/IconButton' import React, { useEffect, useState } from 'react' import { makeStyles } from '@material-ui/core/styles' +import { useDispatch, useSelector } from 'react-redux' import Link from '~/components/layout/Link' import Button from '~/components/layout/Button' import { primary, mainFontFamily } from '~/theme/variables' import type { CookiesProps } from '~/logic/cookies/model/cookie' import { COOKIES_KEY } from '~/logic/cookies/model/cookie' import { loadFromCookie, saveCookie } from '~/utils/cookies' +import { cookieBannerOpen } from '~/logic/cookies/store/selectors' +import { openCookieBanner } from '~/logic/cookies/store/actions/openCookieBanner' const useStyles = makeStyles({ container: { @@ -68,10 +71,10 @@ const useStyles = makeStyles({ const CookiesBanner = () => { const classes = useStyles() - - const [showBanner, setShowBanner] = useState(false) + const dispatch = useDispatch() const [localNecessary, setLocalNecessary] = useState(true) const [localAnalytics, setLocalAnalytics] = useState(false) + const showBanner = useSelector(cookieBannerOpen) useEffect(() => { async function fetchCookiesFromStorage() { @@ -80,13 +83,14 @@ const CookiesBanner = () => { const { acceptedNecessary, acceptedAnalytics } = cookiesState setLocalAnalytics(acceptedAnalytics) setLocalNecessary(acceptedNecessary) - setShowBanner(acceptedNecessary === false) + const openBanner = acceptedNecessary === false || showBanner + dispatch(openCookieBanner(openBanner)) } else { - setShowBanner(true) + dispatch(openCookieBanner(true)) } } fetchCookiesFromStorage() - }, []) + }, [showBanner]) const acceptCookiesHandler = async () => { const newState = { @@ -94,7 +98,7 @@ const CookiesBanner = () => { acceptedAnalytics: true, } await saveCookie(COOKIES_KEY, newState, 365) - setShowBanner(false) + dispatch(openCookieBanner(false)) } const closeCookiesBannerHandler = async () => { @@ -104,7 +108,7 @@ const CookiesBanner = () => { } const expDays = localAnalytics ? 365 : 7 await saveCookie(COOKIES_KEY, newState, expDays) - setShowBanner(false) + dispatch(openCookieBanner(false)) } @@ -141,7 +145,7 @@ const CookiesBanner = () => { onChange={() => setLocalAnalytics((prev) => !prev)} value={localAnalytics} control={( - + )} /> diff --git a/src/components/Sidebar/LegalLinks.jsx b/src/components/Sidebar/LegalLinks.jsx index 0b0ed30f..e9bbe7e9 100644 --- a/src/components/Sidebar/LegalLinks.jsx +++ b/src/components/Sidebar/LegalLinks.jsx @@ -1,9 +1,12 @@ // @flow import React from 'react' import { makeStyles } from '@material-ui/core/styles' +import { useDispatch } from 'react-redux' import Block from '~/components/layout/Block' import Link from '~/components/layout/Link' import { sm, primary } from '~/theme/variables' +import { openCookieBanner } from '~/logic/cookies/store/actions/openCookieBanner' +import GnoButtonLink from '~/components/layout/ButtonLink' const useStyles = makeStyles({ container: { @@ -12,10 +15,15 @@ const useStyles = makeStyles({ link: { color: primary, }, + buttonLink: { + textDecoration: 'none', + color: primary, + }, }) const LegalLinks = () => { const classes = useStyles() + const dispatch = useDispatch() return ( @@ -30,6 +38,9 @@ const LegalLinks = () => { Imprint + dispatch(openCookieBanner(true))}> + Cookies + ) } diff --git a/src/logic/cookies/model/cookie.js b/src/logic/cookies/model/cookie.js index 23007489..3d8b144a 100644 --- a/src/logic/cookies/model/cookie.js +++ b/src/logic/cookies/model/cookie.js @@ -6,6 +6,7 @@ export const COOKIES_KEY = 'COOKIES' export type CookiesProps = { acceptedNecessary: boolean, acceptedAnalytics: boolean, + cookieBannerOpen: boolean, } export type Cookie = RecordOf diff --git a/src/logic/cookies/store/actions/openCookieBanner.js b/src/logic/cookies/store/actions/openCookieBanner.js new file mode 100644 index 00000000..2e158c42 --- /dev/null +++ b/src/logic/cookies/store/actions/openCookieBanner.js @@ -0,0 +1,6 @@ +// @flow +import { createAction } from 'redux-actions' + +export const OPEN_COOKIE_BANNER = 'OPEN_COOKIE_BANNER' + +export const openCookieBanner = createAction(OPEN_COOKIE_BANNER, (cookieBannerOpen: boolean) => ({ cookieBannerOpen })) diff --git a/src/logic/cookies/store/reducer/cookies.js b/src/logic/cookies/store/reducer/cookies.js new file mode 100644 index 00000000..3e2155c8 --- /dev/null +++ b/src/logic/cookies/store/reducer/cookies.js @@ -0,0 +1,24 @@ +// @flow +import { Map } from 'immutable' +import { handleActions, type ActionType } from 'redux-actions' +import type { Cookie } from '~/logic/cookies/model/cookie' +import { OPEN_COOKIE_BANNER } from '~/logic/cookies/store/actions/openCookieBanner' + +export const COOKIES_REDUCER_ID = 'cookies' + +export type State = Map> + +export default handleActions( + { + [OPEN_COOKIE_BANNER]: (state: State, action: ActionType): State => { + const { cookieBannerOpen } = action.payload + + const newState = state.withMutations((map) => { + map.set('cookieBannerOpen', cookieBannerOpen) + }) + + return newState + }, + }, + Map(), +) diff --git a/src/logic/cookies/store/selectors/index.js b/src/logic/cookies/store/selectors/index.js new file mode 100644 index 00000000..277053b8 --- /dev/null +++ b/src/logic/cookies/store/selectors/index.js @@ -0,0 +1,5 @@ +// @flow +import type { Provider } from '~/logic/wallets/store/model/provider' +import { COOKIES_REDUCER_ID } from '~/logic/cookies/store/reducer/cookies' + +export const cookieBannerOpen = (state: any): Provider => state[COOKIES_REDUCER_ID].get('cookieBannerOpen') diff --git a/src/store/index.js b/src/store/index.js index deeff088..f59be684 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -18,6 +18,7 @@ import notifications, { NOTIFICATIONS_REDUCER_ID, type NotificationReducerState as NotificationsState, } from '~/logic/notifications/store/reducer/notifications' +import cookies, { COOKIES_REDUCER_ID } from '~/logic/cookies/store/reducer/cookies' export const history = createBrowserHistory() @@ -45,6 +46,7 @@ const reducers: Reducer = combineReducers({ [TOKEN_REDUCER_ID]: tokens, [TRANSACTIONS_REDUCER_ID]: transactions, [NOTIFICATIONS_REDUCER_ID]: notifications, + [COOKIES_REDUCER_ID]: cookies, }) export const store: Store = createStore(reducers, finalCreateStore)