From ba0f06f381e4d50509e503c5f2bfd089884ba4f5 Mon Sep 17 00:00:00 2001 From: pal-sig <88981777+pal-sig@users.noreply.github.com> Date: Fri, 10 Dec 2021 11:26:20 +0530 Subject: [PATCH] fix(BUG): localstorage permission is updated (#477) --- frontend/src/api/browser/localstorage/get.ts | 7 +++- .../src/api/browser/localstorage/remove.ts | 9 ++++-- frontend/src/api/browser/localstorage/set.ts | 9 ++++-- .../Header/DateTimeSelection/index.tsx | 32 ++++++++++++------- frontend/src/container/MetricsTable/index.tsx | 6 ++-- frontend/src/pages/Metrics/index.tsx | 3 +- .../src/store/actions/app/userLoggedIn.ts | 3 +- frontend/src/store/reducers/app.ts | 3 +- frontend/src/utils/app.ts | 3 +- 9 files changed, 52 insertions(+), 23 deletions(-) diff --git a/frontend/src/api/browser/localstorage/get.ts b/frontend/src/api/browser/localstorage/get.ts index 675d6995c4..e7d5e3da91 100644 --- a/frontend/src/api/browser/localstorage/get.ts +++ b/frontend/src/api/browser/localstorage/get.ts @@ -1,5 +1,10 @@ const get = (key: string): string | null => { - return localStorage.getItem(key); + try { + const value = localStorage.getItem(key); + return value; + } catch (e) { + return ''; + } }; export default get; diff --git a/frontend/src/api/browser/localstorage/remove.ts b/frontend/src/api/browser/localstorage/remove.ts index 6e0546ff1e..b1c5c40265 100644 --- a/frontend/src/api/browser/localstorage/remove.ts +++ b/frontend/src/api/browser/localstorage/remove.ts @@ -1,5 +1,10 @@ -const remove = (key: string): void => { - window.localStorage.removeItem(key); +const remove = (key: string): boolean => { + try { + window.localStorage.removeItem(key); + return true; + } catch (e) { + return false; + } }; export default remove; diff --git a/frontend/src/api/browser/localstorage/set.ts b/frontend/src/api/browser/localstorage/set.ts index b0910a0c96..1ce9f313b6 100644 --- a/frontend/src/api/browser/localstorage/set.ts +++ b/frontend/src/api/browser/localstorage/set.ts @@ -1,5 +1,10 @@ -const set = (key: string, value: string): void => { - localStorage.setItem(key, value); +const set = (key: string, value: string): boolean => { + try { + localStorage.setItem(key, value); + return true; + } catch (e) { + return false; + } }; export default set; diff --git a/frontend/src/container/Header/DateTimeSelection/index.tsx b/frontend/src/container/Header/DateTimeSelection/index.tsx index 4494d442cb..c6c5ff4015 100644 --- a/frontend/src/container/Header/DateTimeSelection/index.tsx +++ b/frontend/src/container/Header/DateTimeSelection/index.tsx @@ -4,8 +4,8 @@ import React, { useCallback, useEffect, useState } from 'react'; import { getDefaultOption, getOptions, Time } from './config'; import { Container, Form, FormItem } from './styles'; const { Option } = DefaultSelect; -import get from 'api/browser/localstorage/get'; -import set from 'api/browser/localstorage/set'; +import getLocalStorageKey from 'api/browser/localstorage/get'; +import setLocalStorageKey from 'api/browser/localstorage/set'; import { LOCAL_STORAGE } from 'constants/localStorage'; import getTimeString from 'lib/getTimeString'; import moment from 'moment'; @@ -32,8 +32,8 @@ const DateTimeSelection = ({ const searchStartTime = params.get('startTime'); const searchEndTime = params.get('endTime'); - const localstorageStartTime = get('startTime'); - const localstorageEndTime = get('endTime'); + const localstorageStartTime = getLocalStorageKey('startTime'); + const localstorageEndTime = getLocalStorageKey('endTime'); const getTime = useCallback((): [number, number] | undefined => { if (searchEndTime && searchStartTime) { @@ -83,10 +83,10 @@ const DateTimeSelection = ({ const getDefaultTime = (pathName: string): Time => { const defaultSelectedOption = getDefaultOption(pathName); - const routes = get(LOCAL_STORAGE.METRICS_TIME_IN_DURATION); + const routes = getLocalStorageKey(LOCAL_STORAGE.METRICS_TIME_IN_DURATION); if (routes !== null) { - const routesObject = JSON.parse(routes); + const routesObject = JSON.parse(routes || '{}'); const selectedTime = routesObject[pathName]; if (selectedTime) { @@ -102,7 +102,7 @@ const DateTimeSelection = ({ ); const updateLocalStorageForRoutes = (value: Time): void => { - const preRoutes = get(LOCAL_STORAGE.METRICS_TIME_IN_DURATION); + const preRoutes = getLocalStorageKey(LOCAL_STORAGE.METRICS_TIME_IN_DURATION); if (preRoutes !== null) { const preRoutesObject = JSON.parse(preRoutes); @@ -111,7 +111,10 @@ const DateTimeSelection = ({ }; preRoute[location.pathname] = value; - set(LOCAL_STORAGE.METRICS_TIME_IN_DURATION, JSON.stringify(preRoute)); + setLocalStorageKey( + LOCAL_STORAGE.METRICS_TIME_IN_DURATION, + JSON.stringify(preRoute), + ); } }; @@ -194,8 +197,8 @@ const DateTimeSelection = ({ startTimeMoment?.toDate().getTime() || 0, endTimeMoment?.toDate().getTime() || 0, ]); - set('startTime', startTimeMoment.toString()); - set('endTime', endTimeMoment.toString()); + setLocalStorageKey('startTime', startTimeMoment.toString()); + setLocalStorageKey('endTime', endTimeMoment.toString()); updateLocalStorageForRoutes('custom'); } } @@ -203,10 +206,15 @@ const DateTimeSelection = ({ // this is triggred when we change the routes and based on that we are changing the default options useEffect(() => { - const metricsTimeDuration = get(LOCAL_STORAGE.METRICS_TIME_IN_DURATION); + const metricsTimeDuration = getLocalStorageKey( + LOCAL_STORAGE.METRICS_TIME_IN_DURATION, + ); if (metricsTimeDuration === null) { - set(LOCAL_STORAGE.METRICS_TIME_IN_DURATION, JSON.stringify({})); + setLocalStorageKey( + LOCAL_STORAGE.METRICS_TIME_IN_DURATION, + JSON.stringify({}), + ); } const currentRoute = location.pathname; diff --git a/frontend/src/container/MetricsTable/index.tsx b/frontend/src/container/MetricsTable/index.tsx index 153176b35d..275d649aa5 100644 --- a/frontend/src/container/MetricsTable/index.tsx +++ b/frontend/src/container/MetricsTable/index.tsx @@ -10,10 +10,12 @@ import MetricReducer from 'types/reducer/metrics'; import SkipBoardModal from './SkipOnBoardModal'; import { Container, Name } from './styles'; +import localStorageGet from 'api/browser/localstorage/get'; +import localStorageSet from 'api/browser/localstorage/set'; const Metrics = (): JSX.Element => { const [skipOnboarding, setSkipOnboarding] = useState( - localStorage.getItem(SKIP_ONBOARDING) === 'true', + localStorageGet(SKIP_ONBOARDING) === 'true', ); const { services, loading, error } = useSelector( @@ -21,7 +23,7 @@ const Metrics = (): JSX.Element => { ); const onContinueClick = (): void => { - localStorage.setItem(SKIP_ONBOARDING, 'true'); + localStorageSet(SKIP_ONBOARDING, 'true'); setSkipOnboarding(true); }; diff --git a/frontend/src/pages/Metrics/index.tsx b/frontend/src/pages/Metrics/index.tsx index a6cb2dce3d..dce97b84cf 100644 --- a/frontend/src/pages/Metrics/index.tsx +++ b/frontend/src/pages/Metrics/index.tsx @@ -10,6 +10,7 @@ import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { GlobalReducer } from 'types/reducer/globalTime'; import MetricReducer from 'types/reducer/metrics'; +import getLocalStorageKey from 'api/browser/localstorage/get'; const Metrics = ({ getService }: MetricsProps): JSX.Element => { const { minTime, maxTime, loading, selectedTime } = useSelector< @@ -20,7 +21,7 @@ const Metrics = ({ getService }: MetricsProps): JSX.Element => { (state) => state.metrics, ); - const isSkipped = localStorage.getItem(SKIP_ONBOARDING) === 'true'; + const isSkipped = getLocalStorageKey(SKIP_ONBOARDING) === 'true'; useEffect(() => { if (loading === false) { diff --git a/frontend/src/store/actions/app/userLoggedIn.ts b/frontend/src/store/actions/app/userLoggedIn.ts index 5476e54a7d..3f03415b72 100644 --- a/frontend/src/store/actions/app/userLoggedIn.ts +++ b/frontend/src/store/actions/app/userLoggedIn.ts @@ -1,10 +1,11 @@ import { IS_LOGGED_IN } from 'constants/auth'; import { Dispatch } from 'redux'; import AppActions from 'types/actions'; +import setLocalStorageKey from 'api/browser/localstorage/set'; export const UserLoggedIn = (): ((dispatch: Dispatch) => void) => { return (dispatch: Dispatch): void => { - localStorage.setItem(IS_LOGGED_IN, 'yes'); + setLocalStorageKey(IS_LOGGED_IN, 'yes'); dispatch({ type: 'LOGGED_IN', diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts index ad757a14ca..4516f76fed 100644 --- a/frontend/src/store/reducers/app.ts +++ b/frontend/src/store/reducers/app.ts @@ -6,10 +6,11 @@ import { TOGGLE_SETTINGS_TABS, } from 'types/actions/app'; import InitialValueTypes from 'types/reducer/app'; +import getLocalStorageKey from 'api/browser/localstorage/get'; const InitialValue: InitialValueTypes = { isDarkMode: true, - isLoggedIn: localStorage.getItem(IS_LOGGED_IN) === 'yes', + isLoggedIn: getLocalStorageKey(IS_LOGGED_IN) === 'yes', settingsActiveTab: 'General', }; diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts index e183a806c1..f538e4597c 100644 --- a/frontend/src/utils/app.ts +++ b/frontend/src/utils/app.ts @@ -1,5 +1,6 @@ import { SKIP_ONBOARDING } from 'constants/onboarding'; +import getLocalStorage from 'api/browser/localstorage/get'; export const isOnboardingSkipped = (): boolean => { - return localStorage.getItem(SKIP_ONBOARDING) === 'true'; + return getLocalStorage(SKIP_ONBOARDING) === 'true'; };