From 435f680b224d139e898211455b9c0c66b53e2e3c Mon Sep 17 00:00:00 2001
From: Mehmet Salih Hasanoglu
 <mehmet_salih.hasanoglu@student.reutlingen-university.de>
Date: Mon, 28 Jun 2021 16:49:09 +0200
Subject: [PATCH] frontend first push

---
 frontend/src/App.js                   | 37 ++++++++++++++++++++-------
 frontend/src/components/reaction.jsx  | 24 +++++++++--------
 frontend/src/components/reactions.jsx |  4 +--
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 60eaad8..0398503 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import Reactions from "./components/reactions";
 import "./App.css";
 import logo from "./ZRoom_Logo.png";
@@ -8,11 +8,12 @@ import logo from "./ZRoom_Logo.png";
 class App extends Component {
   state = {
     reactions: [
-      { id: 1, value: "Frage?" },
-      { id: 2, value: 0 },
-      { id: 3, value: 0 },
+      { id: 1, value: "Frage ?" },
+      { id: 2, value: "Daumen Hoch" },
+      { id: 3, value: "Problem !" },
     ],
   };
+
   constructor() {
     super();
     console.log("App - Constructor");
@@ -22,14 +23,32 @@ class App extends Component {
     console.log("App - Mounted");
   }
 
-  handleIncrement = (reaction) => {
+  sleep = (milliseconds) => {
+    return new Promise(resolve => setTimeout(resolve, milliseconds))
+  }
+
+  componentDidUpdate(previousProps, previousState) {
+    this.sleep(5000).then(r => {
+      if (previousState.reactions !== this.state.reactions) {
+        this.state.reactions = previousState.reactions
+        this.setState(this.state.reactions);
+      }
+    })
+  }
+
+  handleClick = (reaction) => {
     const reactions = [...this.state.reactions];
     const index = reactions.indexOf(reaction);
     reactions[index] = { ...reaction };
-    reactions[index].value++;
+
+    reactions[index].value = "Befehl wird gesendet ...";
+    // for (var i = 0; i < reactions.length; i++) {
+    //   reactions[i].value = index === i ? "Befehl wird gesendet ..." : "Warten ...";
+    // }
+
     const requestURL = "http://localhost:5000/lamp/" + reactions[index].id + "/activate"
-    alert(requestURL)
-    //fetch(requestURL)
+    //alert(requestURL)
+    fetch(requestURL)
     this.setState({ reactions });
   };
 
@@ -55,7 +74,7 @@ class App extends Component {
           <Reactions
             reactions={this.state.reactions}
             onReset={this.handleReset}
-            onIncrement={this.handleIncrement}
+            onClick={this.handleClick}
             onDelete={this.handleDelete}
           />
         </main>
diff --git a/frontend/src/components/reaction.jsx b/frontend/src/components/reaction.jsx
index 5240696..218f0a5 100644
--- a/frontend/src/components/reaction.jsx
+++ b/frontend/src/components/reaction.jsx
@@ -2,14 +2,18 @@ import React, { Component } from "react";
 
 class Reaction extends Component {
   getBadgeClasses() {
-    let classes = "badge m-2 bg-";
-    classes += this.props.reaction.value === 0 ? "warning text-dark" : "primary";
+    let classes = "badge mx-auto d-block m-5 bg-";
+    classes += this.props.reaction.value === "Frage ?" ? "primary" : "";
+    classes += this.props.reaction.value === "Daumen Hoch" ? "success" : "";
+    classes += this.props.reaction.value === "Problem !" ? "danger" : "";
+    classes += this.props.reaction.value === "Befehl wird gesendet ..." ? "info" : "";
+    classes += this.props.reaction.value === "Warten ..." ? "secondary" : "";
     return classes;
   }
 
-  formatCount() {
+  getValue() {
     const { value } = this.props.reaction;
-    return value === 0 ? "Zero" : value;
+    return value
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -27,19 +31,19 @@ class Reaction extends Component {
     console.log("Reaction - Rendered");
     return (
       <div>
-        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
+        {/* <span className={this.getBadgeClasses()}>{this.getValue()}</span> */}
         <button
-          onClick={() => this.props.onIncrement(this.props.reaction)}
-          className="btn btn-secondary btn-sm"
+          onClick={() => this.props.onClick(this.props.reaction)}
+          className={this.getBadgeClasses()}
         >
-          Increment
+          {this.getValue()}
         </button>
-        <button
+        {/* <button
           onClick={() => this.props.onDelete(this.props.reaction.id)}
           className="btn btn-danger btn-sm m-2"
         >
           Delete
-        </button>
+        </button> */}
       </div>
     );
   }
diff --git a/frontend/src/components/reactions.jsx b/frontend/src/components/reactions.jsx
index 364758b..49a36fd 100644
--- a/frontend/src/components/reactions.jsx
+++ b/frontend/src/components/reactions.jsx
@@ -4,7 +4,7 @@ import Reaction from "./reaction";
 class Reactions extends Component {
   render() {
     console.log("Reactions - Rendered");
-    const { onReset, reactions, onDelete, onIncrement } = this.props;
+    const { onReset, reactions, onDelete, onClick } = this.props;
     return (
       <div>
         <button onClick={onReset} className="btn btn-primary btn-sm m-2">
@@ -14,7 +14,7 @@ class Reactions extends Component {
           <Reaction
             key={reaction.id}
             onDelete={onDelete}
-            onIncrement={onIncrement}
+            onClick={onClick}
             reaction={reaction}
           />
         ))}
-- 
GitLab