From b02522f5784c8c684e4143688d719d96bd08adaa Mon Sep 17 00:00:00 2001
From: mrflick72 <valerio.vaudi@gmail.com>
Date: Sat, 2 Sep 2023 14:33:00 +0200
Subject: [PATCH] DefaultGenericErrorPage from plain js to typescript

---
 .../frontend/app/errors/DefaultErrorPage.js   |  8 ------
 .../app/errors/DefaultGenericErrorPage.tsx    | 28 +++++++++++++++++++
 src/main/frontend/package.json                | 10 +++----
 src/main/frontend/webpack.config.js           |  4 +--
 4 files changed, 34 insertions(+), 16 deletions(-)
 delete mode 100644 src/main/frontend/app/errors/DefaultErrorPage.js
 create mode 100644 src/main/frontend/app/errors/DefaultGenericErrorPage.tsx

diff --git a/src/main/frontend/app/errors/DefaultErrorPage.js b/src/main/frontend/app/errors/DefaultErrorPage.js
deleted file mode 100644
index a8d1aa56..00000000
--- a/src/main/frontend/app/errors/DefaultErrorPage.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import ReactDOM from "react-dom";
-import React from "react";
-import DefaultGenericErrorPage from "./DefaultGenericErrorPage";
-
-if (document.getElementById('app')) {
-    let errors = document.getElementById('errors').innerHTML
-    ReactDOM.render(<DefaultGenericErrorPage messages={errors}/>, document.getElementById('app'));
-}
\ No newline at end of file
diff --git a/src/main/frontend/app/errors/DefaultGenericErrorPage.tsx b/src/main/frontend/app/errors/DefaultGenericErrorPage.tsx
new file mode 100644
index 00000000..0e0b0d01
--- /dev/null
+++ b/src/main/frontend/app/errors/DefaultGenericErrorPage.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import {ThemeProvider, Typography} from "@mui/material";
+import theme from "../component/styles";
+import Template from "../component/Template";
+import {SentimentVeryDissatisfied} from "@mui/icons-material";
+
+interface DefaultGenericErrorPageProps {
+    messages: string
+}
+interface ErrorMessage {
+    defaultMessage: string
+}
+
+const DefaultGenericErrorPage: React.FC<DefaultGenericErrorPageProps> = ({messages}) => {
+    let errors : ErrorMessage  = JSON.parse(messages)
+    return <ThemeProvider theme={theme}>
+        <Template maxWidth="sm">
+            <Typography variant="h3" component="h3">
+                <SentimentVeryDissatisfied fontSize="large"/> {errors.defaultMessage}
+            </Typography>
+
+        </Template>
+    </ThemeProvider>
+
+}
+
+export default DefaultGenericErrorPage
\ No newline at end of file
diff --git a/src/main/frontend/package.json b/src/main/frontend/package.json
index 4d5be74c..9b7dbdc9 100644
--- a/src/main/frontend/package.json
+++ b/src/main/frontend/package.json
@@ -2,12 +2,7 @@
   "name": "vautehenticator-asset",
   "version": "0.7",
   "description": "VAuthenticator UI Asset library",
-  "babel": {
-    "presets": [
-      "@babel/react",
-      "@babel/env"
-    ]
-  },
+
   "scripts": {
     "build": "webpack --config webpack.config.js --mode=development",
     "production-build": "webpack --config webpack.config.js --mode=production",
@@ -28,6 +23,9 @@
     "webpack-cli": "5.1.4"
   },
   "dependencies": {
+    "@types/node": "^20.5.8",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "typescript": "^5.2.2",
     "@date-io/moment": "^2.17.0",
     "@emotion/react": "^11.11.1",
diff --git a/src/main/frontend/webpack.config.js b/src/main/frontend/webpack.config.js
index 4ae7db9b..1ae3ae9a 100644
--- a/src/main/frontend/webpack.config.js
+++ b/src/main/frontend/webpack.config.js
@@ -4,7 +4,7 @@ const BUID_DIR = path.resolve(__dirname + "/dist");
 
 module.exports = {
     entry: {
-        "default_error": path.resolve(__dirname, './app/errors/DefaultErrorPage.js'),
+        "default_error": path.resolve(__dirname, './app/errors/DefaultGenericErrorPage.tsx'),
         "404_error": path.resolve(__dirname, './app/errors/400ErrorPage.js'),
         "400_error": path.resolve(__dirname, './app/errors/404ErrorPage.js'),
         "500_error": path.resolve(__dirname, './app/errors/500ErrorPage.js'),
@@ -34,7 +34,7 @@ module.exports = {
                 exclude: /node_modules$/,
             },
             {
-                test: path.join(__dirname, "."),
+                test: /\.js$/,
                 exclude: path.resolve(__dirname, "node_modules"),
                 use: {
                     loader: "babel-loader",