wisemapping-frontend/packages/webapp/src/app.tsx

95 lines
3.5 KiB
TypeScript
Raw Normal View History

2022-08-16 05:00:49 +02:00
import React, { ReactElement, Suspense } from 'react';
import { IntlProvider } from 'react-intl';
import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';
import ForgotPasswordSuccessPage from './components/forgot-password-success-page';
import RegistationPage from './components/registration-page';
import LoginPage from './components/login-page';
import store from './redux/store';
import { ForgotPasswordPage } from './components/forgot-password-page';
import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from 'react-query';
import { theme } from './theme';
import AppI18n, { Locales } from './classes/app-i18n';
2022-02-06 01:42:43 +01:00
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
2022-05-29 19:22:57 +02:00
import ReactGA from 'react-ga4';
2022-02-16 05:39:52 +01:00
import AppConfig from './classes/app-config';
import withSessionExpirationHandling from './components/HOCs/withSessionExpirationHandling';
2022-08-16 05:35:27 +02:00
import RegistrationSuccessPage from './components/registration-success-page';
2021-02-27 21:15:48 +01:00
2022-08-16 05:00:49 +02:00
const EditorPage = React.lazy(() => import('./components/editor-page'));
const MapsPage = React.lazy(() => import('./components/maps-page'));
2022-02-06 01:42:43 +01:00
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
2022-02-06 01:42:43 +01:00
}
2021-02-27 21:15:48 +01:00
// Google Analytics Initialization.
2022-05-30 01:32:51 +02:00
ReactGA.initialize([
{
trackingId: AppConfig.getGoogleAnalyticsAccount(),
},
2022-05-30 01:32:51 +02:00
]);
2021-02-02 09:20:35 +01:00
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchIntervalInBackground: false,
staleTime: 5 * 1000 * 60, // 10 minutes
2021-02-23 07:37:29 +01:00
},
},
});
2021-02-02 09:20:35 +01:00
2021-02-23 07:37:29 +01:00
const App = (): ReactElement => {
const locale = AppI18n.getDefaultLocale();
const EnhacedEditorPage = withSessionExpirationHandling(EditorPage);
2022-02-21 03:50:03 +01:00
return locale.message ? (
<Provider store={store}>
<QueryClientProvider client={queryClient}>
<IntlProvider
locale={locale.code}
defaultLocale={Locales.EN.code}
messages={locale.message as Record<string, string>}
>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/c/login" />
</Route>
<Route path="/c/login" component={LoginPage} />
<Route path="/c/registration" component={RegistationPage} />
<Route path="/c/registration-success" component={RegistrationSuccessPage} />
<Route path="/c/forgot-password" component={ForgotPasswordPage} />
<Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
<Route exact path="/c/maps/">
<Suspense fallback={<div></div>}>
<MapsPage />
2022-08-16 05:00:49 +02:00
</Suspense>
</Route>
<Route exact path="/c/maps/:id/edit">
2022-11-03 02:17:00 +01:00
<EnhacedEditorPage isTryMode={false} />
</Route>
<Route exact path="/c/maps/:id/try">
2022-08-16 05:00:49 +02:00
<Suspense fallback={<div></div>}>
<EnhacedEditorPage isTryMode={true} />
</Suspense>
</Route>
</Switch>
</Router>
</ThemeProvider>
</StyledEngineProvider>
</IntlProvider>
</QueryClientProvider>
</Provider>
) : (
<div>Loading ... </div>
);
};
export default App;