u

src/App.jsx

@@ -1,8 +1,9 @@
-import { lazy, Suspense } from 'react';
+import { Component, lazy, Suspense } from 'react';
+import { connect } from 'react-redux';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
-import { useAuth } from './auth/useAuth';
+import { selectAuthStatus, selectNeedsCompanySetup } from './store/authSlice';
 import LoginPage from './components/LoginPage';
 import CompanySetupDialog from './components/CompanySetupDialog';
 import AppShell from './components/AppShell';
@@ -36,60 +37,69 @@ function PageFallback() {
   );
 }
 
-export default function App() {
-  const { status, needsCompanySetup } = useAuth();
+class App extends Component {
+  render() {
+    const { status, needsCompanySetup } = this.props;
+
+    if (status === 'loading') {
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '100vh',
+            bgcolor: 'background.default',
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      );
+    }
+
+    if (status !== 'authed') {
+      return <LoginPage />;
+    }
+
+    if (needsCompanySetup) {
+      return <CompanySetupDialog />;
+    }
 
-  if (status === 'loading') {
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          minHeight: '100vh',
-          bgcolor: 'background.default',
-        }}
-      >
-        <CircularProgress />
-      </Box>
+      <BrowserRouter>
+        <Suspense fallback={<PageFallback />}>
+          <Routes>
+            <Route path="/" element={<AppShell />}>
+              <Route index element={<Navigate to="/artikel" replace />} />
+              <Route path="lieferung" element={<LieferungPage />} />
+              <Route path="infos" element={<InfosPage />} />
+              <Route path="artikel" element={<SectionLayout sectionPath="/artikel" />}>
+                <Route index element={<ArtikelUebersichtPage />} />
+                <Route path="kategorien" element={<ArtikelKategorienPage />} />
+                <Route path="lager" element={<ArtikelLagerPage />} />
+                <Route path=":sku" element={<ArtikelSkuPage />} />
+              </Route>
+              <Route path="auftrag" element={<SectionLayout sectionPath="/auftrag" />}>
+                <Route index element={<AuftragAktivePage />} />
+                <Route path="archiv" element={<AuftragArchivPage />} />
+              </Route>
+              <Route path="kunde" element={<SectionLayout sectionPath="/kunde" />}>
+                <Route index element={<KundeListePage />} />
+                <Route path="gruppen" element={<KundeGruppenPage />} />
+                <Route path="kontakte" element={<KundeKontaktePage />} />
+              </Route>
+              <Route path="*" element={<Navigate to="/artikel" replace />} />
+            </Route>
+          </Routes>
+        </Suspense>
+      </BrowserRouter>
     );
   }
-
-  if (status !== 'authed') {
-    return <LoginPage />;
-  }
-
-  if (needsCompanySetup) {
-    return <CompanySetupDialog />;
-  }
-
-  return (
-    <BrowserRouter>
-      <Suspense fallback={<PageFallback />}>
-        <Routes>
-          <Route path="/" element={<AppShell />}>
-            <Route index element={<Navigate to="/artikel" replace />} />
-            <Route path="lieferung" element={<LieferungPage />} />
-            <Route path="infos" element={<InfosPage />} />
-            <Route path="artikel" element={<SectionLayout sectionPath="/artikel" />}>
-              <Route index element={<ArtikelUebersichtPage />} />
-              <Route path="kategorien" element={<ArtikelKategorienPage />} />
-              <Route path="lager" element={<ArtikelLagerPage />} />
-              <Route path=":sku" element={<ArtikelSkuPage />} />
-            </Route>
-            <Route path="auftrag" element={<SectionLayout sectionPath="/auftrag" />}>
-              <Route index element={<AuftragAktivePage />} />
-              <Route path="archiv" element={<AuftragArchivPage />} />
-            </Route>
-            <Route path="kunde" element={<SectionLayout sectionPath="/kunde" />}>
-              <Route index element={<KundeListePage />} />
-              <Route path="gruppen" element={<KundeGruppenPage />} />
-              <Route path="kontakte" element={<KundeKontaktePage />} />
-            </Route>
-            <Route path="*" element={<Navigate to="/artikel" replace />} />
-          </Route>
-        </Routes>
-      </Suspense>
-    </BrowserRouter>
-  );
 }
+
+const mapStateToProps = (state) => ({
+  status: selectAuthStatus(state),
+  needsCompanySetup: selectNeedsCompanySetup(state),
+});
+
+export default connect(mapStateToProps)(App);