From 09b79c66bf0e25ae2d63f135bec603c0743940df Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 1 Jun 2023 19:44:50 +0200
Subject: [PATCH] Added a warning to the Home page if the backend is
 unavailable

---
 client/src/pages/tools/general/Home/Home.jsx | 44 ++++++++++++--------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/client/src/pages/tools/general/Home/Home.jsx b/client/src/pages/tools/general/Home/Home.jsx
index 306264d..806f315 100644
--- a/client/src/pages/tools/general/Home/Home.jsx
+++ b/client/src/pages/tools/general/Home/Home.jsx
@@ -2,23 +2,33 @@ import "./styles.sass";
 import {faFire, faKeyboard, faTerminal, faUnlock} from "@fortawesome/free-solid-svg-icons";
 import HomeTool from "@/pages/tools/general/Home/components/HomeTool";
 import HomeElement from "@/pages/tools/general/Home/components/HomeElement";
+import ErrorArea from "@/common/components/ErrorArea/index.js";
+import {useContext} from "react";
+import {StatusContext} from "@/common/contexts/Status/index.js";
 
-export const Home = () => (
-    <>
-        <h1 className="home-header">Hi!</h1>
-        <p className="home-subtext">Diese Webseite wurde erstellt um viele alltägliche Aufgaben (wie z. B. das
-            Installieren eines Minecraft-Servers oder updaten einer Software) auf einer Seite zu vereinen und in Tools
-            zu unterteilen. Probier’s doch einfach mal aus!</p>
-        <div className="tool-area">
-            <HomeElement icon={faFire} text="Beliebte Tools" />
+export const Home = () => {
+    const backendAvailable = useContext(StatusContext);
 
-            <div className="tool-list">
-                <HomeTool icon={faTerminal} title="Remote-SSH" description="Baue über das Web eine Sitzung mit deinem Linux-Server auf" />
-                <HomeTool icon={faUnlock} title="Base64 Decode" description="Entschlüssel ganz einfach Base64-Kodierte Strings" />
+    return (
+        <>
+            {!backendAvailable && <ErrorArea error="Es konnte keine Verbindung zum Backend-Server hergestellt werden."/>}
+            <h1 className="home-header">Hi!</h1>
+            <p className="home-subtext">Diese Webseite wurde erstellt um viele alltägliche Aufgaben (wie z. B. das
+                Installieren eines Minecraft-Servers oder updaten einer Software) auf einer Seite zu vereinen und in
+                Tools zu unterteilen. Probier’s doch einfach mal aus!</p>
+            <div className="tool-area">
+                <HomeElement icon={faFire} text="Beliebte Tools"/>
+
+                <div className="tool-list">
+                    <HomeTool icon={faTerminal} title="Remote-SSH"
+                              description="Baue über das Web eine Sitzung mit deinem Linux-Server auf"/>
+                    <HomeTool icon={faUnlock} title="Base64 Decode"
+                              description="Entschlüssel ganz einfach Base64-Kodierte Strings"/>
+                </div>
             </div>
-        </div>
-        <div className="shortcut-area">
-            <HomeElement icon={faKeyboard} text="Shortcuts" />
-        </div>
-    </>
-)
\ No newline at end of file
+            <div className="shortcut-area">
+                <HomeElement icon={faKeyboard} text="Shortcuts"/>
+            </div>
+        </>
+    );
+}
\ No newline at end of file