Finished Status Bar

Submit-Validation not yet implemented

anwendung/src/components/StatusBar.jsx

@@ -1,32 +1,36 @@
-import React, {useState} from "react"
-import {baseURL} from "@/components/Constants";
-import {console} from "next/dist/compiled/@edge-runtime/primitives/console";
+import React, { useState, useEffect } from "react";
+import { baseURL } from "@/components/Constants";
 
-export default function StatusBar(p)
-{
+export default function StatusBar(p) {
     const module = p.module;
+    const [index, setIndex] = useState(-1);
 
-    let url = baseURL + "/entries/planned?sessionid=" + localStorage.getItem("sessionid");
-
-    fetch(url).then(response => response.json()).then(entries => {
-        let testindex = 1;
-        entries.forEach(e => {
-            if (e.moduleid == module.id){
-                testindex = 2;
-                if (module.activated == 0){
-                    testindex = 3;
+    useEffect(() => {
+        const url = baseURL + "/entries/planned?sessionid=" + localStorage.getItem("sessionid");
+        fetch(url)
+            .then((response) => response.json())
+            .then((entries) => {
+                let newIndex = -1;
+                if (entries !== null) {
+                    entries.forEach((e) => {
+                        if (e.moduleid == module.id) {
+                            if (module.activated == 0) {
+                                newIndex = 2;
+                            } else {
+                                newIndex = 1;
+                            }
+                        }
+                    });
+                    if (newIndex === -1) {
+                        newIndex = 0;
+                    }
                 }
-            }
-        })
-        console.log(testindex);
-    })
+                setIndex(newIndex);
+            });
+    }, [module.id, module.activated]);
 
-
-    if(p.progress > 100) p.progress = 100;
     let classNames = ["not-started", "started", "finished"];
-    let index = p.progress / 50;
-
-    let actives = ["", "", ""]
+    let actives = ["", "", ""];
     actives[index] = "active";
 
     return (
@@ -35,12 +39,13 @@ export default function StatusBar(p)
                 <span className={"step " + classNames[0] + " " + actives[0]}>1</span>
                 <span className={"step " + classNames[1] + " " + actives[1]}>2</span>
                 <span className={"step " + classNames[2] + " " + actives[2]}>3</span>
-                <div className={"progress-bar " + classNames[index]}
-                     style={{
-                         width: p.progress + "%"
-                     }}
+                <div
+                    className={"progress-bar " + classNames[index]}
+                    style={{
+                        width: 100 + "%",
+                    }}
                 ></div>
             </div>
         </div>
-    )
+    );
 }