76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
import { PureComponent, 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';
|
|
|
|
function PageFallback() {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flex: 1,
|
|
minHeight: 200,
|
|
}}
|
|
>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
class App extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = authAutomat.state;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsubscribe = authAutomat.subscribe(this, ['status', 'user']);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unsubscribe?.();
|
|
}
|
|
|
|
render() {
|
|
const { status, user } = this.state;
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: 'var(--df-vh, 100vh)',
|
|
bgcolor: 'background.default',
|
|
}}
|
|
>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (status !== 'authed') {
|
|
return <LoginPage />;
|
|
}
|
|
|
|
if (user?.selectedCompanyId == null) {
|
|
return <CompanySetupDialog />;
|
|
}
|
|
|
|
return (
|
|
<Suspense fallback={<PageFallback />}>
|
|
<RouterProvider router={router} />
|
|
</Suspense>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|