vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-21 14:17:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move error page to react.

Browse Source
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 RegistrationSuccessPage from './components/registration-success-page';
import { ThemeProvider } from '@emotion/react'; import { ThemeProvider } from '@emotion/react';
import RegistrationCallbackPage from './components/registration-callback'; import RegistrationCallbackPage from './components/registration-callback';
import ErrorPage from './components/error-page';
const EditorPage = React.lazy(() => import('./components/editor-page')); const EditorPage = React.lazy(() => import('./components/editor-page'));
const MapsPage = React.lazy(() => import('./components/maps-page')); const MapsPage = React.lazy(() => import('./components/maps-page'));
@ -67,7 +68,9 @@ function Redirect({ to }) {
const App = (): ReactElement => { const App = (): ReactElement => {
const locale = AppI18n.getDefaultLocale(); const locale = AppI18n.getDefaultLocale();
const overwriteView = window.errorMvcView;
// This is a hack to move error handling on Spring MVC.
return locale.message ? ( return locale.message ? (
<Provider store={store}> <Provider store={store}>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
@ -80,62 +83,77 @@ const App = (): ReactElement => {
<MuiThemeProvider theme={theme}> <MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<Router> {!overwriteView ? (
<Routes> <Router>
<Route path="/" element={<Redirect to="/c/login" />} /> <Routes>
<Route path="/c/login" element={<LoginPage />} /> <Route path="/" element={<Redirect to="/c/login" />} />
<Route path="/c/registration" element={<RegistationPage />} /> <Route path="/c/login" element={<LoginPage />} />
<Route path="/c/registration-google" element={<RegistrationCallbackPage />} /> <Route path="/c/registration" element={<RegistationPage />} />
<Route path="/c/registration-success" element={<RegistrationSuccessPage />} /> <Route path="/c/registration-google" element={<RegistrationCallbackPage />} />
<Route path="/c/forgot-password" element={<ForgotPasswordPage />} /> <Route path="/c/registration-success" element={<RegistrationSuccessPage />} />
<Route <Route path="/c/forgot-password" element={<ForgotPasswordPage />} />
path="/c/forgot-password-success" <Route
element={<ForgotPasswordSuccessPage />} path="/c/forgot-password-success"
/> element={<ForgotPasswordSuccessPage />}
<Route />
path="/c/maps/" <Route
element={ path="/c/maps/"
<Suspense element={
fallback={ <Suspense
<div> fallback={
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." /> <div>
</div> <FormattedMessage
} id="dialog.loading"
> defaultMessage="Loading ..."
<MapsPage /> />
</Suspense> </div>
} }
/> >
<Route <MapsPage />
path="/c/maps/:id/edit" </Suspense>
element={ }
<Suspense />
fallback={ <Route
<div> path="/c/maps/:id/edit"
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." /> element={
</div> <Suspense
} fallback={
> <div>
<EditorPage isTryMode={false} /> <FormattedMessage
</Suspense> id="dialog.loading"
} defaultMessage="Loading ..."
/> />
<Route </div>
path="/c/maps/:id/try" }
element={ >
<Suspense <EditorPage isTryMode={false} />
fallback={ </Suspense>
<div> }
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." /> />
</div> <Route
} path="/c/maps/:id/try"
> element={
<EditorPage isTryMode={true} /> <Suspense
</Suspense> fallback={
} <div>
/> <FormattedMessage
</Routes> id="dialog.loading"
</Router> defaultMessage="Loading ..."
/>
</div>
}
>
<EditorPage isTryMode={true} />
</Suspense>
}
/>
</Routes>
</Router>
) : (
<Router>
<ErrorPage isSecurity={overwriteView === 'securityError'} />
</Router>
)}
</ThemeProvider> </ThemeProvider>
</MuiThemeProvider> </MuiThemeProvider>
</StyledEngineProvider> </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 Button from '@mui/material/Button';
import logo from './logo-small.svg'; import logo from './logo-small.svg';
import { JSX } from '@emotion/react/jsx-runtime';
interface HeaderProps { interface HeaderProps {
type: 'only-signup' | 'only-signin' | 'none'; type: 'only-signup' | 'only-signin' | 'none';
} }
export const Header = ({ type }: HeaderProps): React.ReactElement => { export const Header = ({ type }: HeaderProps): React.ReactElement => {
let signUpButton; let signUpButton: string | JSX.Element | undefined;
let text; let text: string | JSX.Element | undefined;
let signInButton; let signInButton: string | JSX.Element | undefined;
if (type === 'only-signup') { if (type === 'only-signup') {
text = ( text = (
<span className="header-area-content-span"> <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 { declare global {
interface Window { interface Window {
newrelic: { noticeError: (Error) => void }; newrelic: { noticeError: (Error) => void };
errorMvcView: string;
} }
} }