Bachelorthesis_Code/frontend/src/components/pages/Study.js

import React, { useEffect, useState } from "react";
import "../../App.css";
import Footer from "../../Footer";
import InputField from "../InputField";
import SubmitField from "../SubmitField";
import { Logger } from "@behametrics/logger-web";
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) => {
    username = tmp_username;
  };

  let password = "";
  const setPassword = (tmp_password) => {
    password = tmp_password;
  };

  let isStepStart = true;
  const setIsStepStart = (tmp) => {
    isStepStart = tmp;
  };

  let isStepNormal = false;
  const setIsStepNormal = (tmp) => {
    isStepNormal = tmp;
  };

  const forceUpdate = useForceUpdate();

  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();
    console.log("Logger ausgeschaltet");
  };

  const handleLoggerOn = () => {
    logger.start();
    console.log("start logging ");
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
  };

  const handleOnPasteEvent = (e) => {
    e.preventDefault();
    return false;
  };

  const handleIsStepStart = () => {
    setIsStepStart(false);
    console.log("isStepStar", isStepStart);
    setIsStepNormal(true);
    console.log("isStepNormal", isStepNormal);
    forceUpdate();
  };


  const onSubmitClick = (e) => {
    e.preventDefault();
    let opts = {
      username: username,
      password: password,
    };
    fetch("/api/protected/behavior", {
      method: "post",
      body: JSON.stringify(opts),
    }).then((response) => {
      console.log(response.status);
      if (response.status === 401) {
        response.json().then((resp) => {
          console.log("nicht so wirklich gut");
          // setErrorMessage(resp.message);
        });
      } else {
        response.json().then((token) => {
          console.log("Alles gut :-)");
        });
      }
    });
  };

  /*
  useEffect(() => {
    if (isStepStart) {
      handleIsStepStart();
      console.log("useEffect; normal");
    } else if (isStepNormal) {
      console.log("useEffect; normal");
    }
  });
  */

  return (
    <>
      <div className="sitePage">
        <h1>Studie</h1>
        <button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
        {isStepStart ? (
          <>
            <BehaviorStudyInfo />
            <Button
              className="btns"
              buttonStyle="btn--primary"
              buttonSize="btn--full"
              onClick={handleIsStepStart}
              newTo="study"
            >
              Starten mit der Studie
            </Button>
          </>
        ) : null}
        {isStepNormal ? (
          <>
            <BehaviorNormal />
            <form id="behaviorNormal">
              <InputField
                LabelName="Benutzername"
                onChange={handleUsernameChange}
                InputType="text"
                InputName="Benutzername"
                InputPlaceHolder="Benutzername"
                onPaste={handleOnPasteEvent}
              />
              <InputField
                LabelName="Passwort"
                onChange={handlePasswordChange}
                InputType="password"
                InputName="Passwort"
                InputPlaceHolder="Benutzername"
                onPaste={handleOnPasteEvent}
              />
              <SubmitField
                LabelName="Weiter zur nächsten Situation"
                InputValue="next-situation"
                InputName="Weiter"
                onClick={onSubmitClick}
              />
            </form>
          </>
        ) : null}
        <button onClick={handleLoggerOff}>LOGGER STOPPEN</button>
      </div>
      <Footer />
    </>
  );
}