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 ;
@@ -30,10 +31,57 @@ export default function App() {
userSession={userSession}
setUserSession={setUserSession}
notificationApi={notificationApi}
+ isReady={webSocketIsReady}
+ setIsReady={setWebSocketIsReady}
>
+
);
}
+
+const ReconnectingView = ({ webSocketIsReady }) => {
+ return (
+
+
+
+
+ Connecting...
+
+
+
+ );
+};
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() {
);
-}
+});
+
+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 (
-