fix(BUG): localstorage permission is updated (#477)

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;

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;

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;

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;

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<AppState, MetricReducer>(
@@ -21,7 +23,7 @@ const Metrics = (): JSX.Element => {
 	);
 
 	const onContinueClick = (): void => {
-		localStorage.setItem(SKIP_ONBOARDING, 'true');
+		localStorageSet(SKIP_ONBOARDING, 'true');
 		setSkipOnboarding(true);
 	};
 

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) {

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<AppActions>) => void) => {
 	return (dispatch: Dispatch<AppActions>): void => {
-		localStorage.setItem(IS_LOGGED_IN, 'yes');
+		setLocalStorageKey(IS_LOGGED_IN, 'yes');
 
 		dispatch({
 			type: 'LOGGED_IN',

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',
 };
 

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';
 };