From 25a2ff95e4f2f586a5df90f43000e329c1f59278 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sun, 18 Dec 2022 17:49:32 +0200
Subject: [PATCH] CheckingServerHealth component

---
 public/locales/en/translations.json           |  3 ++-
 public/locales/ro/translations.json           |  3 ++-
 src/components/App.js                         |  1 +
 .../components/CheckingServerHealth.js        | 23 +++++++++++++++++++
 .../components/ServerNotAvailable.js          |  2 +-
 src/features/server/availability/styles.js    | 11 ++++++++-
 .../providers/ServerAvailabilityProvider.js   |  3 ++-
 7 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/features/server/availability/components/CheckingServerHealth.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 402aacb..5f65ede 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -92,6 +92,7 @@
   "ServerAvailability": {
     "Unavailable": "Oops. Looks like the server is currently unavailable.",
     "TryAgain": "Try again in a few seconds",
-    "Retry": "Retry"
+    "Retry": "Retry",
+    "CheckingServerHealth": "Checking server health..."
   }
 }
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 28cf1a8..8b22adb 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -83,6 +83,7 @@
   "ServerAvailability": {
     "Unavailable": "Hopa! Se pare că serverul nu este disponibil momentan.",
     "TryAgain": "Încercați din nou în câteva secunde",
-    "Retry": "Reîncercați"
+    "Retry": "Reîncercați",
+    "CheckingServerHealth": "Se verifică starea serverului..."
   }
 }
diff --git a/src/components/App.js b/src/components/App.js
index 080dc28..c9242c4 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -27,6 +27,7 @@ export default function App() {
   return (
     <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
       <Switch>
+        <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
         <PrivateRoute
           path="/server-not-available"
           component={ServerNotAvailable}
diff --git a/src/features/server/availability/components/CheckingServerHealth.js b/src/features/server/availability/components/CheckingServerHealth.js
new file mode 100644
index 0000000..ef765f5
--- /dev/null
+++ b/src/features/server/availability/components/CheckingServerHealth.js
@@ -0,0 +1,23 @@
+import React from "react";
+import useStyles from "../styles";
+import { Grid, Typography } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import classnames from "classnames";
+
+const CheckingServerHealth = () => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container className={classnames(classes.container, classes.success)}>
+      <Typography
+        variant="h1"
+        className={classnames(classes.textRow, classes.singleText)}
+      >
+        {t("ServerAvailability.CheckingServerHealth")}
+      </Typography>
+    </Grid>
+  );
+};
+
+export default CheckingServerHealth;
diff --git a/src/features/server/availability/components/ServerNotAvailable.js b/src/features/server/availability/components/ServerNotAvailable.js
index 21b7c95..df196b4 100644
--- a/src/features/server/availability/components/ServerNotAvailable.js
+++ b/src/features/server/availability/components/ServerNotAvailable.js
@@ -11,7 +11,7 @@ const ServerNotAvailable = () => {
   const { t } = useTranslation();
 
   return (
-    <Grid container className={classes.container}>
+    <Grid container className={classnames(classes.container, classes.error)}>
       <Paper classes={{ root: classes.paperRoot }}>
         <div className={classes.imageFrame}>
           <img
diff --git a/src/features/server/availability/styles.js b/src/features/server/availability/styles.js
index 881f3a9..b24a7b1 100644
--- a/src/features/server/availability/styles.js
+++ b/src/features/server/availability/styles.js
@@ -8,11 +8,16 @@ export default makeStyles((theme) => ({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: theme.palette.error.dark,
     position: "absolute",
     top: 0,
     left: 0
   },
+  error: {
+    backgroundColor: theme.palette.error.dark
+  },
+  success: {
+    backgroundColor: theme.palette.success.light
+  },
   imageFrame: {
     display: "flex",
     alignItems: "center",
@@ -41,6 +46,10 @@ export default makeStyles((theme) => ({
     fontWeight: 300,
     color: theme.palette.text.hint
   },
+  singleText: {
+    fontWeight: 300,
+    color: theme.palette.info.main
+  },
   button: {
     backgroundColor: theme.palette.error.dark,
     textTransform: "none",
diff --git a/src/features/server/providers/ServerAvailabilityProvider.js b/src/features/server/providers/ServerAvailabilityProvider.js
index 849fd30..24d22d6 100644
--- a/src/features/server/providers/ServerAvailabilityProvider.js
+++ b/src/features/server/providers/ServerAvailabilityProvider.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Redirect } from "react-router-dom";
 import { useServerApi } from "../api";
+import CheckingServerHealth from "../availability/components/CheckingServerHealth";
 
 const ServerAvailabilityProvider = ({ children }) => {
   const [ok, setOk] = useState(null);
@@ -14,7 +15,7 @@ const ServerAvailabilityProvider = ({ children }) => {
     });
   }, [checkHealth]);
 
-  if (ok === null) return <span>Checking server health...</span>;
+  if (ok === null) return <CheckingServerHealth />;
   if (ok === false) return <Redirect to="/server-not-available" />;
   return <>{children}</>;
 };