using memo for rendiner stl because model rotating is not working after react render

package-lock.json

@@ -17339,9 +17339,9 @@
       }
     },
     "node_modules/three": {
-      "version": "0.153.0",
+      "version": "0.154.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.153.0.tgz",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
-      "integrity": "sha512-OCP2/uQR6GcDpSLnJt/3a4mdS0kNWcbfUXIwLoEMgLzEUIVIYsSDwskpmOii/AkDM+BBwrl6+CKgrjX9+E2aWg==",
+      "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==",
       "peer": true
     },
     "node_modules/three-stdlib": {

src/Components/AppRoutes/index.js

@@ -22,10 +22,12 @@ export default function AppRoutes() {
   return (
     <Routes>
       <Route path="/" element={<Dashboard />} />
+
       <Route
         path={Constants.ROUTE_PATHS.GROUP_TASKS}
         element={<GroupTasks isGroupTasksViewModalOpen={false} />}
       />
+
       <Route
         path={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + ":paramGroupTaskId"}
         element={<GroupTasks isGroupTasksViewModalOpen={true} />}

src/Pages/Dashboard/index.js

@@ -2,10 +2,9 @@ import { useContext } from "react";
 import { WebSocketContext } from "../../utils";
 import { Card } from "antd";
 
-export default function Dashboard() {
+const randomGreeting = Math.floor(Math.random() * 20);
-  const webSocketContext = useContext(WebSocketContext);
 
-  const getGreeting = (name) => {
+function getGreeting(name) {
   const currentTime = new Date();
   const currentHour = currentTime.getHours();
   let greeting;
@@ -33,8 +32,8 @@ export default function Dashboard() {
       `Ich hoffe, du hast gut geschlafen, ${name}! Lass deine Träume Wirklichkeit werden!`,
       `Hallo, ${name}! Was erwartet dich heute? Bleibe fokussiert und motiviert!`,
     ];
-      greeting =
+    //greeting = nightGreetings[Math.floor(Math.random() * nightGreetings.length)];
-        nightGreetings[Math.floor(Math.random() * nightGreetings.length)];
+    greeting = nightGreetings[randomGreeting];
   } else if (currentHour < 12) {
     const morningGreetings = [
       `Guten Morgen, ${name}! Ein weiterer Tag, um deinem Ziel näher zu kommen!`,
@@ -58,8 +57,8 @@ export default function Dashboard() {
       `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 =
+    //greeting = morningGreetings[Math.floor(Math.random() * morningGreetings.length)];
-        morningGreetings[Math.floor(Math.random() * morningGreetings.length)];
+    greeting = morningGreetings[randomGreeting];
   } else if (currentHour < 18) {
     const afternoonGreetings = [
       `Guten Tag, ${name}! Ein weiterer Moment, um deinem Ziel näher zu kommen!`,
@@ -83,10 +82,8 @@ export default function Dashboard() {
       `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 =
+    //greeting = afternoonGreetings[Math.floor(Math.random() * afternoonGreetings.length)];
-        afternoonGreetings[
+    greeting = afternoonGreetings[randomGreeting];
-          Math.floor(Math.random() * afternoonGreetings.length)
-        ];
   } else {
     const eveningGreetings = [
       `Guten Abend, ${name}! Ein weiterer Tag ist fast vorbei! Du hast viel erreicht!`,
@@ -108,11 +105,14 @@ export default function Dashboard() {
       `Hallo, ${name}! Wie war deine Arbeit heute? Erhole dich und sei stolz auf dich!`,
       `Guten Abend! Du bist auf dem richtigen Weg zum Erfolg, ${name}! Glaube an dich!`,
     ];
-      greeting =
+    //greeting = eveningGreetings[Math.floor(Math.random() * eveningGreetings.length)];
-        eveningGreetings[Math.floor(Math.random() * eveningGreetings.length)];
+    greeting = eveningGreetings[randomGreeting];
   }
   return greeting;
-  };
+}
+
+export default function Dashboard() {
+  const webSocketContext = useContext(WebSocketContext);
 
   return (
     <Card>

src/Pages/GroupTasks/Overview/GroupTasksViewModal.js

@@ -14,7 +14,7 @@ import {
   Tag,
   notification,
 } from "antd";
-import { useContext, useRef, useState } from "react";
+import { useContext, useMemo, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   Constants,
@@ -468,6 +468,7 @@ export default function GroupTasksViewModal({ isOpen }) {
       footer={<Button onClick={handleCancel}>{t("buttonClose")}</Button>}
     >
       {notificationContextHolder}
+
       {webSocketContext.GroupTasks.map((groupTask) => {
         if (groupTask.Id === paramGroupTaskId) {
           let currentGroupTask = groupTask;
@@ -818,6 +819,30 @@ function InputRequiredHandler({
   );
 }
 
+const MyStlViewer = ({ url }) => {
+  const memoizedCode = useMemo(() => {
+    return (
+      <StlViewer
+        style={{ top: 0, left: 0, height: "100%" }}
+        orbitControls
+        modelProps={{
+          color: Constants.COLORS.SECONDARY,
+          scale: 1,
+          positionX: 200,
+          positionY: 200,
+        }}
+        shadows
+        floorProps={{ gridWidth: 400 }}
+        url={url}
+        onError={(err) => console.error(err)}
+        onFinishLoading={(ev) => console.log(ev)}
+      />
+    );
+  }, [url]);
+
+  return memoizedCode;
+};
+
 function GroupTaskStepLogHandler({ currentGroupTaskId, log, files }) {
   const getDownloadUrl = (file) => {
     return `${Constants.STATIC_CONTENT_ADDRESS}grouptasks/${currentGroupTaskId}/${file.SystemFileName}`;
@@ -871,27 +896,12 @@ function GroupTaskStepLogHandler({ currentGroupTaskId, log, files }) {
         elements.push(
           <div key={"tag" + nonImageFile.SystemFileName}>
             <div style={{ height: 300, backgroundColor: "#fff" }}>
-              <StlViewer
+              <MyStlViewer url={getDownloadUrl(nonImageFile)} />
-                style={{ top: 0, left: 0, height: "100%" }}
-                orbitControls
-                modelProps={{
-                  color: Constants.COLORS.SECONDARY,
-                  scale: 1,
-                  positionX: 200,
-                  positionY: 200,
-                }}
-                shadows
-                floorProps={{ gridWidth: 400 }}
-                url={getDownloadUrl(nonImageFile)}
-                onFinishLoading={(ev) => {
-                  console.log("ev", ev);
-                }}
-              />
             </div>
             {getTag(nonImageFile)}
           </div>
         );
-        console.log("stl download", nonImageFile.SystemFileName);
+        console.log("url", getDownloadUrl(nonImageFile));
       } else {
         elements.push(getTag(nonImageFile));
       }

src/index.js

@@ -10,7 +10,7 @@ const Loading = () => {
   return (
     <svg id="loading" viewBox="0 0 1350 600">
       <text x="50%" y="50%" fill="transparent" textAnchor="middle">
-        JANEX
+        J A N E X
       </text>
     </svg>
   );