settings: add nested routes for settings screens

Author: jamaljsr

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__/components/settings/BalanceSettings.spec.tsx

@@ -41,7 +41,7 @@ describe('BalanceSettings', () => {
   it('should navigate back to the Settings screen', () => {
     const { getByText } = render();
     fireEvent.click(getByText('Settings'));
-    expect(store.uiStore.selectedSetting).toEqual('general');
+    expect(store.router.location.pathname).toEqual('/settings');
   });
 
   it('should update the Balance Mode to receive', () => {

app/src/__tests__/components/settings/SettingsPage.spec.tsx

@@ -9,6 +9,7 @@ describe('SettingsPage', () => {
 
   beforeEach(() => {
     store = createStore();
+    store.uiStore.showSettings('');
   });
 
   const render = () => {
@@ -36,12 +37,12 @@ describe('SettingsPage', () => {
   it('should navigate to the Bitcoin Unit screen', () => {
     const { getByText } = render();
     fireEvent.click(getByText('Bitcoin Unit'));
-    expect(store.uiStore.selectedSetting).toEqual('unit');
+    expect(store.router.location.pathname).toEqual('/settings/unit');
   });
 
   it('should navigate to the Channel Balance Mode screen', () => {
     const { getByText } = render();
     fireEvent.click(getByText('Channel Balance Mode'));
-    expect(store.uiStore.selectedSetting).toEqual('balance');
+    expect(store.router.location.pathname).toEqual('/settings/balance');
   });
 });

app/src/__tests__/components/settings/UnitSettings.spec.tsx

@@ -42,7 +42,7 @@ describe('UnitSettings', () => {
   it('should navigate back to the Settings screen', () => {
     const { getByText } = render();
     fireEvent.click(getByText('Settings'));
-    expect(store.uiStore.selectedSetting).toEqual('general');
+    expect(store.router.location.pathname).toEqual('/settings');
   });
 
   it('should update the Bitcoin Unit to sats', () => {

app/src/components/settings/BalanceSettings.tsx

@@ -38,7 +38,7 @@ const BalanceSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.BalanceSettings');
   const { uiStore } = useStore();
 
-  const handleBack = useCallback(() => uiStore.showSettings('general'), [uiStore]);
+  const handleBack = useCallback(() => uiStore.showSettings(''), [uiStore]);
 
   const { Wrapper, Content } = Styled;
   return (

app/src/components/settings/SettingItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { observer } from 'mobx-react-lite';
 import { ArrowRight, RadioButton } from 'components/base';
 import { styled } from 'components/theme';
 
@@ -51,4 +50,4 @@ const SettingItem: React.FC<Props> = ({ name, value, icon, checked, onClick }) =
   );
 };
 
-export default observer(SettingItem);
+export default SettingItem;

app/src/components/settings/SettingsPage.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import { Route, Switch } from 'react-router';
 import { observer } from 'mobx-react-lite';
-import { useStore } from 'store';
 import { styled } from 'components/theme';
 import BalanceSettings from './BalanceSettings';
 import GeneralSettings from './GeneralSettings';
@@ -13,23 +13,17 @@ const Styled = {
 };
 
 const SettingsPage: React.FC = () => {
-  const { uiStore } = useStore();
-
-  let cmp: ReactNode;
-  switch (uiStore.selectedSetting) {
-    case 'unit':
-      cmp = <UnitSettings />;
-      break;
-    case 'balance':
-      cmp = <BalanceSettings />;
-      break;
-    case 'general':
-    default:
-      cmp = <GeneralSettings />;
-  }
-
   const { Wrapper } = Styled;
-  return <Wrapper>{cmp}</Wrapper>;
+
+  return (
+    <Wrapper>
+      <Switch>
+        <Route path="/settings" exact component={GeneralSettings} />
+        <Route path="/settings/unit" component={UnitSettings} />
+        <Route path="/settings/balance" component={BalanceSettings} />
+      </Switch>
+    </Wrapper>
+  );
 };
 
 export default observer(SettingsPage);

app/src/components/settings/UnitSettings.tsx

@@ -37,7 +37,7 @@ const UnitSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.UnitSettings');
   const { uiStore } = useStore();
 
-  const handleBack = useCallback(() => uiStore.showSettings('general'), [uiStore]);
+  const handleBack = useCallback(() => uiStore.showSettings(''), [uiStore]);
 
   const { Wrapper, Content } = Styled;
   return (

app/src/store/store.ts

@@ -89,7 +89,7 @@ export class Store {
           // 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 === '/') {
+          if (document.location.pathname === '/') {
             this.uiStore.goToLoop();
           }
           // also fetch all the data we need