From 430c629f639087e5f5ba90c20506b143c971c002 Mon Sep 17 00:00:00 2001
From: Mehmet Salih Hasanoglu
<mehmet_salih.hasanoglu@student.reutlingen-university.de>
Date: Mon, 28 Jun 2021 12:39:00 +0200
Subject: [PATCH] refreshed variables
---
frontend/src/App 2.css | 38 +++++++++++++++++++
frontend/src/App 2.js | 25 ++++++++++++
frontend/src/App.js | 35 ++++++++---------
frontend/src/components 2/button.jsx | 0
frontend/src/components/counters.jsx | 27 -------------
.../components/{counter.jsx => reaction.jsx} | 23 +++++------
frontend/src/components/reactions.jsx | 27 +++++++++++++
frontend/src/index 2.css | 13 +++++++
frontend/src/index 2.js | 17 +++++++++
frontend/src/reportWebVitals 2.js | 13 +++++++
frontend/src/setupTests 2.js | 5 +++
11 files changed, 165 insertions(+), 58 deletions(-)
create mode 100644 frontend/src/App 2.css
create mode 100644 frontend/src/App 2.js
create mode 100644 frontend/src/components 2/button.jsx
delete mode 100644 frontend/src/components/counters.jsx
rename frontend/src/components/{counter.jsx => reaction.jsx} (57%)
create mode 100644 frontend/src/components/reactions.jsx
create mode 100644 frontend/src/index 2.css
create mode 100644 frontend/src/index 2.js
create mode 100644 frontend/src/reportWebVitals 2.js
create mode 100644 frontend/src/setupTests 2.js
diff --git a/frontend/src/App 2.css b/frontend/src/App 2.css
new file mode 100644
index 0000000..74b5e05
--- /dev/null
+++ b/frontend/src/App 2.css
@@ -0,0 +1,38 @@
+.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);
+ }
+}
diff --git a/frontend/src/App 2.js b/frontend/src/App 2.js
new file mode 100644
index 0000000..3784575
--- /dev/null
+++ b/frontend/src/App 2.js
@@ -0,0 +1,25 @@
+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;
diff --git a/frontend/src/App.js b/frontend/src/App.js
index a510572..60eaad8 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,5 +1,5 @@
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}
diff --git a/frontend/src/components 2/button.jsx b/frontend/src/components 2/button.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/counters.jsx b/frontend/src/components/counters.jsx
deleted file mode 100644
index 63e8793..0000000
--- a/frontend/src/components/counters.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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/components/counter.jsx b/frontend/src/components/reaction.jsx
similarity index 57%
rename from frontend/src/components/counter.jsx
rename to frontend/src/components/reaction.jsx
index 2730449..5240696 100644
--- a/frontend/src/components/counter.jsx
+++ b/frontend/src/components/reaction.jsx
@@ -1,41 +1,41 @@
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;
diff --git a/frontend/src/components/reactions.jsx b/frontend/src/components/reactions.jsx
new file mode 100644
index 0000000..364758b
--- /dev/null
+++ b/frontend/src/components/reactions.jsx
@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import Reaction from "./reaction";
+
+class Reactions extends Component {
+ render() {
+ 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>
+ {reactions.map((reaction) => (
+ <Reaction
+ key={reaction.id}
+ onDelete={onDelete}
+ onIncrement={onIncrement}
+ reaction={reaction}
+ />
+ ))}
+ </div>
+ );
+ }
+}
+
+export default Reactions;
+<div></div>;
diff --git a/frontend/src/index 2.css b/frontend/src/index 2.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/frontend/src/index 2.css
@@ -0,0 +1,13 @@
+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;
+}
diff --git a/frontend/src/index 2.js b/frontend/src/index 2.js
new file mode 100644
index 0000000..ef2edf8
--- /dev/null
+++ b/frontend/src/index 2.js
@@ -0,0 +1,17 @@
+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();
diff --git a/frontend/src/reportWebVitals 2.js b/frontend/src/reportWebVitals 2.js
new file mode 100644
index 0000000..5253d3a
--- /dev/null
+++ b/frontend/src/reportWebVitals 2.js
@@ -0,0 +1,13 @@
+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;
diff --git a/frontend/src/setupTests 2.js b/frontend/src/setupTests 2.js
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/frontend/src/setupTests 2.js
@@ -0,0 +1,5 @@
+// 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';
--
GitLab