refactor: extracted some props to a context

Author: jaybuidl

web/src/app.tsx

@@ -14,25 +14,28 @@ import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
 import DisputeTemplateView from "./pages/DisputeTemplateView";
+import MenuProvider from "./context/MenuProvider";
 
 const App: React.FC = () => {
   return (
     <StyledComponentsProvider>
       <QueryClientProvider>
         <RefetchOnBlock />
         <Web3Provider>
-          <IsListProvider>
-            <SentryRoutes>
-              <Route path="/" element={<Layout />}>
-                <Route index element={<Home />} />
-                <Route path="cases/*" element={<Cases />} />
-                <Route path="courts/*" element={<Courts />} />
-                <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
-                <Route path="disputeTemplate" element={<DisputeTemplateView />} />
-                <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
-              </Route>
-            </SentryRoutes>
-          </IsListProvider>
+          <MenuProvider>
+            <IsListProvider>
+              <SentryRoutes>
+                <Route path="/" element={<Layout />}>
+                  <Route index element={<Home />} />
+                  <Route path="cases/*" element={<Cases />} />
+                  <Route path="courts/*" element={<Courts />} />
+                  <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
+                  <Route path="disputeTemplate" element={<DisputeTemplateView />} />
+                  <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+                </Route>
+              </SentryRoutes>
+            </IsListProvider>
+          </MenuProvider>
         </Web3Provider>
       </QueryClientProvider>
     </StyledComponentsProvider>

web/src/context/IsListProvider.tsx

@@ -9,7 +9,7 @@ interface IIsListProvider {
 const Context = createContext<IIsListProvider>({
   isList: false,
   setIsList: () => {
-    //
+    // nop
   },
 });
 

web/src/context/MenuProvider.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, useContext } from "react";
+import { useToggle } from "react-use";
+
+interface IMenuProvider {
+  isDappListOpen: boolean;
+  toggleIsDappListOpen: (nextValue?: any) => void;
+
+  isHelpOpen: boolean;
+  toggleIsHelpOpen: (nextValue?: any) => void;
+
+  isSettingsOpen: boolean;
+  toggleIsSettingsOpen: (nextValue?: any) => void;
+}
+
+const nop = () => {
+  // nop
+};
+
+const Context = createContext<IMenuProvider>({
+  isDappListOpen: false,
+  toggleIsDappListOpen: nop,
+  isHelpOpen: false,
+  toggleIsHelpOpen: nop,
+  isSettingsOpen: false,
+  toggleIsSettingsOpen: nop,
+});
+
+const MenuProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
+  const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
+  const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+
+  const value = {
+    isDappListOpen,
+    toggleIsDappListOpen,
+    isHelpOpen,
+    toggleIsHelpOpen,
+    isSettingsOpen,
+    toggleIsSettingsOpen,
+  };
+
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};
+
+export const useMenu = () => useContext(Context);
+
+export default MenuProvider;

web/src/layout/Header/DesktopHeader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
+import { useMenu } from "../../context/MenuProvider";
 import { landscapeStyle } from "styles/landscapeStyle";
-import { useToggle } from "react-use";
 import { Link } from "react-router-dom";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
@@ -76,9 +76,7 @@ const ConnectWalletContainer = styled.div`
 `;
 
 const DesktopHeader = () => {
-  const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
-  const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
-  const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const { isDappListOpen, toggleIsDappListOpen, isSettingsOpen, isHelpOpen } = useMenu();
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
   return (
@@ -107,15 +105,15 @@ const DesktopHeader = () => {
           <ConnectWalletContainer>
             <ConnectWallet />
           </ConnectWalletContainer>
-          <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
+          <Menu />
         </RightSide>
       </Container>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
           <Overlay />
-          {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
-          {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}
+          {isDappListOpen && <DappList />}
+          {isHelpOpen && <Help />}
+          {isSettingsOpen && <Settings />}
         </PopupContainer>
       )}
     </>

web/src/layout/Header/navbar/DappList.tsx

@@ -12,6 +12,7 @@ import POH from "svgs/icons/poh-image.png";
 import Vea from "svgs/icons/vea.svg";
 import Tokens from "svgs/icons/tokens.svg";
 import Product from "./Product";
+import { useMenu } from "../../../context/MenuProvider";
 
 const Header = styled.h1`
   display: flex;
@@ -117,12 +118,9 @@ const ITEMS = [
   },
 ];
 
-interface IDappList {
-  toggleIsDappListOpen: () => void;
-}
-
-const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
+const DappList: React.FC = () => {
   const containerRef = useRef(null);
+  const { toggleIsDappListOpen } = useMenu();
   useFocusOutside(containerRef, () => {
     toggleIsDappListOpen();
   });

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -8,7 +8,7 @@ import Bug from "svgs/icons/bug.svg";
 import ETH from "svgs/icons/eth.svg";
 import Faq from "svgs/menu-icons/help.svg";
 import Telegram from "svgs/socialmedia/telegram.svg";
-import { IHelp } from "..";
+import { useMenu } from "../../../../context/MenuProvider";
 
 const Container = styled.div`
   display: flex;
@@ -97,8 +97,9 @@ const ITEMS = [
   },
 ];
 
-const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
+const Help: React.FC = () => {
   const containerRef = useRef(null);
+  const { toggleIsHelpOpen } = useMenu();
   useFocusOutside(containerRef, () => {
     toggleIsHelpOpen();
   });

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx

@@ -6,7 +6,7 @@ import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase";
 import FormContact from "./FormContact";
 import messages from "../../../../../../../consts/eip712-messages";
 import { EMAIL_REGEX, TELEGRAM_REGEX } from "../../../../../../../consts/index";
-import { ISettings } from "../../../index";
+import { useMenu } from "../../../../../../../context/MenuProvider";
 
 const FormContainer = styled.form`
   position: relative;
@@ -27,13 +27,14 @@ const FormContactContainer = styled.div`
   margin-bottom: 24px;
 `;
 
-const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+const FormContactDetails: React.FC = () => {
   const [telegramInput, setTelegramInput] = useState<string>("");
   const [emailInput, setEmailInput] = useState<string>("");
   const [telegramIsValid, setTelegramIsValid] = useState<boolean>(false);
   const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
   const { data: walletClient } = useWalletClient();
   const { address } = useAccount();
+  const { toggleIsSettingsOpen } = useMenu();
 
   // TODO: after the user is authenticated, retrieve the current email/telegram from the database and populate the form
 

web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components";
-import { ISettings } from "../../../index";
 
 import FormContactDetails from "./FormContactDetails";
 import { EnsureChain } from "components/EnsureChain";
+import { useMenu } from "../../../../../../context/MenuProvider";
 
 const Container = styled.div`
   display: flex;
@@ -33,13 +33,13 @@ const EnsureChainContainer = styled.div`
   padding-bottom: 16px;
 `;
 
-const NotificationSettings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+const NotificationSettings: React.FC = () => {
   return (
     <EnsureChainContainer>
       <EnsureChain>
         <Container>
           <HeaderNotifs />
-          <FormContactDetails toggleIsSettingsOpen={toggleIsSettingsOpen} />
+          <FormContactDetails />
         </Container>
       </EnsureChain>
     </EnsureChainContainer>

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -6,7 +6,7 @@ import General from "./General";
 import NotificationSettings from "./Notifications";
 import { useFocusOutside } from "hooks/useFocusOutside";
 import { Overlay } from "components/Overlay";
-import { ISettings } from "../../index";
+import { useMenu } from "../../../../../context/MenuProvider";
 
 const Container = styled.div`
   display: flex;
@@ -60,9 +60,10 @@ const TABS = [
   },
 ];
 
-const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+const Settings: React.FC = () => {
   const [currentTab, setCurrentTab] = useState<number>(0);
   const containerRef = useRef(null);
+  const { toggleIsSettingsOpen } = useMenu();
   useFocusOutside(containerRef, () => toggleIsSettingsOpen());
 
   return (
@@ -77,7 +78,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
             setCurrentTab(n);
           }}
         />
-        {currentTab === 0 ? <General /> : <NotificationSettings toggleIsSettingsOpen={toggleIsSettingsOpen} />}
+        {currentTab === 0 ? <General /> : <NotificationSettings />}
       </Container>
     </>
   );

web/src/layout/Header/navbar/Menu/index.tsx

@@ -8,7 +8,7 @@ import LightModeIcon from "svgs/menu-icons/light-mode.svg";
 import NotificationsIcon from "svgs/menu-icons/notifications.svg";
 import SettingsIcon from "svgs/menu-icons/settings.svg";
 import { useToggleTheme } from "hooks/useToggleThemeContext";
-import { IHelp, ISettings } from "..";
+import { useMenu } from "../../../../context/MenuProvider";
 
 const Container = styled.div`
   display: flex;
@@ -53,8 +53,9 @@ const ButtonContainer = styled.div`
   )}
 `;
 
-const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsOpen }) => {
+const Menu: React.FC = () => {
   const [theme, toggleTheme] = useToggleTheme();
+  const { toggleIsSettingsOpen, toggleIsHelpOpen } = useMenu();
   const isLightTheme = theme === "light";
 
   const buttons = [

web/src/layout/Header/navbar/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { useToggle } from "react-use";
+import { useMenu } from "../../../context/MenuProvider";
 import { useAccount } from "wagmi";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 import { useOpenContext } from "../MobileHeader";
@@ -53,23 +53,9 @@ const DisconnectWalletButtonContainer = styled.div`
   align-items: center;
 `;
 
-export interface ISettings {
-  toggleIsSettingsOpen: () => void;
-}
-
-export interface IHelp {
-  toggleIsHelpOpen: () => void;
-}
-
-export interface IDappList {
-  toggleIsDappListOpen: () => void;
-}
-
 const NavBar: React.FC = () => {
   const { isConnected } = useAccount();
-  const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
-  const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
-  const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const { isDappListOpen, toggleIsDappListOpen, isSettingsOpen, isHelpOpen } = useMenu();
   const { isOpen } = useOpenContext();
   useLockOverlayScroll(isOpen);
 
@@ -95,16 +81,16 @@ const NavBar: React.FC = () => {
           )}
         </WalletContainer>
         <hr />
-        <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
+        <Menu />
         <br />
         <Debug />
       </Container>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
           <Overlay />
-          {isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
-          {isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}
+          {isDappListOpen && <DappList />}
+          {isHelpOpen && <Help />}
+          {isSettingsOpen && <Settings />}
         </PopupContainer>
       )}
     </>