Skip to content
Snippets Groups Projects
Commit 9a29174c authored by CemAdg's avatar CemAdg
Browse files
parents ec56c128 430c629f
No related branches found
No related tags found
No related merge requests found
.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);
}
}
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;
import React, { Component } from "react"; import React, { Component } from "react";
import Counters from "./components/counters"; import Reactions from "./components/reactions";
import "./App.css"; import "./App.css";
import logo from "./ZRoom_Logo.png"; import logo from "./ZRoom_Logo.png";
...@@ -7,7 +7,7 @@ import logo from "./ZRoom_Logo.png"; ...@@ -7,7 +7,7 @@ import logo from "./ZRoom_Logo.png";
class App extends Component { class App extends Component {
state = { state = {
counters: [ reactions: [
{ id: 1, value: "Frage?" }, { id: 1, value: "Frage?" },
{ id: 2, value: 0 }, { id: 2, value: 0 },
{ id: 3, value: 0 }, { id: 3, value: 0 },
...@@ -22,27 +22,28 @@ class App extends Component { ...@@ -22,27 +22,28 @@ class App extends Component {
console.log("App - Mounted"); console.log("App - Mounted");
} }
handleIncrement = (counter) => { handleIncrement = (reaction) => {
const counters = [...this.state.counters]; const reactions = [...this.state.reactions];
const index = counters.indexOf(counter); const index = reactions.indexOf(reaction);
counters[index] = { ...counter }; reactions[index] = { ...reaction };
counters[index].value++; reactions[index].value++;
const requestURL = "http://localhost:5000/lamp/" + counters[index].id + "/activate" const requestURL = "http://localhost:5000/lamp/" + reactions[index].id + "/activate"
fetch(requestURL) alert(requestURL)
this.setState({ counters }); //fetch(requestURL)
this.setState({ reactions });
}; };
handleReset = () => { handleReset = () => {
const counters = this.state.counters.map((c) => { const reactions = this.state.reactions.map((c) => {
c.value = 0; c.value = 0;
return c; return c;
}); });
this.setState({ counters }); this.setState({ reactions });
}; };
handleDelete = (counterId) => { handleDelete = (reactionId) => {
const counters = this.state.counters.filter((c) => c.id !== counterId); const reactions = this.state.reactions.filter((c) => c.id !== reactionId);
this.setState({ counters }); this.setState({ reactions });
}; };
render() { render() {
...@@ -51,8 +52,8 @@ class App extends Component { ...@@ -51,8 +52,8 @@ class App extends Component {
<React.Fragment> <React.Fragment>
<main className="container"> <main className="container">
<img src={logo} alt="ZRoom Logo" class="rounded mx-auto d-block m-5" /> <img src={logo} alt="ZRoom Logo" class="rounded mx-auto d-block m-5" />
<Counters <Reactions
counters={this.state.counters} reactions={this.state.reactions}
onReset={this.handleReset} onReset={this.handleReset}
onIncrement={this.handleIncrement} onIncrement={this.handleIncrement}
onDelete={this.handleDelete} onDelete={this.handleDelete}
......
import React, { Component } from "react"; import React, { Component } from "react";
class Counter extends Component { class Reaction extends Component {
getBadgeClasses() { getBadgeClasses() {
let classes = "badge m-2 bg-"; 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; return classes;
} }
formatCount() { formatCount() {
const { value } = this.props.counter; const { value } = this.props.reaction;
return value === 0 ? "Zero" : value; return value === 0 ? "Zero" : value;
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
console.log("prevProps", prevProps); console.log("prevProps", prevProps);
console.log("prevState", prevState); 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 // Ajax call and get new data from the server
} }
} }
componentWillUnmount() { componentWillUnmount() {
console.log("Counter - Unmount"); console.log("Reaction - Unmount");
} }
render() { render() {
console.log("Counter - Rendered"); console.log("Reaction - Rendered");
return ( return (
<div> <div>
<span className={this.getBadgeClasses()}>{this.formatCount()}</span> <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button <button
onClick={() => this.props.onIncrement(this.props.counter)} onClick={() => this.props.onIncrement(this.props.reaction)}
className="btn btn-secondary btn-sm" className="btn btn-secondary btn-sm"
> >
Increment Increment
</button> </button>
<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" className="btn btn-danger btn-sm m-2"
> >
Delete Delete
...@@ -45,9 +45,4 @@ class Counter extends Component { ...@@ -45,9 +45,4 @@ class Counter extends Component {
} }
} }
// constructor() { export default Reaction;
// super();
// this.handleIncrement = this.handleIncrement.bind(this);
// }
export default Counter;
import React, { Component } from "react"; import React, { Component } from "react";
import Counter from "./counter"; import Reaction from "./reaction";
class Counters extends Component { class Reactions extends Component {
render() { render() {
console.log("Counters - Rendered"); console.log("Reactions - Rendered");
const { onReset, counters, onDelete, onIncrement } = this.props; const { onReset, reactions, onDelete, onIncrement } = this.props;
return ( return (
<div> <div>
<button onClick={onReset} className="btn btn-primary btn-sm m-2"> <button onClick={onReset} className="btn btn-primary btn-sm m-2">
Reset Reset
</button> </button>
{counters.map((counter) => ( {reactions.map((reaction) => (
<Counter <Reaction
key={counter.id} key={reaction.id}
onDelete={onDelete} onDelete={onDelete}
onIncrement={onIncrement} onIncrement={onIncrement}
counter={counter} reaction={reaction}
/> />
))} ))}
</div> </div>
...@@ -23,5 +23,5 @@ class Counters extends Component { ...@@ -23,5 +23,5 @@ class Counters extends Component {
} }
} }
export default Counters; export default Reactions;
<div></div>; <div></div>;
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;
}
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();
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;
// 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';
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment