Add isPage() fn to useLinkGen() hook

src/App/App.tsx

@@ -1,12 +1,6 @@
 /** ***** Import React and Dongles *******/
 import { useContext, useEffect } from 'react';
-import {
-    Routes,
-    Route,
-    useLocation,
-    Navigate,
-    useNavigate,
-} from 'react-router-dom';
+import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
 import SnackbarComponent from '../components/Global/SnackbarComponent/SnackbarComponent';
 
 /** ***** Import JSX Files *******/
@@ -47,12 +41,11 @@ import useMediaQuery from '../utils/hooks/useMediaQuery';
 import { FlexContainer } from '../styled/Common';
 import ExampleForm from '../pages/InitPool/FormExample';
 import PointSystemPopup from '../components/Global/PointSystemPopup/PointSystemPopup';
+import { linkGenMethodsIF, useLinkGen } from '../utils/hooks/useLinkGen';
 
 /** ***** React Function *******/
 export default function App() {
     const navigate = useNavigate();
-    const location = useLocation();
-    const currentLocation = location.pathname;
 
     const {
         chat: {
@@ -75,27 +68,28 @@ export default function App() {
 
     const smallScreen = useMediaQuery('(max-width: 500px)');
 
+    // methods to determine current page occupied by the user
+    const linkGenCurrent: linkGenMethodsIF = useLinkGen();
+
     // Take away margin from left if we are on homepage or swap
     const swapBodyStyle =
-        currentLocation.startsWith('/swap') && !smallScreen
+        linkGenCurrent.current.isPage('swap') && !smallScreen
             ? 'swap-body'
             : null;
 
     // Show sidebar on all pages except for home, swap, chat, and 404
     const sidebarRender = smallScreen ? (
         <Sidebar />
     ) : (
-        currentLocation !== '/' &&
-        currentLocation !== '/swap' &&
-        currentLocation !== '/404' &&
-        currentLocation !== '/terms' &&
-        currentLocation !== '/privacy' &&
-        !currentLocation.includes('/chat') &&
-        !currentLocation.includes('/initpool') &&
-        !fullScreenChart && (
-            // isChainSupported &&
-            <Sidebar />
-        )
+        !linkGenCurrent.current.isPage(
+            'index',
+            'swap',
+            'notFound',
+            'tos',
+            'privacy',
+            'initpool',
+        ) &&
+        !fullScreenChart && <Sidebar />
     );
 
     const sidebarDislayStyle = isSidebarOpen
@@ -104,17 +98,17 @@ export default function App() {
 
     const showSidebarOrNullStyle = smallScreen
         ? sidebarDislayStyle
-        : currentLocation == '/' ||
-          currentLocation == '/swap' ||
-          currentLocation == '/404' ||
-          currentLocation == '/terms' ||
-          currentLocation == '/privacy' ||
-          currentLocation.includes('/chat') ||
-          currentLocation.startsWith('/swap')
+        : linkGenCurrent.current.isPage(
+              'index',
+              'swap',
+              'notFound',
+              'tos',
+              'privacy',
+          )
         ? 'hide_sidebar'
         : sidebarDislayStyle;
 
-    const containerStyle = currentLocation.includes('trade')
+    const containerStyle = linkGenCurrent.current.isPage('trade')
         ? 'content-container-trade'
         : 'content-container';
 
@@ -184,7 +178,7 @@ export default function App() {
                 <section
                     className={`${showSidebarOrNullStyle} ${swapBodyStyle}`}
                 >
-                    {(!currentLocation.startsWith('/swap') || smallScreen) &&
+                    {(!linkGenCurrent.current.isPage('swap') || smallScreen) &&
                         sidebarRender}
                     <Routes>
                         <Route index element={<Home />} />
@@ -358,15 +352,17 @@ export default function App() {
                 </section>
             </FlexContainer>
             <div className='footer_container'>
-                {currentLocation !== '/' &&
-                    currentLocation !== '/404' &&
-                    currentLocation !== '/terms' &&
-                    currentLocation !== '/privacy' &&
-                    !currentLocation.includes('/chat') &&
+                {!linkGenCurrent.current.isPage(
+                    'index',
+                    'notFound',
+                    'tos',
+                    'privacy',
+                ) &&
                     isChatEnabled && <ChatPanel isFullScreen={false} />}
-                {showMobileVersion && currentLocation !== '/' && (
-                    <SidebarFooter />
-                )}
+                {showMobileVersion &&
+                    !linkGenCurrent.current.isPage('index') && (
+                        <SidebarFooter />
+                    )}
             </div>
             <GlobalPopup />
             <SnackbarComponent />

src/App/hooks/useAppChain.ts

@@ -137,8 +137,10 @@ export const useAppChain = (): {
                                 // navigate to index page only if "chain" or "network" in URL
                                 linkGenIndex.navigate();
                             } else if (
-                                linkGenCurrent.currentPage === 'initpool' ||
-                                linkGenCurrent.currentPage === 'reposition'
+                                linkGenCurrent.current.isPage(
+                                    'initpool',
+                                    'reposition',
+                                )
                             ) {
                                 linkGenPool.navigate(
                                     `chain=${incomingChainFromWallet}`,
@@ -233,12 +235,9 @@ export const useAppChain = (): {
         const isPathUserAddress = isPathENS || isPathHex;
         const isPathUserXpOrLeaderboard = pathname.includes('/xp');
         const isPathOnExplore = pathname.includes('/explore');
-        if (
-            linkGenCurrent.currentPage === 'initpool' ||
-            linkGenCurrent.currentPage === 'reposition'
-        ) {
+        if (linkGenCurrent.current.isPage('initpool', 'reposition')) {
             linkGenPool.navigate(`chain=${network.chainId}`);
-        } else if (linkGenCurrent.currentPage === 'swap') {
+        } else if (linkGenCurrent.current.isPage('swap')) {
             linkGenSwap.navigate(`chain=${network.chainId}`);
         } else if (pathname.includes('chain')) {
             linkGenCurrent.navigate(`chain=${network.chainId}`);

src/contexts/TradeTableContext.tsx

@@ -166,7 +166,7 @@ export const TradeTableContextProvider = (props: {
 
     useEffect(() => {
         if (location.pathname.includes('/trade')) toggleTradeTabBasedOnRoute();
-        switch (linkGenCurrent.currentPage) {
+        switch (linkGenCurrent.current.page) {
             case 'market':
                 setCurrentPositionActive('');
                 setCurrentLimitOrderActive('');
@@ -182,7 +182,7 @@ export const TradeTableContextProvider = (props: {
             default:
                 break;
         }
-    }, [linkGenCurrent.currentPage]);
+    }, [linkGenCurrent.current.page]);
 
     const resetTable = () => {
         if (

src/utils/hooks/useLinkGen.ts

@@ -53,6 +53,7 @@ const BASE_URL_PATHS = {
     index: '',
     home: '',
     swap: '/swap',
+    trade: '/trade',
     market: '/trade/market',
     limit: '/trade/limit',
     pool: '/trade/pool',
@@ -65,6 +66,7 @@ const BASE_URL_PATHS = {
     testpage: '/testpage',
     account: '/account',
     privacy: '/privacy',
+    notFound: '/404',
 } as const;
 
 // string-literal union type of keys in `BASE_URL_PATHS`
@@ -73,16 +75,16 @@ export type pageNames = keyof typeof BASE_URL_PATHS;
 export type baseURLs = typeof BASE_URL_PATHS[pageNames];
 
 export interface linkGenMethodsIF {
-    currentPage: pageNames;
+    current: {
+        page: pageNames;
+        isPage: (...p: pageNames[]) => boolean;
+    };
     baseURL: baseURLs;
     getFullURL: (paramsObj?: anyParamsIF | string) => string;
     navigate: (paramsObj?: anyParamsIF | string) => void;
     redirect: (paramsObj?: anyParamsIF | string) => void;
 }
 
-// TODO:    @Emily: it probably makes sense to expand this hook to
-// TODO:    .... centralize URLs to link external resources
-
 export const useLinkGen = (page?: pageNames): linkGenMethodsIF => {
     // current URL path of the app relative to index page
     const { pathname } = useLocation();
@@ -111,8 +113,6 @@ export const useLinkGen = (page?: pageNames): linkGenMethodsIF => {
             pageName = 'initpool';
         } else if (pathname.startsWith(BASE_URL_PATHS.reposition)) {
             pageName = 'reposition';
-        } else if (pathname.startsWith(BASE_URL_PATHS.explore)) {
-            pageName = 'explore';
         } else if (pathname.startsWith(BASE_URL_PATHS.explorePools)) {
             pageName = 'explorePools';
         } else if (pathname.startsWith(BASE_URL_PATHS.exploreTokens)) {
@@ -158,8 +158,33 @@ export const useLinkGen = (page?: pageNames): linkGenMethodsIF => {
         navigate(getFullURL(paramsObj), { replace: true });
     }
 
+    // fn to determine whether user is currently on one of some number of pages
+    function isPage(...p: pageNames[]): boolean {
+        // must get page from current location, not from args for hook
+        const currentPage: pageNames = getPageFromLocation();
+        // array to hold nested routes
+        const addedPages: pageNames[] = [];
+        // fn to add data to the `addedPages` array without duplication
+        function addPages(...pagesToAdd: pageNames[]): void {
+            const nonDuplicated: pageNames[] = pagesToAdd.filter(
+                (page: pageNames) =>
+                    !p.includes(page) && !addedPages.includes(page),
+            );
+            addedPages.concat(nonDuplicated);
+        }
+        // add nested routes is this fn is called on a parent route
+        p.includes('trade') &&
+            addPages('market', 'limit', 'pool', 'reposition');
+        p.includes('explore') && addPages('explorePools', 'exploreTokens');
+        // determine if current page matches any on the args provided
+        return p.concat(addedPages).includes(currentPage);
+    }
+
     return {
-        currentPage: getPageFromLocation(),
+        current: {
+            page: getPageFromLocation(),
+            isPage,
+        },
         baseURL,
         getFullURL,
         navigate: navigateUser,

src/utils/hooks/useUrlParams.ts

@@ -45,7 +45,7 @@ export const useUrlParams = (
     // generate an array of required params in the URL based on route
     const requiredParams = useMemo<validParamsType[]>(() => {
         // name of page currently in the DOM
-        const pageName: pageNames = linkGenCurrent.currentPage;
+        const pageName: pageNames = linkGenCurrent.current.page;
         // global params for all parameterized pathways
         const globalParams: validParamsType[] = ['chain', 'tokenA', 'tokenB'];
         // output variable
@@ -67,7 +67,7 @@ export const useUrlParams = (
         }
         // return array of required URL params
         return paramsForPage;
-    }, [linkGenCurrent.currentPage]);
+    }, [linkGenCurrent.current.page]);
 
     // map of all params in the current URL string
     const urlParamMap = useMemo<Map<validParamsType, string>>(() => {
@@ -194,20 +194,6 @@ export const useUrlParams = (
         }
     }
 
-    // function inflateProvider(chainId: string) {
-    //     if (!provider) {
-    //         provider = useProvider({ chainId: parseInt(chainId) });
-    //         if (!provider) {
-    //             console.warn(
-    //                 'Cannot set provider to lookup token address on chain',
-    //                 chainId,
-    //             );
-    //             return undefined;
-    //         }
-    //     }
-    //     return provider;
-    // }
-
     function processOptParam(
         paramName: validParamsType,
         processFn: (val: string) => void,