frontend state updated

frontend/src/App.js

@@ -3,8 +3,6 @@ import Reactions from "./components/reactions";
 import "./App.css";
 import logo from "./ZRoom_Logo.png";
 
-//import { render } from "@testing-library/react";
-
 class App extends Component {
   state = {
     reactions: [
@@ -27,13 +25,27 @@ class App extends Component {
     return new Promise(resolve => setTimeout(resolve, milliseconds))
   }
 
-  componentDidUpdate(previousProps, previousState) {
+  componentDidUpdate(prevProps, prevState) {
     this.sleep(5000).then(r => {
-      if (previousState.reactions !== this.state.reactions) {
-        this.state.reactions = previousState.reactions
-        this.setState(this.state.reactions);
+      for (var i = 0; i < this.state.reactions.length; i++) {
+        if (this.state.reactions[i].value == "Befehl wird gesendet ...") {
+          this.setState({
+            reactions: [
+              { id: 1, value: "Frage ?" },
+              { id: 2, value: "Daumen Hoch" },
+              { id: 3, value: "Problem !" },
+            ],
+          })
+        }
       }
     })
+
+    //    this.sleep(5000).then(r => {
+    //     if (previousState.reactions !== this.state.reactions) {
+    //       this.state.reactions = previousState.reactions
+    //       this.setState(this.state.reactions);
+    //     }
+    //   })
   }
 
   handleClick = (reaction) => {
@@ -42,40 +54,24 @@ class App extends Component {
     reactions[index] = { ...reaction };
 
     reactions[index].value = "Befehl wird gesendet ...";
-    // for (var i = 0; i < reactions.length; i++) {
-    //   reactions[i].value = index === i ? "Befehl wird gesendet ..." : "Warten ...";
-    // }
+    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)
+    const requestURL = "http://0.0.0.0:5000/lamp/" + reactions[index].id + "/activate"
     fetch(requestURL)
     this.setState({ reactions });
   };
 
-  handleReset = () => {
-    const reactions = this.state.reactions.map((c) => {
-      c.value = 0;
-      return c;
-    });
-    this.setState({ reactions });
-  };
-
-  handleDelete = (reactionId) => {
-    const reactions = this.state.reactions.filter((c) => c.id !== reactionId);
-    this.setState({ reactions });
-  };
-
   render() {
     console.log("App - Rendered");
     return (
       <React.Fragment>
         <main className="container">
-          <img src={logo} alt="ZRoom Logo" class="rounded mx-auto d-block m-5" />
+          <img src={logo} alt="ZRoom Logo" className="rounded mx-auto d-block m-5" />
           <Reactions
             reactions={this.state.reactions}
-            onReset={this.handleReset}
             onClick={this.handleClick}
-            onDelete={this.handleDelete}
           />
         </main>
       </React.Fragment>

frontend/src/components/reaction.jsx

@@ -19,9 +19,9 @@ class Reaction extends Component {
   componentDidUpdate(prevProps, prevState) {
     console.log("prevProps", prevProps);
     console.log("prevState", prevState);
-    if (prevProps.reaction.value !== this.props.reaction.value) {
-      // Ajax call and get new data from the server
-    }
+    // if (prevProps.reaction.value !== this.props.reaction.value) {
+    //   // Ajax call and get new data from the server
+    // }
   }
 
   componentWillUnmount() {
@@ -31,19 +31,12 @@ class Reaction extends Component {
     console.log("Reaction - Rendered");
     return (
       <div>
-        {/* <span className={this.getBadgeClasses()}>{this.getValue()}</span> */}
-        <button
+        <button disabled={this.getValue() == "Warten ..." || this.getValue() == "Befehl wird gesendet ..."}
           onClick={() => this.props.onClick(this.props.reaction)}
           className={this.getBadgeClasses()}
         >
           {this.getValue()}
         </button>
-        {/* <button
-          onClick={() => this.props.onDelete(this.props.reaction.id)}
-          className="btn btn-danger btn-sm m-2"
-        >
-          Delete
-        </button> */}
       </div>
     );
   }

frontend/src/components/reactions.jsx

@@ -4,16 +4,12 @@ import Reaction from "./reaction";
 class Reactions extends Component {
   render() {
     console.log("Reactions - Rendered");
-    const { onReset, reactions, onDelete, onClick } = this.props;
+    const { reactions, onClick } = this.props;
     return (
       <div>
-        <button onClick={onReset} className="btn btn-primary btn-sm m-2">
-          Reset
-        </button>
         {reactions.map((reaction) => (
           <Reaction
             key={reaction.id}
-            onDelete={onDelete}
             onClick={onClick}
             reaction={reaction}
           />