124 lines
3.2 KiB
JavaScript
124 lines
3.2 KiB
JavaScript
import { PureComponent, lazy, Suspense } from 'react';
|
|
import Alert from '@mui/material/Alert';
|
|
import Box from '@mui/material/Box';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import authAutomat from './automats/authAutomat';
|
|
import LoginPage from './components/LoginPage';
|
|
|
|
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 (
|
|
<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',
|
|
'hasAuth',
|
|
'hasCompany',
|
|
'retryNotification',
|
|
]);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unsubscribe?.();
|
|
}
|
|
|
|
render() {
|
|
const { status, user, hasAuth, hasCompany, retryNotification } = this.state;
|
|
const isAuthed = Boolean(hasAuth ?? (status === 'authed' && user));
|
|
const isCompanySelected = Boolean(hasCompany ?? (isAuthed && user?.selectedCompanyId != null));
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: 'var(--df-vh, 100vh)',
|
|
bgcolor: 'background.default',
|
|
gap: 2.5,
|
|
p: 2,
|
|
}}
|
|
>
|
|
{retryNotification ? (
|
|
<Alert
|
|
severity="warning"
|
|
variant="outlined"
|
|
sx={{
|
|
maxWidth: 480,
|
|
alignItems: 'center',
|
|
bgcolor: 'background.paper',
|
|
boxShadow: 1,
|
|
}}
|
|
>
|
|
{retryNotification}
|
|
</Alert>
|
|
) : null}
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
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}`);
|
|
}
|
|
return <LoginPage />;
|
|
}
|
|
|
|
const isOAuthAuthorize =
|
|
typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize';
|
|
|
|
return (
|
|
<>
|
|
<Suspense fallback={<PageFallback />}>
|
|
{!isCompanySelected ? (
|
|
isOAuthAuthorize ? (
|
|
<OAuthAuthorizePage />
|
|
) : (
|
|
<CompanySetupDialog />
|
|
)
|
|
) : (
|
|
<AppRouter />
|
|
)}
|
|
</Suspense>
|
|
{SseMonitor ? (
|
|
<Suspense fallback={null}>
|
|
<SseMonitor />
|
|
</Suspense>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|