Merge pull request #65 from lightninglabs/routing

Add url based routing

Author: guggero

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",

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>

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;

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 />;
 };

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>

app/src/__stories__/SettingsPage.stories.tsx

@@ -10,18 +10,20 @@ export default {
 };
 
 export const Default = () => {
+  const { uiStore } = useStore();
+  uiStore.showSettings('');
   return <SettingsPage />;
 };
 
 export const BitcoinUnit = () => {
   const { uiStore } = useStore();
-  uiStore.selectedSetting = 'unit';
+  uiStore.showSettings('unit');
   return <SettingsPage />;
 };
 
 export const BalanceMode = () => {
   const { uiStore } = useStore();
-  uiStore.selectedSetting = 'balance';
+  uiStore.showSettings('balance');
   return <SettingsPage />;
 };
 

app/src/__stories__/StoryWrapper.tsx

@@ -1,4 +1,5 @@
 import React, { CSSProperties, useMemo } from 'react';
+import { Router } from 'react-router';
 import { observer } from 'mobx-react-lite';
 import { BalanceMode, Unit } from 'util/constants';
 import { AuthenticationError } from 'util/errors';
@@ -67,11 +68,13 @@ const StoryWrapper: React.FC<{
   return (
     <StoreProvider store={store}>
       <ThemeProvider>
-        {/* 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>
+        <Router 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>
+        </Router>
       </ThemeProvider>
     </StoreProvider>
   );

app/src/__tests__/Pages.spec.tsx renamed to 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');
   });
 });

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', () => {

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();
-  });
 });