refactoring: setup wizard pages with simple architecture.

client/src/components/App.js

@@ -7,9 +7,8 @@ import { ReactQueryDevtools } from 'react-query-devtools';
 
 import PrivateRoute from 'components/PrivateRoute';
 import Authentication from 'components/Authentication';
-import Dashboard from 'components/Dashboard/Dashboard';
+import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
-import RegisterWizardPage from 'containers/Authentication/Register/RegisterPage';
 
 import messages from 'lang/en';
 import 'style/App.scss';
@@ -32,12 +31,8 @@ function App({ locale }) {
                 <Authentication />
               </Route>
 
-              <Route path={'/register'}>
-                <RegisterWizardPage />
-              </Route>
-
               <Route path={'/'}>
-                <PrivateRoute component={Dashboard} />
+                <PrivateRoute component={DashboardPrivatePages} />
               </Route>
             </Switch>
           </Router>

client/src/components/Dashboard/Dashboard.js

@@ -14,7 +14,6 @@ import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 import EnsureOrganizationIsReady from './EnsureOrganizationIsReady';
 
 import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withOrganizationsActions from 'containers/Organization/withOrganizationActions';
 
 import { compose } from 'utils';
 
@@ -22,20 +21,14 @@ import { compose } from 'utils';
 function Dashboard({
   // #withSettings
   requestFetchOptions,
-
-  // #withOrganizations
-  requestOrganizationsList,
 }) {
-  const fetchOrganizations = useQuery(
-    ['organizations'],
-    (key) => requestOrganizationsList(),
-  );
+  // const fetchOptions = useQuery(
+  //   ['options'], () => requestFetchOptions(),
+  // );
+
   return (
     <EnsureOrganizationIsReady>
-      <DashboardLoadingIndicator
-        isLoading={
-          fetchOrganizations.isLoading
-        }>
+      <DashboardLoadingIndicator isLoading={false}>
         <Switch>
           <Route path="/preferences">
             <DashboardSplitPane>
@@ -62,5 +55,4 @@ function Dashboard({
 
 export default compose(
   withSettingsActions,
-  withOrganizationsActions,
 )(Dashboard);

client/src/components/Dashboard/DashboardLoadingIndicator.js

@@ -2,12 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import { Choose, Icon } from 'components';
 
-export default function Dashboard({
+export default function DashboardLoadingIndicator({
   isLoading = false,
+  className,
   children,
 }) {
   return (
-    <div className={classNames('dashboard')}>
+    <div className={classNames(className)}>
       <Choose>
         <Choose.When condition={isLoading}>
           <div class="center">

client/src/components/Dashboard/EnsureOrganizationIsReady.js

@@ -1,16 +1,29 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
+import { compose } from 'utils';
+import withAuthentication from 'containers/Authentication/withAuthentication';
+import withOrganizationByOrgId from 'containers/Organization/withOrganizationByOrgId';
 
-export default function EnsureOrganizationIsReady({
+function EnsureOrganizationIsReady({
+  // #ownProps
   children,
-}) {
-  const isOrganizationReady = false;
+  redirectTo = '/setup',
 
-  return (isOrganizationReady) ? children : (
+  // #withOrganizationByOrgId
+  organization,
+}) {
+  return (organization.is_ready) ? children : (
     <Redirect
-      to={{
-        pathname: '/register'
-      }}
+      to={{ pathname: redirectTo }}
     />
   );
-}
+}
+
+export default compose(
+  withAuthentication(),
+  connect((state, props) => ({
+    organizationId: props.currentOrganizationId,
+  })),
+  withOrganizationByOrgId(),
+)(EnsureOrganizationIsReady);

client/src/components/Dashboard/PrivatePages.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Switch, Route } from 'react-router';
+import { useQuery } from 'react-query';
+
+import Dashboard from 'components/Dashboard/Dashboard';
+import SetupWizardPage from 'containers/Setup/WizardSetupPage';
+import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
+
+import withOrganizationActions from 'containers/Organization/withOrganizationActions';
+
+import { compose } from 'utils';
+
+/**
+ * Dashboard inner private pages.
+ */
+function DashboardPrivatePages({
+  requestOrganizationsList,
+}) {
+  const fetchOrganizations = useQuery(
+    ['organizations'],
+    () => requestOrganizationsList(),
+  );
+
+  return (
+    <DashboardLoadingIndicator isLoading={fetchOrganizations.isLoading}>
+      <Switch>
+        <Route path={'/setup'}>
+          <SetupWizardPage />
+        </Route>
+
+        <Route path='/'>
+          <Dashboard />
+        </Route>
+      </Switch>
+    </DashboardLoadingIndicator>
+  );
+}
+
+export default compose(
+  withOrganizationActions,
+)(DashboardPrivatePages);