Make local storage namespaced

src/src/components/CommunityPopup/CommunityPopup.tsx

@@ -6,6 +6,8 @@ import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 
 import { trackEvent } from 'services/analytics';
 
+import { getItem, setItem } from 'utils/storage';
+
 import { Button, Text } from '../kit';
 
 import { ICommunityPopupProps } from './';
@@ -20,7 +22,7 @@ function CommunityPopup(props: ICommunityPopupProps) {
   let timeoutIdRef = React.useRef<number>();
 
   React.useEffect(() => {
-    const popupSeenStorage = localStorage.getItem(COMMUNITY_POPUP_SEEN);
+    const popupSeenStorage = getItem(COMMUNITY_POPUP_SEEN);
 
     if (popupSeenStorage === 'true') {
       setOpen(false);
@@ -33,12 +35,12 @@ function CommunityPopup(props: ICommunityPopupProps) {
   }, []);
 
   const onSkip = React.useCallback(() => {
-    localStorage.setItem(COMMUNITY_POPUP_SEEN, 'true');
+    setItem(COMMUNITY_POPUP_SEEN, 'true');
     setOpen(false);
   }, []);
 
   const onJoin = React.useCallback(() => {
-    localStorage.setItem(COMMUNITY_POPUP_SEEN, 'true');
+    setItem(COMMUNITY_POPUP_SEEN, 'true');
     window.open(COMMUNITY_URL, '_blank');
     trackEvent(ANALYTICS_EVENT_KEYS.sidebar.discord);
     setOpen(false);

src/src/components/SplitPane/SplitPane.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
 
+import { getItem, setItem } from 'utils/storage';
+
 import { SplitPaneProps, SplitPaneContext } from '.';
 
 import './SplitPane.scss';
@@ -41,7 +43,7 @@ function SplitPane(props: SplitPaneProps) {
         onDragEnd(endSizes);
       }
       if (useLocalStorage) {
-        localStorage.setItem(`${id}-panesSizes`, JSON.stringify(endSizes));
+        setItem(`${id}-panesSizes`, JSON.stringify(endSizes));
       }
     },
     [onDragEnd, id, useLocalStorage],
@@ -50,7 +52,7 @@ function SplitPane(props: SplitPaneProps) {
   const getSizes = React.useCallback(
     (useLocalStorage: boolean, id: string, sizes?: number[]) => {
       if (useLocalStorage) {
-        const savedSizes = localStorage.getItem(`${id}-panesSizes`);
+        const savedSizes = getItem(`${id}-panesSizes`);
         if (savedSizes) {
           return JSON.parse(savedSizes);
         }

src/src/modules/core/engine/explorer-engine/index.ts

@@ -13,6 +13,8 @@ import getQueryParamsFromState from 'modules/core/utils/getQueryParamsFromState'
 import { AimFlatObjectBase } from 'types/core/AimObjects';
 import { SequenceTypesEnum } from 'types/core/enums';
 
+import { setItem } from 'utils/storage';
+
 import createPipelineEngine, { IPipelineEngine } from '../pipeline';
 import createInstructionsEngine, { IInstructionsEngine } from '../instructions';
 import { INotificationsState, PipelineStatusEnum } from '../types';
@@ -349,7 +351,7 @@ function createEngine<TObject = any>(
     const removeHistoryListener =
       config.persist &&
       browserHistory.listen((update: Update) => {
-        localStorage.setItem(
+        setItem(
           `${basePath}Url`,
           update.location.pathname + update.location.search,
         );

src/src/modules/core/engine/visualizations/index.ts

@@ -15,6 +15,7 @@ import getUrlSearchParam from 'modules/core/utils/getUrlSearchParam';
 
 import getStateFromLocalStorage from 'utils/getStateFromLocalStorage';
 import { encode } from 'utils/encoder/encoder';
+import { removeItem, setItem } from 'utils/storage';
 
 import { ControlsConfigs } from '../explorer/state/controls';
 import { PersistenceTypesEnum } from '../types';
@@ -215,12 +216,12 @@ function createVisualizationEngine<TStore>(
 
           boxMethods.reset = () => {
             originalMethods.reset();
-            localStorage.removeItem(boxPersistenceKey);
+            removeItem(boxPersistenceKey);
           };
 
           boxMethods.update = (newValue: Partial<BoxState>) => {
             originalMethods.update(newValue);
-            localStorage.setItem(boxPersistenceKey, encode(newValue));
+            setItem(boxPersistenceKey, encode(newValue));
           };
         }
 

src/src/utils/app/updateUrlParam.ts

@@ -1,3 +1,5 @@
+import { getPrefix } from 'config/config';
+
 import getUrlWithParam from 'utils/getUrlWithParam';
 import { setItem } from 'utils/storage';
 
@@ -22,9 +24,12 @@ export default function updateUrlParam({
   }
 
   const isExistBasePath = (window as any).API_BASE_PATH !== '{{ base_path }}';
+  const hasPrefix = getPrefix() !== '/';
 
   const appId: string =
-    window.location.pathname.split('/')[isExistBasePath ? 3 : 2];
+    window.location.pathname.split('/')[
+      (isExistBasePath ? 3 : 2) + (hasPrefix ? 2 : 0)
+    ];
   if (!appId) {
     let fullURL = url;
 

src/src/utils/getStateFromLocalStorage.ts

@@ -1,7 +1,9 @@
+import { getItem } from 'utils/storage';
+
 import { decode } from './encoder/encoder';
 
 export default function getStateFromLocalStorage(key: string) {
-  const data: any = localStorage.getItem(key);
+  const data: any = getItem(key);
   if (data) {
     return JSON.parse(decode(data));
   }

src/src/utils/storage.ts

@@ -1,20 +1,22 @@
+import { getPrefix } from 'config/config';
+
 export function setItem(key: string, value: any) {
   try {
-    localStorage.setItem(key, value);
+    localStorage.setItem(getNamespacedKey(key), value);
   } catch (error) {}
 }
 
 export function getItem(key: string) {
   try {
-    return localStorage.getItem(key);
+    return localStorage.getItem(getNamespacedKey(key));
   } catch (error) {
     return null;
   }
 }
 
 export function removeItem(key: string) {
   try {
-    localStorage.removeItem(key);
+    localStorage.removeItem(getNamespacedKey(key));
   } catch (error) {}
 }
 
@@ -23,3 +25,11 @@ export function clear() {
     localStorage.clear();
   } catch (error) {}
 }
+
+function getNamespacedKey(key: string) {
+  let prefix = getPrefix();
+  if (prefix === '/') {
+    return key;
+  }
+  return prefix.replace(new RegExp('/ns/([^/]+)/'), '$1') + ':' + key;
+}