frontend/src/components/pages/Study.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
@@ -8,6 +8,12 @@ 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() {
   let username = "";
   const setUsername = (tmp_username) => {
@@ -29,6 +35,8 @@ export default function Study() {
     isStepNormal = tmp;
   };
 
+  const forceUpdate = useForceUpdate();
+
   let logger = new Logger({
     //inputs: ["cursor", "wheel", "keyboard", "touch"],
     inputs: ["keyboard"],
@@ -64,11 +72,13 @@ export default function Study() {
 
   const handleIsStepStart = () => {
     setIsStepStart(false);
-    console.log("isStepStar", isStepStart)
+    console.log("isStepStar", isStepStart);
     setIsStepNormal(true);
-    console.log("isStepStar", isStepNormal)
+    console.log("isStepNormal", isStepNormal);
+    forceUpdate();
   };
 
+
   const onSubmitClick = (e) => {
     e.preventDefault();
     let opts = {
@@ -152,6 +162,7 @@ export default function Study() {
             </form>
           </>
         ) : null}
+        <button onClick={handleLoggerOff}>LOGGER STOPPEN</button>
       </div>
       <Footer />
     </>