From d055e693aa29a86bbf555d984bd1a92c499f92c8 Mon Sep 17 00:00:00 2001 From: cami Date: Wed, 21 Jul 2021 04:33:52 +0200 Subject: [PATCH] Refactored some things in the frontend - use button insted of inputfield - make use of conditional rendering --- frontend/src/components/Button.css | 7 ++ frontend/src/components/Button.js | 2 +- frontend/src/components/pages/Study.js | 108 ++++++++++++++++--------- 3 files changed, 80 insertions(+), 37 deletions(-) diff --git a/frontend/src/components/Button.css b/frontend/src/components/Button.css index cbd63e3..19143fe 100644 --- a/frontend/src/components/Button.css +++ b/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; } + diff --git a/frontend/src/components/Button.js b/frontend/src/components/Button.js index 2353f06..a43e24c 100644 --- a/frontend/src/components/Button.js +++ b/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, diff --git a/frontend/src/components/pages/Study.js b/frontend/src/components/pages/Study.js index a6bbeab..94d825d 100644 --- a/frontend/src/components/pages/Study.js +++ b/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,47 +93,65 @@ export default function Study() { }); }; + /* + useEffect(() => { + if (isStepStart) { + handleIsStepStart(); + console.log("useEffect; normal"); + } else if (isStepNormal) { + console.log("useEffect; normal"); + } + }); + */ + return ( <>

Studie

- {" "} -
- - {" "} - -
- - - - - + {isStepStart ? ( + <> + + + + ) : null} + {isStepNormal ? ( + <> + +
+ + + + + + ) : null}