Bachelorthesis_Code/frontend/src/components/pages/Umfrage.jsx

import React, { useState } from "react";
import "../../App.css";
import "../Input.css";
import Footer from "../../Footer";
import InputField from "../InputField";
import SubmitField from "../SubmitField";
import { authFetch } from "../../auth/AuthProvider";
import ErrorMessage from "../ErrorMessage";
import { Link } from "react-router-dom";
import { Redirect } from "react-router";

export default function Umfrage() {
  /* values from survey */
  const [age, setAge] = useState("");
  const [gender, setGender] = useState("");
  const [education, setEducation] = useState("");
  const [skills, setSkills] = useState("");

  /* error messages */
  const [ageErrorMessage, setAgeErrorMessage] = useState("");
  const [genderErrorMessage, setGenderErrorMessage] = useState("");
  const [educationErrorMessage, setEducationErrorMessage] = useState("");
  const [skillsErrorMessage, setSkillsErrorMessage] = useState("");

  const [backendErrorMessage, setBackendErrorMessage] = useState("");
  const [isSurveyValidBackend, setIsSurveyValidBackend] = useState("");

  /* boolean if the values are ok */
  const [isAgeOk, setIsAgeOk] = useState("");
  const [isGenderOk, setIsGenderOk] = useState("");
  const [isEducationOk, setIsEducationOk] = useState("");
  const [isSkillsOk, setIsSkillsOk] = useState("");

  /* genereal check if survey is valid */
  const [isSurveyValid, setIsSurveyValid] = useState(true);

  const onSubmitClick = (e) => {
    e.preventDefault();
    let opts = {
      age: age,
      gender: gender,
      education: education,
      skills: skills,
    };

    setIsAgeOk(true);
    setIsGenderOk(true);
    setIsEducationOk(true);
    setIsSkillsOk(true);
    setIsSurveyValid(true);

    if (!Number(age)) {
      setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
      setIsSurveyValid(false);
      setIsAgeOk(false);
    }
    if (gender === "DEFAULT" || gender === "") {
      setGenderErrorMessage(
        "Bitte wähle eine der Optionen für dein Geschlecht aus."
      );
      setIsSurveyValid(false);
      setIsGenderOk(false);
    }
    if (education === "DEFAULT" || education === "") {
      setEducationErrorMessage(
        "Bitte wähle eine der Optionen zu deiner Ausbildung aus."
      );
      setIsSurveyValid(false);
      setIsEducationOk(false);
    }
    if (skills === "DEFAULT" || skills === "") {
      setSkillsErrorMessage(
        "Bitte wähle eine der Optionen zu den Fähigkeiten aus"
      );
      setIsSurveyValid(false);
      setIsSkillsOk(false);
    }

    if (isSurveyValid === true) {
      authFetch("/api/protected/umfrage", {
        method: "post",
        body: JSON.stringify(opts),
      }).then((response) => {
        if (response.status === 200) {
          response.json().then((r) => {
            setIsSurveyValidBackend(true);
          });
        } else {
          response.json().then((r) => {
            setBackendErrorMessage(r.message);
            setIsSurveyValidBackend(false);
          });
        }
      });
    }
  };

  const handleAgeChange = (e) => {
    setAge(e.target.value);
  };

  const handleGenderChange = (e) => {
    setGender(e.target.value);
  };

  const handleEducationChange = (e) => {
    setEducation(e.target.value);
  };

  const handleSkillsChange = (e) => {
    setSkills(e.target.value);
  };

  return (
    <>
      <div className="sitePage">
        <h1> Umfrage</h1>
        <p>
          Super, die Registrierung hat funktioniert! Du bist nun eingeloggt und
          ich erfasse deine Tastaturanschläge und die Mausbewegungen. Wenn du
          dich wieder abmelden möchtest, kannst du das <Link to="/">hier</Link>{" "}
          machen.
        </p>
        <p>
          Damit ich etwas über die Studienteilnehmenden erfahre, möchte ich hier
          eine kurze Erhebung einiger wichtiger Daten machen. Die Daten werden
          natürlich nicht genauer verfolgt und die Auswertung der biometrischen
          Verhaltensmerkmale geschieht unabhängig davon. Konkret bedeutet das,
          dass ich deine Angaben nicht mit den Informationen aus den
          Verhaltensmerkmalen zusammenfliessen lasse.
        </p>
        <p>
          Die Umfrage dauert nur ca. 2 Minuten und nach der ersten Befragung
          musst du diese auch nicht mehr ausfüllen, da ich dann eine ungefähre
          Auswertung machen kann, wie sich die Studienteilnehmenden aufteilen.
          So kann es für mich beispielsweise relevant sein, wenn sämtliche
          Teilnehmenden ein sehr gutes Informatikverständnis haben.
        </p>
        <form id="umfrage">
          <InputField
            InputType="number"
            onChange={handleAgeChange}
            className="input-field"
            LabelName="Wie alt bist du? (Alter in Jahren)"
          />
          {!isAgeOk && <ErrorMessage message={ageErrorMessage} />}
          <div className="input-field">
            <label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
            <select
              name="gender"
              id="gender"
              onChange={handleGenderChange}
              defaultValue="DEFAULT"
            >
              <option disabled value="DEFAULT">
                -- Bitte wähle etwas aus --{" "}
              </option>
              <option value="male">Männlich</option>
              <option value="female">Weiblich</option>
              <option value="divers">Divers</option>
              <option value="sex_na">Keine Angabe</option>
            </select>
          </div>
          {!isGenderOk && <ErrorMessage message={genderErrorMessage} />}
          <div className="input-field">
            <label htmlFor="education">
              Welches ist deine höchste abgeschlossene Ausbildung?
            </label>
            <br />
            <select
              name="education"
              id="education"
              onChange={handleEducationChange}
              defaultValue="DEFAULT"
            >
              <option disabled value="DEFAULT">
                -- Bitte wähle deine Ausbildung aus --
              </option>
              <option value="edu_lehre">Berufslehre</option>
              <option value="edu_gymnasium">Gymnasiale Maturität</option>
              <option value="edu_berufsmatura">Berufsmatura</option>
              <option value="edu_bachelor">Bachelor</option>
              <option value="edu_Master">Master oder höher</option>
              <option value="edu_na">Keine Angabe</option>
            </select>
          </div>
          {!isEducationOk && <ErrorMessage message={educationErrorMessage} />}
          <div className="input-field">
            <label htmlFor="itskills">
              Wie schätzt du deine Kompetenzen im Bereich der Informatik als
              Anwender ein?
            </label>
            <br />
            <select
              name="itskills"
              id="itskills"
              onChange={handleSkillsChange}
              defaultValue="DEFAULT"
            >
              <option disabled value="DEFAULT">
                -- Bitte wähle etwas aus --
              </option>
              <option value="skills_sehr_gut">Sehr gut</option>
              <option value="skills_gut">Gut</option>
              <option value="skills_mittel">Mittel</option>
              <option value="skills_nicht_so_good">Eher nicht so gut</option>
              <option value="skills_garnicht">Gar nicht gut</option>
              <option value="skills_na">Keine Angabe</option>
            </select>
          </div>
          {!isSkillsOk && <ErrorMessage message={skillsErrorMessage} />}
          <SubmitField
            InputName="Umfrage abschicken"
            InputValue="Umfrage abschicken"
            LabelName="Umfrage abschicken"
            onClick={onSubmitClick}
          />
        </form>
        {!isSurveyValidBackend ? (
          <ErrorMessage message={backendErrorMessage} />
        ) : (
          <Redirect to="/study" />
        )}
      </div>
      <Footer />
    </>
  );
}