refactor: use Wizard component on first route

packages/admin-ui/src/Main.jsx

@@ -1,5 +1,5 @@
 import { useHistory, useLocation } from 'react-router-dom'
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import { gql, useQuery } from '@apollo/client'
 import Slide from '@mui/material/Slide'
 import Grid from '@mui/material/Grid'
@@ -8,6 +8,7 @@ import Header from './components/layout/Header.jsx'
 import Sidebar from './components/layout/Sidebar.jsx'
 import TitleSection from './components/layout/TitleSection.jsx'
 import { getParent, hasSidebar, Routes, tree } from './routing/routes.jsx'
+import Wizard from './pages/Wizard/Wizard.jsx'
 
 import AppContext from './AppContext.js'
 
@@ -29,11 +30,14 @@ const Main = () => {
   const location = useLocation()
   const history = useHistory()
   const { wizardTested, userData, setUserData } = useContext(AppContext)
+  const [loading, setLoading] = useState(true)
 
-  const { loading } = useQuery(GET_USER_DATA, {
+  useQuery(GET_USER_DATA, {
     onCompleted: userResponse => {
-      if (!userData && userResponse?.userData)
+      if (!userData && userResponse?.userData) {
         setUserData(userResponse.userData)
+      }
+      setLoading(false)
     },
   })
 
@@ -50,11 +54,18 @@ const Main = () => {
 
   const contentClassName = sidebar ? 'flex-1 ml-12 pt-4' : 'w-[1200px]'
 
+  // Show loading state until userData is fetched
+  if (loading) {
+    return <></>
+  }
+
+  if (!wizardTested && !is404 && userData) {
+    return <Wizard />
+  }
+
   return (
     <div className="flex flex-col w-full min-h-full">
-      {!is404 && wizardTested && userData && (
+      {!is404 && wizardTested && <Header tree={tree} user={userData} />}
-        <Header tree={tree} user={userData} />
-      )}
       <main className="flex flex-1 flex-col my-0 mx-auto h-full w-[1200px]">
         {sidebar && !is404 && wizardTested && (
           <Slide direction="left" in={true} mountOnEnter unmountOnExit>
@@ -73,7 +84,9 @@ const Main = () => {
               onClick={onClick}
             />
           )}
-          <div className={contentClassName}>{!loading && <Routes />}</div>
+          <div className={contentClassName}>
+            <Routes />
+          </div>
         </Grid>
       </main>
     </div>

packages/admin-ui/src/pages/Wizard/Wizard.jsx

@@ -37,12 +37,9 @@ const Wizard = () => {
 
   const wizardStep = getWizardStep(data?.config, data?.cryptoCurrencies)
 
-  const shouldGoBack =
-    history.length && !history.location.state?.fromAuthRegister
-
   if (wizardStep === 0) {
     setWizardTested(true)
-    shouldGoBack ? history.goBack() : history.push('/')
+    return <></>
   }
 
   const isWelcome = step === 0
@@ -54,7 +51,9 @@ const Wizard = () => {
   const doContinue = () => {
     if (step >= STEPS.length - 1) {
       setOpen(false)
+      setWizardTested(true)
       history.push('/')
+      return
     }
 
     const nextStep = step === 0 && wizardStep ? wizardStep : step + 1

packages/admin-ui/src/routing/routes.jsx

@@ -2,13 +2,7 @@ import Fade from '@mui/material/Fade'
 import Slide from '@mui/material/Slide'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
-import {
+import { matchPath, Redirect, Switch, useLocation } from 'react-router-dom'
-  matchPath,
-  Redirect,
-  Switch,
-  useHistory,
-  useLocation,
-} from 'react-router-dom'
 import Login from '../pages/Authentication/Login'
 import Register from '../pages/Authentication/Register'
 import Reset2FA from '../pages/Authentication/Reset2FA'
@@ -17,7 +11,6 @@ import ResetPassword from '../pages/Authentication/ResetPassword'
 import AppContext from '../AppContext'
 import Dashboard from '../pages/Dashboard'
 import Machines from '../pages/Machines'
-import Wizard from '../pages/Wizard'
 
 import PrivateRoute from './PrivateRoute'
 import PublicRoute from './PublicRoute'
@@ -57,27 +50,12 @@ const getParent = route =>
   )(flattened)
 
 const Routes = () => {
-  const history = useHistory()
   const location = useLocation()
-  const { wizardTested, userData } = useContext(AppContext)
+  const { userData } = useContext(AppContext)
-
-  const dontTriggerPages = [
-    '/404',
-    '/register',
-    '/wizard',
-    '/login',
-    '/register',
-    '/resetpassword',
-    '/reset2fa',
-  ]
-
-  if (!wizardTested && !R.contains(location.pathname)(dontTriggerPages)) {
-    history.push('/wizard')
-    return null
-  }
 
   const getFilteredRoutes = () => {
-    if (!userData) return []
+    // return all to prevent the user from being stuck at a 404 page
+    if (!userData) return flattened
 
     return flattened.filter(value => {
       const keys = value.allowedRoles
@@ -116,11 +94,10 @@ const Routes = () => {
         </Transition>
       </PrivateRoute>
       <PrivateRoute path="/machines" component={Machines} />
-      <PrivateRoute path="/wizard" component={Wizard} />
       <PublicRoute path="/register" component={Register} />
-      <PublicRoute path="/login" restricted component={Login} />
       <PublicRoute path="/resetpassword" component={ResetPassword} />
       <PublicRoute path="/reset2fa" component={Reset2FA} />
+      <PublicRoute path="/login" restricted component={Login} />
       {getFilteredRoutes().map(({ route, component: Page, key }) => (
         <PrivateRoute path={route} key={key}>
           <Transition