fix: display error message if backend is unreachable (#540)

* refactor: externalize SeedModal component * refactor: Seedphrase.jsx to .tsx * refactor: pass wallet to Settings component * refactor: pass wallet to MainWalletView component * refactor: pass wallet to Jam component * refactor: pass wallet to Send component * refactor: pass wallet to Earn component * refactor: pass wallet to Receive component * deps: update react-router-dom from v6.4.1 to v6.4.2 * fix: show alert if backend is down Co-authored-by: Gigi <[email protected]>
joinmarket-webui · Oct 10, 2022 · f2e346e · f2e346e
1 parent 697450a
commit f2e346e
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^11.18.6",
     "react-router-bootstrap": "^0.26.2",
-    "react-router-dom": "^6.4.1",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",
     "typescript": "^4.7.2"
   },

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,7 +1,14 @@
 import { useCallback } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider } from 'react-router-dom'
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Navigate,
+  Route,
+  RouterProvider,
+  Outlet,
+} from 'react-router-dom'
 import { routes } from '../constants/routes'
 import { useSessionConnectionError } from '../context/ServiceInfoContext'
 import { useSettings } from '../context/SettingsContext'
@@ -48,13 +55,9 @@ export default function App() {
           <>
             <Navbar />
             <rb.Container as="main" className="py-4 py-sm-5">
-              {sessionConnectionError && (
-                <rb.Alert variant="danger">
-                  {t('app.alert_no_connection', { connectionError: sessionConnectionError.message })}.
-                </rb.Alert>
-              )}
-
-              <Layout />
+              <Layout>
+                <Outlet />
+              </Layout>
             </rb.Container>
             <Footer />
           </>
@@ -66,11 +69,22 @@ export default function App() {
          * that it stays visible in case the backend becomes unavailable.
          */}
         <Route id="create-wallet" path={routes.createWallet} element={<CreateWallet startWallet={startWallet} />} />
-        {/**
-         * This section defines all routes that are displayed only if the backend is reachable.
-         */}
-        {!sessionConnectionError && (
+
+        {sessionConnectionError ? (
+          <Route
+            id="404"
+            path="*"
+            element={
+              <rb.Alert variant="danger">
+                {t('app.alert_no_connection', { connectionError: sessionConnectionError.message })}.
+              </rb.Alert>
+            }
+          />
+        ) : (
           <>
+            {/**
+             * This section defines all routes that are displayed only if the backend is reachable.
+             */}
             <Route
               id="wallets"
               path={routes.home}

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react'
 import * as rb from 'react-bootstrap'
-import { Outlet } from 'react-router-dom'
 
 type LayoutVariant = 'wide' | ''
 
@@ -24,12 +23,10 @@ interface LayoutProps {
   variant?: LayoutVariant
 }
 
-const Layout = ({ variant }: LayoutProps) => {
+const Layout = ({ variant, children }: PropsWithChildren<LayoutProps>) => {
   return (
     <rb.Row className="justify-content-center">
-      <Col variant={variant}>
-        <Outlet />
-      </Col>
+      <Col variant={variant}>{children}</Col>
     </rb.Row>
   )
 }