diff --git a/frontend/src/App.js b/frontend/src/App.js index 0398503827c6c964190ead5e24682b7aa5065323..eb40972e57894b471b40688d4b83b59a21859d5a 100644 --- a/frontend/src/App.js +++ b/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> diff --git a/frontend/src/components/reaction.jsx b/frontend/src/components/reaction.jsx index 218f0a5dfd101466a2e6c606cd1d6f8eb8373a3e..ac83f71278e993cb1c4d6fe92f10730c0ae72d99 100644 --- a/frontend/src/components/reaction.jsx +++ b/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> ); } diff --git a/frontend/src/components/reactions.jsx b/frontend/src/components/reactions.jsx index 49a36fd8f7c5c9b9e9edbb24a010a16107190881..994f611e539f1d1353738d10933381f1e8edc9b8 100644 --- a/frontend/src/components/reactions.jsx +++ b/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} />