From 6a5958e2e26207aa32020e2f64938a9bfbe2b36b Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@parity.io>
Date: Wed, 6 Mar 2024 12:54:52 +0700
Subject: [PATCH] redirect to manage tab from context menu

---
 src/library/ContextMenu/Wrappers.ts |  2 +-
 src/library/Page/provider/index.tsx | 23 +++++++++++++++++++----
 src/library/Tabs/Menu.tsx           | 29 -----------------------------
 src/library/Tabs/Tab.tsx            | 18 +++++++++++++++---
 src/library/Tabs/TabMenu.tsx        | 28 ++++++++++++++++++++++++++++
 5 files changed, 63 insertions(+), 37 deletions(-)
 delete mode 100644 src/library/Tabs/Menu.tsx
 create mode 100644 src/library/Tabs/TabMenu.tsx

diff --git a/src/library/ContextMenu/Wrappers.ts b/src/library/ContextMenu/Wrappers.ts
index 0221e916..6a44d297 100644
--- a/src/library/ContextMenu/Wrappers.ts
+++ b/src/library/ContextMenu/Wrappers.ts
@@ -26,7 +26,7 @@ export const ListWrapper = styled.ul`
   list-style: none;
   display: flex;
   flex-direction: column;
-  padding: 0 0.35rem 0.35rem 0.35rem;
+  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
   margin: 0;
   width: 100%;
 
diff --git a/src/library/Page/provider/index.tsx b/src/library/Page/provider/index.tsx
index a0c81d51..216b3a61 100644
--- a/src/library/Page/provider/index.tsx
+++ b/src/library/Page/provider/index.tsx
@@ -7,6 +7,9 @@ import type { SectionContextInterface, SectionContextProps } from './types';
 import * as local from './Local';
 import { useEffectIgnoreInitial } from '@w3ux/hooks';
 import { useTabs } from 'contexts/Tabs';
+import { extractUrlValue, removeVarFromUrlHash } from '@w3ux/utils';
+import { useLocation } from 'react-router-dom';
+import { useMenu } from 'contexts/Menu';
 
 export const SectionContext = createContext<SectionContextInterface>(
   defaultSectionContext
@@ -15,6 +18,8 @@ export const SectionContext = createContext<SectionContextInterface>(
 export const useSection = () => useContext(SectionContext);
 
 export const SectionProvider = ({ pageId, children }: SectionContextProps) => {
+  const { open: menuOpen } = useMenu();
+  const { hash } = useLocation();
   const { activeTabId } = useTabs();
 
   // The active section of the page.
@@ -31,11 +36,21 @@ export const SectionProvider = ({ pageId, children }: SectionContextProps) => {
   };
 
   // Updates active section when active tab changes.
+  const redirectHash = extractUrlValue('redirect');
+
   useEffectIgnoreInitial(() => {
-    setActiveSection(
-      local.getActiveSection(pageId, activeTabId) || defaultActiveSection
-    );
-  }, [pageId, activeTabId]);
+    if (redirectHash === 'manage-tab') {
+      if (!menuOpen) {
+        console.log(redirectHash, hash);
+        setActiveSection(1, false);
+        removeVarFromUrlHash('redirect');
+      }
+    } else {
+      setActiveSection(
+        local.getActiveSection(pageId, activeTabId) || defaultActiveSection
+      );
+    }
+  }, [pageId, activeTabId, menuOpen]);
 
   return (
     <SectionContext.Provider
diff --git a/src/library/Tabs/Menu.tsx b/src/library/Tabs/Menu.tsx
deleted file mode 100644
index 2f92f0d6..00000000
--- a/src/library/Tabs/Menu.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { faCheck, faCode } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ListWrapper } from 'library/ContextMenu/Wrappers';
-
-export const Menu = () => (
-  <ListWrapper>
-    {[1, 2, 3, 4].map((item) => (
-      <li key={item}>
-        <div className="inner">
-          <div>
-            <FontAwesomeIcon icon={faCheck} transform="shrink-2" />
-          </div>
-          <div>
-            <button
-              onClick={() => {
-                /* Do nothing */
-              }}
-            >
-              Menu Item
-            </button>
-          </div>
-          <div>
-            <FontAwesomeIcon icon={faCode} transform="shrink-2" />
-          </div>
-        </div>
-      </li>
-    ))}
-  </ListWrapper>
-);
diff --git a/src/library/Tabs/Tab.tsx b/src/library/Tabs/Tab.tsx
index d3e15143..9222ff51 100644
--- a/src/library/Tabs/Tab.tsx
+++ b/src/library/Tabs/Tab.tsx
@@ -8,7 +8,7 @@ import { useTabs } from 'contexts/Tabs';
 import { useMenu } from 'contexts/Menu';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
-import { Menu } from './Menu';
+import { TabMenu } from './TabMenu';
 import type { TabProps } from './types';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -18,6 +18,7 @@ import {
 } from 'contexts/Tabs/defaults';
 import { useApi } from 'contexts/Api';
 import { ConnectionIcon } from './ConectionIcon';
+import { useNavigate } from 'react-router-dom';
 
 export const Tab = ({ index, id, name, initial = false }: TabProps) => {
   const {
@@ -33,8 +34,9 @@ export const Tab = ({ index, id, name, initial = false }: TabProps) => {
     setActiveTabIndex,
     addInstantiatedId,
   } = useTabs();
-  const { openMenu } = useMenu();
+  const navigate = useNavigate();
   const { getApiStatus } = useApi();
+  const { openMenu, closeMenu } = useMenu();
 
   const {
     listeners,
@@ -84,7 +86,17 @@ export const Tab = ({ index, id, name, initial = false }: TabProps) => {
   // Handle context menu when tab is right clicked.
   const handleTabContextMenu = (ev: MouseEvent): void => {
     ev.preventDefault();
-    openMenu(ev, <Menu />);
+    openMenu(
+      ev,
+      <TabMenu
+        tabId={id}
+        onSettings={() => {
+          setActiveTabId(id);
+          navigate(`?redirect=manage-tab`);
+          closeMenu();
+        }}
+      />
+    );
   };
 
   // Context menu ref.
diff --git a/src/library/Tabs/TabMenu.tsx b/src/library/Tabs/TabMenu.tsx
new file mode 100644
index 00000000..5c9797ea
--- /dev/null
+++ b/src/library/Tabs/TabMenu.tsx
@@ -0,0 +1,28 @@
+import { faBarsProgress } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ListWrapper, SelectListWrapper } from 'library/ContextMenu/Wrappers';
+
+export const TabMenu = ({
+  // tabId,
+  onSettings,
+}: {
+  tabId: number;
+  onSettings: () => void;
+}) => (
+  <SelectListWrapper>
+    <ListWrapper>
+      <li>
+        <button onClick={() => onSettings()}></button>
+        <div className="inner">
+          <div className="none"></div>
+          <div>
+            <h3>Manage Tab</h3>
+          </div>
+          <div>
+            <FontAwesomeIcon icon={faBarsProgress} transform="shrink-2" />
+          </div>
+        </div>
+      </li>
+    </ListWrapper>
+  </SelectListWrapper>
+);