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