vmario
/
wisemapping-frontend
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move error page to react.

This commit is contained in:
Paulo Gustavo Veiga 2023-07-30 22:30:32 -07:00
parent 86a63427b3
commit a63b3802c6
5 changed files with 147 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
packages/webapp/src/app.tsx
View File

@ -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
View 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
View File

@ -0,0 +1,7 @@
import styled from 'styled-components';
export const ErrorBody = styled.div`
margin: auto;
width: 90%;
padding: 10px;
`;

8
packages/webapp/src/components/layout/header/index.tsx
View File

@ -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">

1
packages/webapp/src/index.tsx
View File

@ -7,6 +7,7 @@ import { createRoot } from 'react-dom/client';
declare global {
interface Window {
newrelic: { noticeError: (Error) => void };
errorMvcView: string;
}
}