u

src/App.jsx

@@ -1,11 +1,15 @@
-import { PureComponent, Suspense } from 'react';
+import { PureComponent, lazy, Suspense } from 'react';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
-import { RouterProvider } from 'react-router-dom';
 import authAutomat from './automats/authAutomat';
 import LoginPage from './components/LoginPage';
-import CompanySetupDialog from './components/CompanySetupDialog';
-import { router } from './appRouter';
+
+const CompanySetupDialog = lazy(() => import('./components/CompanySetupDialog'));
+const AppRouter = lazy(() => import('./appRouter'));
+const OAuthAuthorizePage = lazy(() => import('./routes/oauth/OAuthAuthorizePage'));
+const SseMonitor = import.meta.env.DEV
+  ? lazy(() => import('./devtools/SseMonitor'))
+  : null;
 
 function PageFallback() {
   return (
@@ -30,7 +34,7 @@ class App extends PureComponent {
   }
 
   componentDidMount() {
-    this.unsubscribe = authAutomat.subscribe(this, ['status', 'user']);
+    this.unsubscribe = authAutomat.subscribe(this, ['status', 'user', 'hasAuth', 'hasCompany']);
   }
 
   componentWillUnmount() {
@@ -38,7 +42,9 @@ class App extends PureComponent {
   }
 
   render() {
-    const { status, user } = this.state;
+    const { status, user, hasAuth, hasCompany } = this.state;
+    const isAuthed = Boolean(hasAuth ?? (status === 'authed' && user));
+    const isCompanySelected = Boolean(hasCompany ?? (isAuthed && user?.selectedCompanyId != null));
 
     if (status === 'loading') {
       return (
@@ -56,7 +62,7 @@ class App extends PureComponent {
       );
     }
 
-    if (status !== 'authed') {
+    if (!isAuthed) {
       if (typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize') {
         const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
         window.history.replaceState(null, '', `/login?returnTo=${returnTo}`);
@@ -64,16 +70,28 @@ class App extends PureComponent {
       return <LoginPage />;
     }
 
-    const isOAuthAuthorize = typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize';
-
-    if (user?.selectedCompanyId == null && !isOAuthAuthorize) {
-      return <CompanySetupDialog />;
-    }
+    const isOAuthAuthorize =
+      typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize';
 
     return (
-      <Suspense fallback={<PageFallback />}>
-        <RouterProvider router={router} />
-      </Suspense>
+      <>
+        <Suspense fallback={<PageFallback />}>
+          {!isCompanySelected ? (
+            isOAuthAuthorize ? (
+              <OAuthAuthorizePage />
+            ) : (
+              <CompanySetupDialog />
+            )
+          ) : (
+            <AppRouter />
+          )}
+        </Suspense>
+        {SseMonitor ? (
+          <Suspense fallback={null}>
+            <SseMonitor />
+          </Suspense>
+        ) : null}
+      </>
     );
   }
 }