store: add url based routing

jamaljsr · jamaljsr · commit bf530d0b9ccf · 2020-06-18T15:54:36.000-04:00
diff --git a/app/package.json b/app/package.json
@@ -34,11 +34,13 @@
     "lottie-web": "5.6.8",
     "mobx": "5.15.4",
     "mobx-react-lite": "2.0.6",
+    "mobx-react-router": "4.1.0",
     "mobx-utils": "5.5.7",
     "rc-tooltip": "4.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-i18next": "11.4.0",
+    "react-router": "5.2.0",
     "react-scripts": "3.4.1",
     "react-toastify": "6.0.5",
     "react-virtualized": "^9.21.2"
@@ -55,11 +57,13 @@
     "@testing-library/user-event": "^10.1.0",
     "@types/debug": "4.1.5",
     "@types/google-protobuf": "3.7.2",
+    "@types/history": "4.7.6",
     "@types/jest": "^25.2.1",
     "@types/lodash": "4.14.155",
     "@types/node": "^13.13.5",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
+    "@types/react-router": "5.1.7",
     "@typescript-eslint/eslint-plugin": "^2.31.0",
     "@typescript-eslint/parser": "^2.31.0",
     "bootstrap": "4.4.1",
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -2,19 +2,16 @@ import React from 'react';
 import './App.scss';
 import { createStore, StoreProvider } from 'store';
 import AlertContainer from 'components/common/AlertContainer';
-import { Layout } from 'components/layout';
-import Pages from 'components/Pages';
 import { ThemeProvider } from 'components/theme';
+import Routes from './Routes';
 
 const App = () => {
   const store = createStore();
 
   return (
     <StoreProvider store={store}>
       <ThemeProvider>
-        <Layout>
-          <Pages />
-        </Layout>
+        <Routes />
         <AlertContainer />
       </ThemeProvider>
     </StoreProvider>
diff --git a/app/src/Routes.tsx b/app/src/Routes.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Route, Router, Switch } from 'react-router';
+import { useStore } from 'store';
+import AuthPage from 'components/auth/AuthPage';
+import HistoryPage from 'components/history/HistoryPage';
+import { Layout } from 'components/layout';
+import LoopPage from 'components/loop/LoopPage';
+import SettingsPage from 'components/settings/SettingsPage';
+
+const Routes: React.FC = () => {
+  const { router } = useStore();
+
+  return (
+    <Router history={router.history}>
+      <Switch>
+        <Route path="/" exact component={AuthPage} />
+        <Route>
+          <Layout>
+            <Switch>
+              <Route path="/loop" component={LoopPage} />
+              <Route path="/history" component={HistoryPage} />
+              <Route path="/settings" component={SettingsPage} />
+            </Switch>
+          </Layout>
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default Routes;
diff --git a/app/src/__stories__/AuthPage.stories.tsx b/app/src/__stories__/AuthPage.stories.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
 import AuthPage from 'components/auth/AuthPage';
-import { Layout } from 'components/layout';
 
 export default {
   title: 'Pages/Auth',
   component: AuthPage,
 };
 
 export const Default = () => {
-  return (
-    <Layout>
-      <AuthPage />
-    </Layout>
-  );
+  return <AuthPage />;
 };
diff --git a/app/src/__stories__/HistoryPage.stories.tsx b/app/src/__stories__/HistoryPage.stories.tsx
@@ -29,7 +29,6 @@ export const Default = () => {
 
 export const InsideLayout = () => {
   const store = useStore();
-  store.uiStore.page = 'history';
   updateSwapsStatus(store.swapStore.sortedSwaps);
   return (
     <Layout>
diff --git a/app/src/__tests__/Routes.spec.tsx b/app/src/__tests__/Routes.spec.tsx
@@ -1,39 +1,39 @@
 import React from 'react';
+import Routes from 'Routes';
 import { renderWithProviders } from 'util/tests';
 import { createStore } from 'store';
-import Pages from 'components/Pages';
 
-describe('Pages Component', () => {
+describe('Routes Component', () => {
   const render = async () => {
     const store = createStore();
     await store.init();
-    return renderWithProviders(<Pages />, store);
+    return renderWithProviders(<Routes />, store);
   };
 
   it('should display the Auth page by default', async () => {
     const { getByText, store } = await render();
     expect(getByText('Shushtar')).toBeInTheDocument();
-    expect(store.uiStore.page).toBe('auth');
+    expect(store.router.location.pathname).toBe('/');
   });
 
   it('should display the Loop page', async () => {
-    const { getByText, store } = await render();
+    const { getAllByText, store } = await render();
     store.uiStore.goToLoop();
-    expect(getByText('Lightning Loop')).toBeInTheDocument();
-    expect(store.uiStore.page).toBe('loop');
+    expect(getAllByText('Lightning Loop')).toHaveLength(2);
+    expect(store.router.location.pathname).toBe('/loop');
   });
 
   it('should display the History page', async () => {
     const { getByText, store } = await render();
     store.uiStore.goToHistory();
     expect(getByText('Loop History')).toBeInTheDocument();
-    expect(store.uiStore.page).toBe('history');
+    expect(store.router.location.pathname).toBe('/history');
   });
 
   it('should display the Settings page', async () => {
-    const { getByText, store } = await render();
+    const { getAllByText, store } = await render();
     store.uiStore.goToSettings();
-    expect(getByText('Settings')).toBeInTheDocument();
-    expect(store.uiStore.page).toBe('settings');
+    expect(getAllByText('Settings')).toHaveLength(2);
+    expect(store.router.location.pathname).toBe('/settings');
   });
 });
diff --git a/app/src/__tests__/components/history/HistoryPage.spec.tsx b/app/src/__tests__/components/history/HistoryPage.spec.tsx
@@ -10,7 +10,6 @@ describe('HistoryPage', () => {
 
   beforeEach(() => {
     store = createStore();
-    store.uiStore.goToHistory();
   });
 
   const render = () => {
@@ -49,7 +48,7 @@ describe('HistoryPage', () => {
   it('should navigate back to the Loop Page', () => {
     const { getByText } = render();
     fireEvent.click(getByText('arrow-left.svg'));
-    expect(store.uiStore.page).toEqual('loop');
+    expect(store.router.location.pathname).toBe('/loop');
   });
 
   it('should export channels', () => {
diff --git a/app/src/__tests__/components/layout/Layout.spec.tsx b/app/src/__tests__/components/layout/Layout.spec.tsx
@@ -7,7 +7,7 @@ import Layout from 'components/layout/Layout';
 describe('Layout component', () => {
   const render = () => {
     const store = createStore();
-    store.uiStore.page = 'loop';
+    store.uiStore.goToLoop();
     return renderWithProviders(<Layout />, store);
   };
 
@@ -27,38 +27,31 @@ describe('Layout component', () => {
 
   it('should navigate to the History page', () => {
     const { getByText, store } = render();
-    expect(store.uiStore.page).toBe('loop');
+    expect(store.router.location.pathname).toBe('/loop');
     fireEvent.click(getByText('History'));
-    expect(store.uiStore.page).toBe('history');
+    expect(store.router.location.pathname).toBe('/history');
     expect(getByText('History').parentElement).toHaveClass('active');
   });
 
   it('should navigate back to the Loop page', () => {
     const { getByText, store } = render();
-    expect(store.uiStore.page).toBe('loop');
+    expect(store.router.location.pathname).toBe('/loop');
     fireEvent.click(getByText('History'));
-    expect(store.uiStore.page).toBe('history');
+    expect(store.router.location.pathname).toBe('/history');
     expect(getByText('History').parentElement).toHaveClass('active');
     fireEvent.click(getByText('Lightning Loop'));
-    expect(store.uiStore.page).toBe('loop');
+    expect(store.router.location.pathname).toBe('/loop');
     expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
   });
 
   it('should navigate to the Settings page', () => {
     const { getByText, store } = render();
-    expect(store.uiStore.page).toBe('loop');
+    expect(store.router.location.pathname).toBe('/loop');
     fireEvent.click(getByText('Settings'));
-    expect(store.uiStore.page).toBe('settings');
+    expect(store.router.location.pathname).toBe('/settings');
     expect(getByText('Settings').parentElement).toHaveClass('active');
     fireEvent.click(getByText('Lightning Loop'));
-    expect(store.uiStore.page).toBe('loop');
+    expect(store.router.location.pathname).toBe('/loop');
     expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
   });
-
-  it('should not display the sidebar on the auth page', () => {
-    const { getByText, queryByText, store } = render();
-    expect(getByText('menu.svg')).toBeInTheDocument();
-    store.uiStore.page = 'auth';
-    expect(queryByText('menu.svg')).not.toBeInTheDocument();
-  });
 });
diff --git a/app/src/components/Pages.tsx b/app/src/components/Pages.tsx
diff --git a/app/src/components/auth/AuthPage.tsx b/app/src/components/auth/AuthPage.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { ReactComponent as LogoImage } from 'assets/images/logo.svg';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Button, HeaderOne, Input } from 'components/base';
+import { Background, Button, HeaderOne, Input } from 'components/base';
 import { styled } from 'components/theme';
 
 const Styled = {
@@ -79,20 +79,28 @@ const AuthPage: React.FC = () => {
 
   const { Wrapper, Logo, Title, Subtitle, Form, Label, ErrMessage, Submit } = Styled;
   return (
-    <Wrapper>
-      <Logo />
-      <Title>{l('title')}</Title>
-      <Subtitle>{l('subtitle')}</Subtitle>
-      <Form onSubmit={handleSubmit}>
-        <Input id="auth" type="password" autoFocus value={pass} onChange={handleChange} />
-        {error ? (
-          <ErrMessage>{error}</ErrMessage>
-        ) : (
-          <Label htmlFor="auth">{l('passLabel')}</Label>
-        )}
-        <Submit>{l('submitBtn')}</Submit>
-      </Form>
-    </Wrapper>
+    <Background gradient>
+      <Wrapper>
+        <Logo />
+        <Title>{l('title')}</Title>
+        <Subtitle>{l('subtitle')}</Subtitle>
+        <Form onSubmit={handleSubmit}>
+          <Input
+            id="auth"
+            type="password"
+            autoFocus
+            value={pass}
+            onChange={handleChange}
+          />
+          {error ? (
+            <ErrMessage>{error}</ErrMessage>
+          ) : (
+            <Label htmlFor="auth">{l('passLabel')}</Label>
+          )}
+          <Submit>{l('submitBtn')}</Submit>
+        </Form>
+      </Wrapper>
+    </Background>
   );
 };
 
diff --git a/app/src/components/layout/Layout.tsx b/app/src/components/layout/Layout.tsx
@@ -61,11 +61,7 @@ const Styled = {
   `,
 };
 
-const AuthLayout: React.FC = ({ children }) => (
-  <Background gradient>{children}</Background>
-);
-
-const StandardLayout: React.FC = observer(({ children }) => {
+export const Layout: React.FC = ({ children }) => {
   const { settingsStore } = useStore();
 
   const { Container, Hamburger, Aside, Content } = Styled;
@@ -87,16 +83,6 @@ const StandardLayout: React.FC = observer(({ children }) => {
       </Container>
     </Background>
   );
-});
-
-const Layout: React.FC = ({ children }) => {
-  const { uiStore } = useStore();
-
-  return uiStore.page === 'auth' ? (
-    <AuthLayout>{children}</AuthLayout>
-  ) : (
-    <StandardLayout>{children}</StandardLayout>
-  );
 };
 
 export default observer(Layout);
diff --git a/app/src/components/layout/NavMenu.tsx b/app/src/components/layout/NavMenu.tsx
@@ -48,9 +48,11 @@ const Styled = {
 const NavItem: React.FC<{ page: string; onClick: () => void }> = observer(
   ({ page, onClick }) => {
     const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
-    const { uiStore } = useStore();
+    const { router } = useStore();
+    const className = router.location.pathname === `/${page}` ? 'active' : '';
+
     return (
-      <Styled.NavItem className={uiStore.page === page ? 'active' : ''}>
+      <Styled.NavItem className={className}>
         <span onClick={onClick}>{l(page)}</span>
       </Styled.NavItem>
     );
diff --git a/app/src/store/store.ts b/app/src/store/store.ts
@@ -1,5 +1,7 @@
 import { action, autorun, observable, runInAction } from 'mobx';
+import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
 import { IS_DEV, IS_TEST } from 'config';
+import { createBrowserHistory } from 'history';
 import AppStorage from 'util/appStorage';
 import CsvExporter from 'util/csv';
 import { actionLog, Logger } from 'util/log';
@@ -29,6 +31,9 @@ export class Store {
   settingsStore = new SettingsStore(this);
   uiStore = new UiStore(this);
 
+  /** the store which synchronizes with the browser history */
+  router = new RouterStore();
+
   /** the backend api services to be used by child stores */
   api: {
     lnd: LndApi;
@@ -81,8 +86,12 @@ export class Store {
       async () => {
         if (this.authStore.authenticated) {
           // go to the Loop page when the user is authenticated. it can be from
-          // entering a password or from loading the credentials from storage
-          this.uiStore.goToLoop();
+          // entering a password or from loading the credentials from storage.
+          // only do this if the auth page is currently being viewed, otherwise
+          // stay on the current page (ex: history, settings)
+          if (this.router.location.pathname === '/') {
+            this.uiStore.goToLoop();
+          }
           // also fetch all the data we need
           this.fetchAllData();
           // connect and subscribe to the server-side streams
@@ -157,6 +166,10 @@ export const createStore = (grpcClient?: GrpcClient, appStorage?: AppStorage) =>
   const csv = new CsvExporter();
 
   const store = new Store(lndApi, loopApi, storage, csv, actionLog);
+
+  // connect router store to browser history
+  syncHistoryWithStore(createBrowserHistory(), store.router);
+
   // initialize the store immediately to fetch API data, except when running unit tests
   if (!IS_TEST) store.init();
 
diff --git a/app/src/store/stores/uiStore.ts b/app/src/store/stores/uiStore.ts
diff --git a/app/yarn.lock b/app/yarn.lock
