Removes redux for cookiesStorage

This commit is contained in:
apane 2019-11-26 10:37:16 -03:00
parent 3b063d3ee8
commit 9c6235f8db
8 changed files with 31 additions and 115 deletions

View File

@ -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({

View File

@ -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

View File

@ -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

View File

@ -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,
)

View File

@ -1,9 +0,0 @@
// @flow
import type { RecordOf } from 'immutable'
export type CookiesProps = {
acceptedNecessary: boolean,
acceptedAnalytics: boolean,
}
export type Cookie = RecordOf<CookiesProps>

View File

@ -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(),
)

View File

@ -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()

View File

@ -1,2 +0,0 @@
// @flow
export const COOKIES_KEY = 'COOKIES'