Merge branch 'main' of https://gitlab.reutlingen-university.de/SCCA/ZRoom_App into main

frontend/src/App 2.css

+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/App 2.js

+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>
+  );
+}
+
+export default App;

frontend/src/App.js

 import React, { Component } from "react";
-import Counters from "./components/counters";
+import Reactions from "./components/reactions";
 import "./App.css";
 import logo from "./ZRoom_Logo.png";
 
@@ -7,7 +7,7 @@ import logo from "./ZRoom_Logo.png";
 
 class App extends Component {
   state = {
-    counters: [
+    reactions: [
       { id: 1, value: "Frage?" },
       { id: 2, value: 0 },
       { id: 3, value: 0 },
@@ -22,27 +22,28 @@ class App extends Component {
     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 });
+  handleIncrement = (reaction) => {
+    const reactions = [...this.state.reactions];
+    const index = reactions.indexOf(reaction);
+    reactions[index] = { ...reaction };
+    reactions[index].value++;
+    const requestURL = "http://localhost:5000/lamp/" + reactions[index].id + "/activate"
+    alert(requestURL)
+    //fetch(requestURL)
+    this.setState({ reactions });
   };
 
   handleReset = () => {
-    const counters = this.state.counters.map((c) => {
+    const reactions = this.state.reactions.map((c) => {
       c.value = 0;
       return c;
     });
-    this.setState({ counters });
+    this.setState({ reactions });
   };
 
-  handleDelete = (counterId) => {
-    const counters = this.state.counters.filter((c) => c.id !== counterId);
-    this.setState({ counters });
+  handleDelete = (reactionId) => {
+    const reactions = this.state.reactions.filter((c) => c.id !== reactionId);
+    this.setState({ reactions });
   };
 
   render() {
@@ -51,8 +52,8 @@ class App extends Component {
       <React.Fragment>
         <main className="container">
           <img src={logo} alt="ZRoom Logo" class="rounded mx-auto d-block m-5" />
-          <Counters
-            counters={this.state.counters}
+          <Reactions
+            reactions={this.state.reactions}
             onReset={this.handleReset}
             onIncrement={this.handleIncrement}
             onDelete={this.handleDelete}

frontend/src/components/counter.jsx → frontend/src/components/reaction.jsx

 import React, { Component } from "react";
 
-class Counter extends Component {
+class Reaction extends Component {
   getBadgeClasses() {
     let classes = "badge m-2 bg-";
-    classes += this.props.counter.value === 0 ? "warning text-dark" : "primary";
+    classes += this.props.reaction.value === 0 ? "warning text-dark" : "primary";
     return classes;
   }
 
   formatCount() {
-    const { value } = this.props.counter;
+    const { value } = this.props.reaction;
     return value === 0 ? "Zero" : value;
   }
 
   componentDidUpdate(prevProps, prevState) {
     console.log("prevProps", prevProps);
     console.log("prevState", prevState);
-    if (prevProps.counter.value !== this.props.counter.value) {
+    if (prevProps.reaction.value !== this.props.reaction.value) {
       // Ajax call and get new data from the server
     }
   }
 
   componentWillUnmount() {
-    console.log("Counter - Unmount");
+    console.log("Reaction - Unmount");
   }
   render() {
-    console.log("Counter - Rendered");
+    console.log("Reaction - Rendered");
     return (
       <div>
         <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
         <button
-          onClick={() => this.props.onIncrement(this.props.counter)}
+          onClick={() => this.props.onIncrement(this.props.reaction)}
           className="btn btn-secondary btn-sm"
         >
           Increment
         </button>
         <button
-          onClick={() => this.props.onDelete(this.props.counter.id)}
+          onClick={() => this.props.onDelete(this.props.reaction.id)}
           className="btn btn-danger btn-sm m-2"
         >
           Delete
@@ -45,9 +45,4 @@ class Counter extends Component {
   }
 }
 
-//   constructor() {
-//     super();
-//     this.handleIncrement =  this.handleIncrement.bind(this);
-//   }
-
-export default Counter;
+export default Reaction;

frontend/src/components/counters.jsx → frontend/src/components/reactions.jsx

 import React, { Component } from "react";
-import Counter from "./counter";
+import Reaction from "./reaction";
 
-class Counters extends Component {
+class Reactions extends Component {
   render() {
-    console.log("Counters - Rendered");
-    const { onReset, counters, onDelete, onIncrement } = this.props;
+    console.log("Reactions - Rendered");
+    const { onReset, reactions, 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}
+        {reactions.map((reaction) => (
+          <Reaction
+            key={reaction.id}
             onDelete={onDelete}
             onIncrement={onIncrement}
-            counter={counter}
+            reaction={reaction}
           />
         ))}
       </div>
@@ -23,5 +23,5 @@ class Counters extends Component {
   }
 }
 
-export default Counters;
+export default Reactions;
 <div></div>;

frontend/src/index 2.css

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index 2.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/reportWebVitals 2.js

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests 2.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';