Remove unwanted imports and use of hooks

We don't want to use the `useNavigate` and `useLocation` hooks as of yet. These
will be used in subsequent refactor.

Author: rohit-nair

app/src/__stories__/StoryWrapper.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, useMemo } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import { BalanceMode, Unit } from 'util/constants';
 import { AuthenticationError } from 'util/errors';
@@ -70,13 +70,13 @@ const StoryWrapper: React.FC<{
   return (
     <StoreProvider store={store}>
       <ThemeProvider>
-        <BrowserRouter>
+        <HistoryRouter history={store.router.history}>
           {/* modify the bg styles so it isn't too big in docs mode */}
           <Background style={{ minHeight: 'inherit', height: '100%' }}>
             {/* render the Story after the store has been initialized */}
             {store.initialized ? <div style={style}>{children}</div> : null}
           </Background>
-        </BrowserRouter>
+        </HistoryRouter>
         <AlertContainer />
       </ThemeProvider>
     </StoreProvider>

app/src/components/layout/Layout.tsx

@@ -111,13 +111,11 @@ const Styled = {
 
 export const Layout: React.FC = ({ children }) => {
   const { settingsStore, appView } = useStore();
-  const location = useLocation();
-  const fullWidth = location.pathname === `/pool`;
 
   const { Container, Hamburger, Aside, Content, Fluid } = Styled;
   return (
     <Background>
-      <Container fullWidth={fullWidth}>
+      <Container fullWidth={appView.fullWidth}>
         <Hamburger
           collapsed={!settingsStore.sidebarVisible}
           onClick={settingsStore.toggleSidebar}
@@ -127,7 +125,7 @@ export const Layout: React.FC = ({ children }) => {
         <Aside collapsed={!settingsStore.sidebarVisible}>
           <Sidebar />
         </Aside>
-        <Content collapsed={!settingsStore.sidebarVisible} fullWidth={fullWidth}>
+        <Content collapsed={!settingsStore.sidebarVisible} fullWidth={appView.fullWidth}>
           <Fluid className="container-fluid">{children}</Fluid>
         </Content>
       </Container>

app/src/components/settings/GeneralSettings.tsx

@@ -8,7 +8,6 @@ import { useStore } from 'store';
 import { HeaderFour } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
 import SettingItem from './SettingItem';
-import { useNavigate } from 'react-router-dom';
 
 const Styled = {
   Wrapper: styled.section``,
@@ -19,16 +18,11 @@ const Styled = {
 
 const GeneralSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.GeneralSettings');
-  const { appView, log, nodeStore, settingsStore } = useStore();
-  const navigate = useNavigate();
-  const navigateTo = (path: string) => {
-    log.info('Switch to Setting screen', path);
-    navigate(`/settings/${path}`);
-  };
+  const { appView, nodeStore, settingsStore } = useStore();
 
-  const handleUnit = useCallback(() => navigateTo('unit'), [appView]);
-  const handleBalance = useCallback(() => navigateTo('balance'), [appView]);
-  const handleExplorers = useCallback(() => navigateTo('explorers'), [appView]);
+  const handleUnit = useCallback(() => appView.showSettings('unit'), [appView]);
+  const handleBalance = useCallback(() => appView.showSettings('balance'), [appView]);
+  const handleExplorers = useCallback(() => appView.showSettings('explorers'), [appView]);
   const handleCopyPubkey = useCallback(() => nodeStore.copy('pubkey'), [nodeStore]);
   const handleCopyAlias = useCallback(() => nodeStore.copy('alias'), [nodeStore]);
   const handleCopyUrl = useCallback(() => nodeStore.copy('url'), [nodeStore]);

app/src/store/views/appView.ts

@@ -6,7 +6,6 @@ import { AuthenticationError } from 'util/errors';
 import { prefixTranslation } from 'util/translate';
 import { Store } from 'store';
 import { PUBLIC_URL } from '../../config';
-import { useLocation, useNavigate } from 'react-router-dom';
 
 const { l } = prefixTranslation('stores.appView');
 
@@ -29,6 +28,10 @@ export default class AppView {
     this._store = store;
   }
 
+  get fullWidth() {
+    return this._store.router.location.pathname === `${PUBLIC_URL}/pool`;
+  }
+  
   /** navigate to the specified route */
   goTo(route: string) {
     if (this._store.router.location.pathname !== route) {

app/src/util/tests/renderWithProviders.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { MemoryRouter, unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
+import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
 import { fireEvent, render } from '@testing-library/react';
 import { createStore, Store, StoreProvider } from 'store';
 import AlertContainer from 'components/common/AlertContainer';