From b4b0f2ffeb5b554b60ac4772b7883475006f19c9 Mon Sep 17 00:00:00 2001 From: Mehmet Salih Hasanoglu <mehmet_salih.hasanoglu@student.reutlingen-university.de> Date: Mon, 28 Jun 2021 12:19:14 +0200 Subject: [PATCH] first attempt --- frontend/src/App.js | 85 ++++++++++++++++++++------- frontend/src/ZRoom_Logo.png | Bin 0 -> 14262 bytes frontend/src/components/counter.jsx | 53 +++++++++++++++++ frontend/src/components/counters.jsx | 27 +++++++++ frontend/src/index.js | 18 +++--- 5 files changed, 150 insertions(+), 33 deletions(-) create mode 100644 frontend/src/ZRoom_Logo.png create mode 100644 frontend/src/components/counter.jsx create mode 100644 frontend/src/components/counters.jsx diff --git a/frontend/src/App.js b/frontend/src/App.js index 3784575..a510572 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,25 +1,66 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> - </div> - ); +import React, { Component } from "react"; +import Counters from "./components/counters"; +import "./App.css"; +import logo from "./ZRoom_Logo.png"; + +//import { render } from "@testing-library/react"; + +class App extends Component { + state = { + counters: [ + { id: 1, value: "Frage?" }, + { id: 2, value: 0 }, + { id: 3, value: 0 }, + ], + }; + constructor() { + super(); + console.log("App - Constructor"); + } + + componentDidMount() { + console.log("App - Mounted"); + } + + handleIncrement = (counter) => { + const counters = [...this.state.counters]; + const index = counters.indexOf(counter); + counters[index] = { ...counter }; + counters[index].value++; + const requestURL = "http://localhost:5000/lamp/" + counters[index].id + "/activate" + fetch(requestURL) + this.setState({ counters }); + }; + + handleReset = () => { + const counters = this.state.counters.map((c) => { + c.value = 0; + return c; + }); + this.setState({ counters }); + }; + + handleDelete = (counterId) => { + const counters = this.state.counters.filter((c) => c.id !== counterId); + this.setState({ counters }); + }; + + 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" /> + <Counters + counters={this.state.counters} + onReset={this.handleReset} + onIncrement={this.handleIncrement} + onDelete={this.handleDelete} + /> + </main> + </React.Fragment> + ); + } } export default App; diff --git a/frontend/src/ZRoom_Logo.png b/frontend/src/ZRoom_Logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e2dfd6f44e34069ab2f81540d856e6d65ceb3039 GIT binary patch literal 14262 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 literal 0 HcmV?d00001 diff --git a/frontend/src/components/counter.jsx b/frontend/src/components/counter.jsx new file mode 100644 index 0000000..2730449 --- /dev/null +++ b/frontend/src/components/counter.jsx @@ -0,0 +1,53 @@ +import React, { Component } from "react"; + +class Counter extends Component { + getBadgeClasses() { + let classes = "badge m-2 bg-"; + classes += this.props.counter.value === 0 ? "warning text-dark" : "primary"; + return classes; + } + + formatCount() { + const { value } = this.props.counter; + return value === 0 ? "Zero" : value; + } + + componentDidUpdate(prevProps, prevState) { + console.log("prevProps", prevProps); + console.log("prevState", prevState); + if (prevProps.counter.value !== this.props.counter.value) { + // Ajax call and get new data from the server + } + } + + componentWillUnmount() { + console.log("Counter - Unmount"); + } + render() { + console.log("Counter - Rendered"); + return ( + <div> + <span className={this.getBadgeClasses()}>{this.formatCount()}</span> + <button + onClick={() => this.props.onIncrement(this.props.counter)} + className="btn btn-secondary btn-sm" + > + Increment + </button> + <button + onClick={() => this.props.onDelete(this.props.counter.id)} + className="btn btn-danger btn-sm m-2" + > + Delete + </button> + </div> + ); + } +} + +// constructor() { +// super(); +// this.handleIncrement = this.handleIncrement.bind(this); +// } + +export default Counter; diff --git a/frontend/src/components/counters.jsx b/frontend/src/components/counters.jsx new file mode 100644 index 0000000..63e8793 --- /dev/null +++ b/frontend/src/components/counters.jsx @@ -0,0 +1,27 @@ +import React, { Component } from "react"; +import Counter from "./counter"; + +class Counters extends Component { + render() { + console.log("Counters - Rendered"); + const { onReset, counters, onDelete, onIncrement } = this.props; + return ( + <div> + <button onClick={onReset} className="btn btn-primary btn-sm m-2"> + Reset + </button> + {counters.map((counter) => ( + <Counter + key={counter.id} + onDelete={onDelete} + onIncrement={onIncrement} + counter={counter} + /> + ))} + </div> + ); + } +} + +export default Counters; +<div></div>; diff --git a/frontend/src/index.js b/frontend/src/index.js index ef2edf8..43b9875 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,15 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import "bootstrap/dist/css/bootstrap.css"; -ReactDOM.render( - <React.StrictMode> - <App /> - </React.StrictMode>, - document.getElementById('root') -); +ReactDOM.render(<App />, document.getElementById("root")); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) -- GitLab