From a63b3802c66da13fdd0b90915a29bba65026a4a7 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sun, 30 Jul 2023 22:30:32 -0700
Subject: [PATCH] Move error page to react.

---
 packages/webapp/src/app.tsx                   | 130 ++++++++++--------
 .../src/components/error-page/index.tsx       |  60 ++++++++
 .../src/components/error-page/styled.ts       |   7 +
 .../src/components/layout/header/index.tsx    |   8 +-
 packages/webapp/src/index.tsx                 |   1 +
 5 files changed, 147 insertions(+), 59 deletions(-)
 create mode 100644 packages/webapp/src/components/error-page/index.tsx
 create mode 100644 packages/webapp/src/components/error-page/styled.ts

diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index d58a1dfb..23784aa4 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -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>
diff --git a/packages/webapp/src/components/error-page/index.tsx b/packages/webapp/src/components/error-page/index.tsx
new file mode 100644
index 00000000..f0f1ebdc
--- /dev/null
+++ b/packages/webapp/src/components/error-page/index.tsx
@@ -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;
diff --git a/packages/webapp/src/components/error-page/styled.ts b/packages/webapp/src/components/error-page/styled.ts
new file mode 100644
index 00000000..5b1c6105
--- /dev/null
+++ b/packages/webapp/src/components/error-page/styled.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const ErrorBody = styled.div`
+  margin: auto;
+  width: 90%;
+  padding: 10px;
+`;
diff --git a/packages/webapp/src/components/layout/header/index.tsx b/packages/webapp/src/components/layout/header/index.tsx
index ae411760..38a890fd 100644
--- a/packages/webapp/src/components/layout/header/index.tsx
+++ b/packages/webapp/src/components/layout/header/index.tsx
@@ -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">
diff --git a/packages/webapp/src/index.tsx b/packages/webapp/src/index.tsx
index d3e2c624..d6759619 100644
--- a/packages/webapp/src/index.tsx
+++ b/packages/webapp/src/index.tsx
@@ -7,6 +7,7 @@ import { createRoot } from 'react-dom/client';
 declare global {
   interface Window {
     newrelic: { noticeError: (Error) => void };
+    errorMvcView: string;
   }
 }