Merge pull request 'Refactored some things in the frontend' (#175) from frontend/buttons into main

Reviewed-on: #175

frontend/src/components/Button.css

@@ -31,6 +31,12 @@
   font-size: 1.3em;
 }
 
+.btn--full{
+  padding: 12px 26px;
+  margin: 0 auto;
+  font-size: 1.5em;
+}
+
 .btn--large:hover,
 .btn--medium:hover {
   transition: all 0.3s ease-out;
@@ -38,3 +44,4 @@
   color: var(--secondary);
   transition: 250ms;
 }
+

frontend/src/components/Button.js

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 
 const STYLES = ["btn--primary", "btn--outline"];
 
-const SIZES = ["btn--medium", "btn--large"];
+const SIZES = ["btn--medium", "btn--large", "btn--full"];
 export const Button = ({
   children,
   type,

frontend/src/components/pages/Study.js

@@ -6,6 +6,7 @@ import SubmitField from "../SubmitField";
 import { Logger } from "@behametrics/logger-web";
 import BehaviorStudyInfo from "../BehaviorStudyInfo";
 import BehaviorNormal from "../BehaviorNormal";
+import { Button } from "../Button";
 
 export default function Study() {
   let username = "";
@@ -18,6 +19,16 @@ export default function Study() {
     password = tmp_password;
   };
 
+  let isStepStart = true;
+  const setIsStepStart = (tmp) => {
+    isStepStart = tmp;
+  };
+
+  let isStepNormal = false;
+  const setIsStepNormal = (tmp) => {
+    isStepNormal = tmp;
+  };
+
   let logger = new Logger({
     //inputs: ["cursor", "wheel", "keyboard", "touch"],
     inputs: ["keyboard"],
@@ -51,6 +62,13 @@ export default function Study() {
     return false;
   };
 
+  const handleIsStepStart = () => {
+    setIsStepStart(false);
+    console.log("isStepStar", isStepStart)
+    setIsStepNormal(true);
+    console.log("isStepStar", isStepNormal)
+  };
+
   const onSubmitClick = (e) => {
     e.preventDefault();
     let opts = {
@@ -75,22 +93,40 @@ export default function Study() {
     });
   };
 
+  /*
+  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>
-        <BehaviorStudyInfo />{" "}
-        <form id="behaviorNormal" action="#">
-          <SubmitField
-            LabelName="Starten mit der Studie"
-            InputValue="next-situation"
-            InputName="Weiter"
-            onClick={handleLoggerOn}
-          />
-        </form>{" "}
+        {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" action="#">
+            <form id="behaviorNormal">
               <InputField
                 LabelName="Benutzername"
                 onChange={handleUsernameChange}
@@ -108,14 +144,14 @@ export default function Study() {
                 onPaste={handleOnPasteEvent}
               />
               <SubmitField
-            LabelNa
-            me="Weiter zur nächsten Situation"
+                LabelName="Weiter zur nächsten Situation"
                 InputValue="next-situation"
                 InputName="Weiter"
                 onClick={onSubmitClick}
               />
             </form>
-        <button onClick={handleLoggerOff}>STOP THAT FUCKING LOGGER</button>
+          </>
+        ) : null}
       </div>
       <Footer />
     </>