From 8afd4213685870b544949dc556cd5bf3ea789ed8 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sat, 1 Jul 2023 22:33:19 +0200
Subject: [PATCH] use memo for dashboard

---
 src/App.js                      | 50 ++++++++++++++++++++++++++++++++-
 src/Components/LogCard/index.js |  2 +-
 src/Pages/Dashboard/index.js    | 16 ++++-------
 src/index.css                   | 11 ++++++--
 src/index.js                    |  2 +-
 src/utils.js                    |  4 ++-
 6 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index 2a22e8a..c1b7f09 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import "antd/dist/reset.css";
 import "./App.css";
 import PageContent from "./Components/PageContent";
@@ -11,6 +11,7 @@ export default function App() {
   const [notificationApi, notificationContextHolder] =
     notification.useNotification();
   const { userSession, setUserSession } = UseUserSession();
+  const [webSocketIsReady, setWebSocketIsReady] = useState(true);
 
   if (!userSession) {
     return <Login />;
@@ -30,10 +31,57 @@ export default function App() {
         userSession={userSession}
         setUserSession={setUserSession}
         notificationApi={notificationApi}
+        isReady={webSocketIsReady}
+        setIsReady={setWebSocketIsReady}
       >
+        <ReconnectingView webSocketIsReady={webSocketIsReady} />
         <SideMenu userSession={userSession} setUserSession={setUserSession} />
         <PageContent />
       </WebSocketProvider>
     </Layout>
   );
 }
+
+const ReconnectingView = ({ webSocketIsReady }) => {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        display: webSocketIsReady ? "none" : "block",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 9999,
+      }}
+    >
+      <svg id="loading-reconnecting" className="loading" viewBox="0 0 1350 600">
+        <text x="50%" y="50%" fill="transparent" textAnchor="middle">
+          J A N E X
+        </text>
+      </svg>
+      <div
+        style={{
+          height: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <span
+          style={{
+            marginTop: 80,
+            fontWeight: "bold",
+            fontSize: 24,
+            letterSpacing: 2,
+          }}
+        >
+          Connecting...
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/Components/LogCard/index.js b/src/Components/LogCard/index.js
index 555dd43..7fcf966 100644
--- a/src/Components/LogCard/index.js
+++ b/src/Components/LogCard/index.js
@@ -67,7 +67,7 @@ export default function LogCard({ type }) {
         webSocketContext.GroupTasks.find(
           (groupTask) => groupTask.Id === groupTaskStep.GroupTasksId
         ).Category
-    ).groups.find(
+    )?.groups.find(
       (groups) =>
         groups.id ===
         webSocketContext.GroupTasks.find(
diff --git a/src/Pages/Dashboard/index.js b/src/Pages/Dashboard/index.js
index b13ca94..d544fa7 100644
--- a/src/Pages/Dashboard/index.js
+++ b/src/Pages/Dashboard/index.js
@@ -1,8 +1,8 @@
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { WebSocketContext } from "../../utils";
 import { Card } from "antd";
 
-const randomGreeting = Math.floor(Math.random() * 20);
+const randomGreeting = Math.floor(Math.random() * 18);
 
 function getGreeting(name) {
   const currentTime = new Date();
@@ -29,8 +29,6 @@ function getGreeting(name) {
       `Hallo, ${name}! Bereit für neue Herausforderungen? Du wirst sie meistern!`,
       `Guten Morgen! Wie war deine Nacht, ${name}? Du bist auf dem Weg zum Erfolg!`,
       `Hallo, ${name}! Starte den Tag mit positiver Energie! Du bist unaufhaltsam!`,
-      `Ich hoffe, du hast gut geschlafen, ${name}! Lass deine Träume Wirklichkeit werden!`,
-      `Hallo, ${name}! Was erwartet dich heute? Bleibe fokussiert und motiviert!`,
     ];
     //greeting = nightGreetings[Math.floor(Math.random() * nightGreetings.length)];
     greeting = nightGreetings[randomGreeting];
@@ -54,8 +52,6 @@ function getGreeting(name) {
       `Starte den Tag mit einem Lächeln und einer positiven Einstellung, ${name}! Du bist stark!`,
       `Guten Morgen! Glaube an deine Stärken und gehe mit Zuversicht voran, ${name}!`,
       `Hallo, ${name}! Nutze den Tag, um dein Bestes zu geben! Du bist unaufhaltsam!`,
-      `Ein neuer Tag, um zu wachsen und zu lernen, ${name}! Sei offen für neue Möglichkeiten!`,
-      `Guten Morgen! Du hast das Zeug dazu, Großes zu erreichen, ${name}! Glaube an dich!`,
     ];
     //greeting = morningGreetings[Math.floor(Math.random() * morningGreetings.length)];
     greeting = morningGreetings[randomGreeting];
@@ -79,8 +75,6 @@ function getGreeting(name) {
       `Ich wünsche dir einen angenehmen Nachmittag, ${name}! Verfolge deine Ziele mit Leidenschaft!`,
       `Hallo, ${name}! Wie geht es dir heute? Denke daran, wie weit du schon gekommen bist!`,
       `Freut mich, dass du da bist, ${name}! Glaube an dich und gehe deinen Weg!`,
-      `Hallo, ${name}! Was hast du heute vor? Halte den Fokus auf das Wesentliche!`,
-      `Schön, dich wiederzusehen, ${name}! Du bist auf dem Weg zum Erfolg!`,
     ];
     //greeting = afternoonGreetings[Math.floor(Math.random() * afternoonGreetings.length)];
     greeting = afternoonGreetings[randomGreeting];
@@ -111,7 +105,7 @@ function getGreeting(name) {
   return greeting;
 }
 
-export default function Dashboard() {
+const Dashboard = React.memo(() => {
   const webSocketContext = useContext(WebSocketContext);
 
   return (
@@ -121,4 +115,6 @@ export default function Dashboard() {
       </h1>
     </Card>
   );
-}
+});
+
+export default Dashboard;
diff --git a/src/index.css b/src/index.css
index a8d6e93..c951020 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,21 +13,28 @@ code {
     monospace;
 }
 
-#loading {
+.loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
-#loading text {
+.loading text {
   stroke: #e67e22;
   font-size: 300px;
   font-weight: 700;
   stroke-width: 10;
+}
+
+#loading-init text {
   animation: textAnimate 0.5s;
 }
 
+#loading-reconnecting text {
+  animation: textAnimate 1s infinite;
+}
+
 @keyframes textAnimate {
   0% {
     stroke-dasharray: 0 50%;
diff --git a/src/index.js b/src/index.js
index 47d7141..d577f5a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,7 @@ import "./i18n";
 
 const Loading = () => {
   return (
-    <svg id="loading" viewBox="0 0 1350 600">
+    <svg id="loading-init" className="loading" viewBox="0 0 1350 600">
       <text x="50%" y="50%" fill="transparent" textAnchor="middle">
         J A N E X
       </text>
diff --git a/src/utils.js b/src/utils.js
index d0a99c8..1b205e2 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -217,8 +217,10 @@ export function WebSocketProvider({
   userSession,
   setUserSession,
   notificationApi,
+  isReady,
+  setIsReady,
 }) {
-  const [isReady, setIsReady] = useState(false);
+  //const [isReady, setIsReady] = useState(false);
   const [connectionBadgeStatus, setConnectionBadgeStatus] = useState(
     webSocketContextPreview.ConnectionBadgeStatus
   );