Refactoring..

frontend/src/components/pages/Study.js

@@ -8,13 +8,21 @@ import BehaviorStudyInfo from "../BehaviorStudyInfo";
 import BehaviorNormal from "../BehaviorNormal";
 import { Button } from "../Button";
 
-//create your forceUpdate hook
-function useForceUpdate() {
-  const [value, setValue] = useState(0)
-  return () => setValue(value => value  +1)
-}
-
 export default function Study() {
+
+  var [logger, setLogger] = useState();
+
+  useEffect(() => {
+    logger = new Logger({
+      //inputs: ["cursor", "wheel", "keyboard", "touch"],
+      inputs: ["keyboard"],
+      // apiUrl: "https://behavior.marcocamenzind.ch",
+      apiUrl: "http://localhost:5000",
+      logToConsole: true,
+    });
+    logger.init();
+  }, []);
+
   let username = "";
   const setUsername = (tmp_username) => {
     username = tmp_username;
@@ -25,6 +33,7 @@ export default function Study() {
     password = tmp_password;
   };
 
+  /*
   let isStepStart = true;
   const setIsStepStart = (tmp) => {
     isStepStart = tmp;
@@ -34,18 +43,11 @@ export default function Study() {
   const setIsStepNormal = (tmp) => {
     isStepNormal = tmp;
   };
+  */
 
-  const forceUpdate = useForceUpdate();
+  const [isStepStart, setIsStepStart] = useState(true);
+  const [isStepNormal, setIsStepNormal] = useState(false);
 
-  let logger = new Logger({
-    //inputs: ["cursor", "wheel", "keyboard", "touch"],
-    inputs: ["keyboard"],
-    // apiUrl: "https://behavior.marcocamenzind.ch",
-    apiUrl: "http://localhost:5000",
-    logToConsole: true,
-  });
-
-  logger.init();
 
   const handleLoggerOff = () => {
     logger.stop();
@@ -75,10 +77,9 @@ export default function Study() {
     console.log("isStepStar", isStepStart);
     setIsStepNormal(true);
     console.log("isStepNormal", isStepNormal);
-    forceUpdate();
+    // forceUpdate();
   };
 
-
   const onSubmitClick = (e) => {
     e.preventDefault();
     let opts = {
@@ -103,17 +104,6 @@ export default function Study() {
     });
   };
 
-  /*
-  useEffect(() => {
-    if (isStepStart) {
-      handleIsStepStart();
-      console.log("useEffect; normal");
-    } else if (isStepNormal) {
-      console.log("useEffect; normal");
-    }
-  });
-  */
-
   return (
     <>
       <div className="sitePage">