Removes redux for cookiesStorage
This commit is contained in:
parent
3b063d3ee8
commit
9c6235f8db
|
@ -3,16 +3,14 @@ import Checkbox from '@material-ui/core/Checkbox'
|
|||
import Close from '@material-ui/icons/Close'
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import Link from '~/components/layout/Link'
|
||||
import { WELCOME_ADDRESS } from '~/routes/routes'
|
||||
import Button from '~/components/layout/Button'
|
||||
import { primary, mainFontFamily } from '~/theme/variables'
|
||||
import saveCookiesToStorage from '~/logic/cookies/store/actions/saveCookiesToStorage'
|
||||
import type { CookiesProps } from '~/logic/cookies/store/model/cookie'
|
||||
import { cookiesSelector } from '~/logic/cookies/store/selectors'
|
||||
import { loadFromStorage, saveToStorage } from '~/utils/storage'
|
||||
import { COOKIES_KEY } from '~/logic/cookies/utils/cookiesStorage'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
container: {
|
||||
|
@ -68,26 +66,45 @@ const useStyles = makeStyles({
|
|||
},
|
||||
})
|
||||
|
||||
export type CookiesProps = {
|
||||
acceptedNecessary: boolean,
|
||||
acceptedAnalytics: boolean,
|
||||
}
|
||||
|
||||
const CookiesBanner = () => {
|
||||
const classes = useStyles()
|
||||
const cookiesState: CookiesProps = useSelector(cookiesSelector)
|
||||
const dispatch = useDispatch()
|
||||
const { acceptedNecessary } = cookiesState
|
||||
const showBanner = acceptedNecessary === false
|
||||
|
||||
const [showBanner, setShowBanner] = useState(false)
|
||||
const [localNecessary, setLocalNecessary] = useState(true)
|
||||
const [localAnalytics, setLocalAnalytics] = useState(false)
|
||||
|
||||
const acceptCookiesHandler = (newState: CookiesProps) => {
|
||||
dispatch(saveCookiesToStorage(newState))
|
||||
useEffect(() => {
|
||||
async function fetchCookiesFromStorage() {
|
||||
const cookiesState: CookiesProps = await loadFromStorage(COOKIES_KEY)
|
||||
if (cookiesState) {
|
||||
const { acceptedNecessary, acceptedAnalytics } = cookiesState
|
||||
setLocalAnalytics(acceptedAnalytics)
|
||||
setLocalNecessary(acceptedNecessary)
|
||||
setShowBanner(acceptedNecessary === false)
|
||||
} else {
|
||||
setShowBanner(true)
|
||||
}
|
||||
}
|
||||
fetchCookiesFromStorage()
|
||||
}, [])
|
||||
|
||||
const acceptCookiesHandler = async (newState: CookiesProps) => {
|
||||
await saveToStorage(COOKIES_KEY, newState)
|
||||
setShowBanner(false)
|
||||
}
|
||||
|
||||
const closeCookiesBannerHandler = () => {
|
||||
const closeCookiesBannerHandler = async () => {
|
||||
const newState = {
|
||||
acceptedNecessary: true,
|
||||
acceptedAnalytics: false,
|
||||
}
|
||||
dispatch(saveCookiesToStorage(newState))
|
||||
await saveToStorage(COOKIES_KEY, newState)
|
||||
setShowBanner(false)
|
||||
}
|
||||
|
||||
|
||||
|
@ -114,7 +131,7 @@ We use cookies to give you the best
|
|||
onChange={() => setLocalNecessary((prev) => !prev)}
|
||||
value={localNecessary}
|
||||
control={(
|
||||
<Checkbox />
|
||||
<Checkbox disabled />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
@ -133,7 +150,6 @@ We use cookies to give you the best
|
|||
<Button
|
||||
color="primary"
|
||||
component={Link}
|
||||
disabled={!localNecessary}
|
||||
minWidth={180}
|
||||
variant="outlined"
|
||||
onClick={() => acceptCookiesHandler({
|
||||
|
|
|
@ -1,26 +0,0 @@
|
|||
// @flow
|
||||
import type { Dispatch as ReduxDispatch } from 'redux'
|
||||
import type { GlobalState } from '~/store'
|
||||
import { loadFromStorage } from '~/utils/storage'
|
||||
import { COOKIES_KEY } from '~/logic/cookies/utils/cookiesStorage'
|
||||
import type { CookiesProps } from '~/logic/cookies/store/model/cookie'
|
||||
import { setCookiesPermissions } from '~/logic/cookies/store/actions/setCookiesPermissions'
|
||||
|
||||
const loadCookiesFromStorage = () => async (dispatch: ReduxDispatch<GlobalState>) => {
|
||||
try {
|
||||
const cookies: ?{ [string]: CookiesProps } = await loadFromStorage(COOKIES_KEY)
|
||||
|
||||
if (cookies) {
|
||||
dispatch(setCookiesPermissions(cookies))
|
||||
} else {
|
||||
dispatch(setCookiesPermissions({ acceptedAnalytics: false, acceptedNecessary: false }))
|
||||
}
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line
|
||||
console.error('Error while getting cookies from storage:', err)
|
||||
}
|
||||
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
export default loadCookiesFromStorage
|
|
@ -1,21 +0,0 @@
|
|||
// @flow
|
||||
import type { Dispatch as ReduxDispatch } from 'redux'
|
||||
import type { GlobalState } from '~/store'
|
||||
import type { CookiesProps } from '~/logic/cookies/store/model/cookie'
|
||||
import { setCookiesPermissions } from '~/logic/cookies/store/actions/setCookiesPermissions'
|
||||
import { saveToStorage } from '~/utils/storage'
|
||||
import { COOKIES_KEY } from '~/logic/cookies/utils/cookiesStorage'
|
||||
|
||||
const saveCookiesToStorage = (cookies: CookiesProps) => async (dispatch: ReduxDispatch<GlobalState>) => {
|
||||
try {
|
||||
await saveToStorage(COOKIES_KEY, cookies)
|
||||
dispatch(setCookiesPermissions(cookies))
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line
|
||||
console.error('Error saving cookies to the localStorage:', err)
|
||||
}
|
||||
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
export default saveCookiesToStorage
|
|
@ -1,12 +0,0 @@
|
|||
// @flow
|
||||
import { Map } from 'immutable'
|
||||
import { createAction } from 'redux-actions'
|
||||
import type { Cookie, CookiesProps } from '~/logic/cookies/store/model/cookie'
|
||||
|
||||
export const SET_COOKIES_PERMISSIONS = 'SET_COOKIES_PERMISSIONS'
|
||||
|
||||
// eslint-disable-next-line max-len
|
||||
export const setCookiesPermissions = createAction<string, *>(
|
||||
SET_COOKIES_PERMISSIONS,
|
||||
(cookies: Map<string, Cookie>): CookiesProps => cookies,
|
||||
)
|
|
@ -1,9 +0,0 @@
|
|||
// @flow
|
||||
import type { RecordOf } from 'immutable'
|
||||
|
||||
export type CookiesProps = {
|
||||
acceptedNecessary: boolean,
|
||||
acceptedAnalytics: boolean,
|
||||
}
|
||||
|
||||
export type Cookie = RecordOf<CookiesProps>
|
|
@ -1,25 +0,0 @@
|
|||
// @flow
|
||||
import { Map } from 'immutable'
|
||||
import { handleActions, type ActionType } from 'redux-actions'
|
||||
import type { Cookie } from '~/logic/cookies/store/model/cookie'
|
||||
import { SET_COOKIES_PERMISSIONS } from '../actions/setCookiesPermissions'
|
||||
import type { State } from '~/logic/tokens/store/reducer/tokens'
|
||||
|
||||
export const COOKIE_REDUCER_ID = 'cookies'
|
||||
|
||||
export type CookieReducerState = Map<string, Map<string, Cookie>>
|
||||
|
||||
export default handleActions<State, *>(
|
||||
{
|
||||
[SET_COOKIES_PERMISSIONS]: (state: State, action: ActionType<Function>): State => {
|
||||
const { acceptedNecessary, acceptedAnalytics } = action.payload
|
||||
|
||||
const newState = state.withMutations((mutableState) => {
|
||||
mutableState.set('acceptedNecessary', acceptedNecessary)
|
||||
mutableState.set('acceptedAnalytics', acceptedAnalytics)
|
||||
})
|
||||
return newState
|
||||
},
|
||||
},
|
||||
Map(),
|
||||
)
|
|
@ -1,5 +0,0 @@
|
|||
// @flow
|
||||
import { type GlobalState } from '~/store'
|
||||
import { COOKIE_REDUCER_ID } from '~/logic/cookies/store/reducer/cookies'
|
||||
|
||||
export const cookiesSelector = (state: GlobalState) => state[COOKIE_REDUCER_ID].toJS()
|
|
@ -1,2 +0,0 @@
|
|||
// @flow
|
||||
export const COOKIES_KEY = 'COOKIES'
|
Loading…
Reference in New Issue