mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-13 02:37:57 +01:00
Move error page to react.
This commit is contained in:
parent
86a63427b3
commit
a63b3802c6
@ -34,6 +34,7 @@ import AppConfig from './classes/app-config';
|
||||
import RegistrationSuccessPage from './components/registration-success-page';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import RegistrationCallbackPage from './components/registration-callback';
|
||||
import ErrorPage from './components/error-page';
|
||||
|
||||
const EditorPage = React.lazy(() => import('./components/editor-page'));
|
||||
const MapsPage = React.lazy(() => import('./components/maps-page'));
|
||||
@ -67,7 +68,9 @@ function Redirect({ to }) {
|
||||
|
||||
const App = (): ReactElement => {
|
||||
const locale = AppI18n.getDefaultLocale();
|
||||
const overwriteView = window.errorMvcView;
|
||||
|
||||
// This is a hack to move error handling on Spring MVC.
|
||||
return locale.message ? (
|
||||
<Provider store={store}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
@ -80,62 +83,77 @@ const App = (): ReactElement => {
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Redirect to="/c/login" />} />
|
||||
<Route path="/c/login" element={<LoginPage />} />
|
||||
<Route path="/c/registration" element={<RegistationPage />} />
|
||||
<Route path="/c/registration-google" element={<RegistrationCallbackPage />} />
|
||||
<Route path="/c/registration-success" element={<RegistrationSuccessPage />} />
|
||||
<Route path="/c/forgot-password" element={<ForgotPasswordPage />} />
|
||||
<Route
|
||||
path="/c/forgot-password-success"
|
||||
element={<ForgotPasswordSuccessPage />}
|
||||
/>
|
||||
<Route
|
||||
path="/c/maps/"
|
||||
element={
|
||||
<Suspense
|
||||
fallback={
|
||||
<div>
|
||||
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<MapsPage />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/c/maps/:id/edit"
|
||||
element={
|
||||
<Suspense
|
||||
fallback={
|
||||
<div>
|
||||
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<EditorPage isTryMode={false} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/c/maps/:id/try"
|
||||
element={
|
||||
<Suspense
|
||||
fallback={
|
||||
<div>
|
||||
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<EditorPage isTryMode={true} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</Router>
|
||||
{!overwriteView ? (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Redirect to="/c/login" />} />
|
||||
<Route path="/c/login" element={<LoginPage />} />
|
||||
<Route path="/c/registration" element={<RegistationPage />} />
|
||||
<Route path="/c/registration-google" element={<RegistrationCallbackPage />} />
|
||||
<Route path="/c/registration-success" element={<RegistrationSuccessPage />} />
|
||||
<Route path="/c/forgot-password" element={<ForgotPasswordPage />} />
|
||||
<Route
|
||||
path="/c/forgot-password-success"
|
||||
element={<ForgotPasswordSuccessPage />}
|
||||
/>
|
||||
<Route
|
||||
path="/c/maps/"
|
||||
element={
|
||||
<Suspense
|
||||
fallback={
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="dialog.loading"
|
||||
defaultMessage="Loading ..."
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<MapsPage />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/c/maps/:id/edit"
|
||||
element={
|
||||
<Suspense
|
||||
fallback={
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="dialog.loading"
|
||||
defaultMessage="Loading ..."
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<EditorPage isTryMode={false} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/c/maps/:id/try"
|
||||
element={
|
||||
<Suspense
|
||||
fallback={
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="dialog.loading"
|
||||
defaultMessage="Loading ..."
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<EditorPage isTryMode={true} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</Router>
|
||||
) : (
|
||||
<Router>
|
||||
<ErrorPage isSecurity={overwriteView === 'securityError'} />
|
||||
</Router>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
</MuiThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
|
60
packages/webapp/src/components/error-page/index.tsx
Normal file
60
packages/webapp/src/components/error-page/index.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import Header from '../layout/header';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import ReactGA from 'react-ga4';
|
||||
import { ErrorBody } from './styled';
|
||||
|
||||
export type ErrorPageType = {
|
||||
isSecurity: boolean;
|
||||
};
|
||||
|
||||
const ErrorPage = ({ isSecurity }: ErrorPageType): React.ReactElement => {
|
||||
const intl = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
document.title = intl.formatMessage({
|
||||
id: 'error.page-title',
|
||||
defaultMessage: 'Unexpected Error | WiseMapping',
|
||||
});
|
||||
ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: 'ErrorPage' });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header type="only-signup" />
|
||||
|
||||
<ErrorBody>
|
||||
<Typography variant="h3" component="h3">
|
||||
{isSecurity ? (
|
||||
<FormattedMessage
|
||||
id="error.security-error"
|
||||
defaultMessage="Mindmap cannot be opened."
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id="error.undexpected-error"
|
||||
defaultMessage="An unexpected error has occurred."
|
||||
/>
|
||||
)}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h5" component="h6">
|
||||
{isSecurity ? (
|
||||
<FormattedMessage
|
||||
id="error.security-error-msg"
|
||||
defaultMessage="You do not have enough right access to see this map. This map has been changed to private or deleted."
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id="error.undexpected-error-msg"
|
||||
defaultMessage="Unexpected error processing request"
|
||||
/>
|
||||
)}
|
||||
</Typography>
|
||||
</ErrorBody>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
7
packages/webapp/src/components/error-page/styled.ts
Normal file
7
packages/webapp/src/components/error-page/styled.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const ErrorBody = styled.div`
|
||||
margin: auto;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
`;
|
@ -6,15 +6,17 @@ import { Link } from 'react-router-dom';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
import logo from './logo-small.svg';
|
||||
import { JSX } from '@emotion/react/jsx-runtime';
|
||||
|
||||
interface HeaderProps {
|
||||
type: 'only-signup' | 'only-signin' | 'none';
|
||||
}
|
||||
|
||||
export const Header = ({ type }: HeaderProps): React.ReactElement => {
|
||||
let signUpButton;
|
||||
let text;
|
||||
let signInButton;
|
||||
let signUpButton: string | JSX.Element | undefined;
|
||||
let text: string | JSX.Element | undefined;
|
||||
let signInButton: string | JSX.Element | undefined;
|
||||
|
||||
if (type === 'only-signup') {
|
||||
text = (
|
||||
<span className="header-area-content-span">
|
||||
|
@ -7,6 +7,7 @@ import { createRoot } from 'react-dom/client';
|
||||
declare global {
|
||||
interface Window {
|
||||
newrelic: { noticeError: (Error) => void };
|
||||
errorMvcView: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user