refactor: localStorage, fixes

src/contexts/Tabs/types.ts

@@ -9,7 +9,6 @@ export type Tabs = Tab[];
 export interface Tab {
   id: number;
   connectFrom: ConnectFrom;
-  // TODO: abstract into directory or custom node url.
   chain:
     | {
         id: ChainId;

src/library/Page/provider/Local.ts

@@ -13,14 +13,15 @@ export const getActiveSection = (
   pageId: PageId,
   tabId: number
 ): number | undefined => {
-  const result = localStorageOrDefault(
-    `pageSection:${tabId}:${pageId}`,
-    undefined,
-    true
-  ) as number | undefined;
+  const result = localStorageOrDefault(`pageSections`, undefined, true) as
+    | Record<string, number>
+    | undefined;
 
   if (result) {
-    return result as number;
+    const maybePageSection = result[`${tabId}:${pageId}`];
+    if (maybePageSection) {
+      return maybePageSection as number;
+    }
   }
 };
 
@@ -30,15 +31,25 @@ export const getSectionRedirect = (
   pageId: PageId,
   tabId: number
 ): number | undefined => {
-  const result = localStorageOrDefault(
-    `pageRedirect:${tabId}:${pageId}`,
-    undefined,
-    true
-  ) as number | undefined;
+  const result = localStorageOrDefault(`pageRedirects`, undefined, true) as
+    | Record<string, number>
+    | undefined;
 
   if (result) {
-    localStorage.removeItem(`pageRedirect:${tabId}:${pageId}`);
-    return result as number;
+    const maybePageRedirect = result[`${tabId}:${pageId}`];
+    // If page redirect exists, remove it before returning.
+    if (maybePageRedirect) {
+      const updated = { ...result };
+      delete updated[`${tabId}:${pageId}`];
+
+      if (Object.keys(updated).length === 0) {
+        localStorage.removeItem(`pageRedirects`);
+      } else {
+        localStorage.setItem(`pageRedirects`, JSON.stringify(updated));
+      }
+
+      return maybePageRedirect as number;
+    }
   }
 };
 
@@ -52,7 +63,16 @@ export const setActiveSection = (
   tabId: number,
   value: number
 ) => {
-  localStorage.setItem(`pageSection:${tabId}:${pageId}`, JSON.stringify(value));
+  const current =
+    (localStorageOrDefault(`pageSections`, undefined, true) as
+      | Record<string, number>
+      | undefined) || {};
+
+  const updated = {
+    ...current,
+    [`${tabId}:${pageId}`]: value,
+  };
+  localStorage.setItem(`pageSections`, JSON.stringify(updated));
 };
 
 // Sets a temporary redirect to local storage.
@@ -61,8 +81,14 @@ export const setSectionRedirect = (
   tabId: number,
   value: number
 ) => {
-  localStorage.setItem(
-    `pageRedirect:${tabId}:${pageId}`,
-    JSON.stringify(value)
-  );
+  const current =
+    (localStorageOrDefault(`pageRedirects`, undefined, true) as
+      | Record<string, number>
+      | undefined) || {};
+
+  const updated = {
+    ...current,
+    [`${tabId}:${pageId}`]: value,
+  };
+  localStorage.setItem(`pageRedirects`, JSON.stringify(updated));
 };

src/library/Tabs/Tab.tsx

@@ -93,7 +93,7 @@ export const Tab = ({ index, id, name, initial = false }: TabProps) => {
         tabId={id}
         onSettings={() => {
           setActiveTabId(id);
-          localSections.setSectionRedirect('default', id, 1);
+          localSections.setSectionRedirect('default', id, 3);
           incrementRedirectCounter();
           closeMenu();
         }}

src/screens/Default/Menu/index.tsx

@@ -43,8 +43,8 @@ export const ChainMenu = () => {
       <div className="config">
         <ButtonWithTooltip
           tooltipText="Manage Tab"
-          active={activeSection === 1}
-          onClick={() => setActiveSection(1, false)}
+          active={activeSection === 3}
+          onClick={() => setActiveSection(3, false)}
           icon={faBarsProgress}
           disabled={false}
           iconTransform="shrink-1"

src/screens/Default/index.tsx

@@ -27,9 +27,9 @@ export const Default = () => {
   return (
     <>
       {activeSection === 0 && firstSection}
-      {activeSection === 2 && <ChainState />}
-      {activeSection === 3 && <Extrinsics />}
-      {activeSection === 1 && <ManageTab />}
+      {activeSection === 1 && <ChainState />}
+      {activeSection === 2 && <Extrinsics />}
+      {activeSection === 3 && <ManageTab />}
     </>
   );
 };

src/screens/Settings/WorkspaceSettings/Utils.ts

@@ -4,7 +4,6 @@
 import type { AnyJson } from '@w3ux/utils/types';
 
 // The supported localStorage keys for import and export.
-// TODO: Reformat local pageSection keys to host in one `pageSections` key.
 const SUPPORTED_WORKSPACE_LOCAL_STORAGE_KEYS = [
   'activeTabs',
   'activeTabId',