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

import React from "react";
import { useState } from "react/cjs/react.development";
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";

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("");

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

  let surveyIsValid = true;

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

    setIsAgeOk(true)
    setIsGenderOk(true)
    setIsEducationOk(true)
    setIsSkillsOk(true)

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

    if (surveyIsValid === true) {
      authFetch("/api/protected/umfrage", {
        method: "post",
        body: JSON.stringify(opts),
      });
    } else {
      // TODO: Write what is wrong with the things
      console.log(setAgeErrorMessage);
    }
  };

  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>
          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>Berufslehre</option>
              <option>Gymnasiale Maturität</option>
              <option>Berufsmatura</option>
              <option>Bachelor</option>
              <option>Master oder höher</option>
              <option>Keine Angabe</option>
            </select>
          </div>
          {!isEducationOk && <ErrorMessage message={genderErrorMessage} />}
          <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>Sehr gut</option>
              <option>Gut</option>
              <option>Mittel</option>
              <option>Eher nicht so gut</option>
              <option>Gar nicht gut</option>
              <option>Keine Angabe</option>
            </select>
          </div>
          {!isSkillsOk && <ErrorMessage message={skillsErrorMessage} />}
          <SubmitField
            InputName="Umfrage abschicken"
            InputValue="Umfrage abschicken"
            LabelName="Umfrage abschicken"
            onClick={onSubmitClick}
          />
        </form>
      </div>
      <Footer />
    </>
  );
}