git push

package.json

@@ -1,11 +1,12 @@
 {
-  "name": "react-app",
+  "name": "counter-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^4.5.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

src/App.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);
+  }
+}

src/App.js

@@ -0,0 +1,77 @@
+import React, { Component } from "react";
+import NavBar from "./components/navbar";
+import Counters from "./components/counters";
+import "./App.css";
+import Counter from "./components/counter";
+import { render } from "@testing-library/react";
+
+class App extends Component {
+  state = {
+    counters: [
+      { id: 1, value: 4 },
+      { id: 2, value: 0 },
+      { id: 3, value: 0 },
+      { id: 4, value: 0 },
+    ],
+  };
+
+  constructor(props) {
+    super(props);
+    console.log("APP-constructor", this.props);
+    // this.state = this.props.something;
+  }
+
+  componentDidMount() {
+    console.log("APP-Mounted");
+  }
+
+  handleIncrement = (counter) => {
+    const counters = [...this.state.counters];
+    const index = counters.indexOf(counter);
+    counters[index] = { ...counter };
+    counters[index].value++;
+    this.setState({ counters });
+    // console.log(this.state.counters[index]);
+  };
+
+  handleDelete = (counterId) => {
+    // console.log("Event handler called! ", counterId);
+    const counters = this.state.counters.filter((c) => c.id !== counterId);
+    // this.setState({ counters: counters });
+    this.setState({ counters });
+  };
+
+  handleReset = () => {
+    const counters = this.state.counters.map((c) => {
+      c.value = 0;
+      return c;
+    });
+    this.setState({ counters });
+  };
+
+  render() {
+    console.log("APP-rendered");
+
+    return (
+      <React.Fragment>
+        <NavBar
+          totalCounters={
+            this.state.counters.filter((c) => {
+              return c.value > 0;
+            }).length
+          }
+        />
+        <main className="container">
+          <Counters
+            counters={this.state.counters}
+            onDelete={this.handleDelete}
+            onIncrement={this.handleIncrement}
+            onReset={this.handleReset}
+          />
+        </main>
+      </React.Fragment>
+    );
+  }
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/counter.jsx

@@ -0,0 +1,104 @@
+import React, { Component } from "react";
+
+class Counter extends Component {
+  // state = {
+  //   // count: this.props.value,
+  //   value: this.props.counter.value, //props is read-only
+  //   // imageUrl:
+  //   //   "https://i.pinimg.com/564x/06/f9/57/06f957389f1b933d835fa2d271af4b1e.jpg",
+  //   tags: ["tag1", "tag2", "tag3"],
+  // };
+
+  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
+    }
+  }
+
+  componentWillMount() {
+    console.log("counter - unmount");
+  }
+
+  styles = {
+    fontSize: 10,
+    fontWeight: "bold",
+  };
+
+  //   constructor() {
+  //     super();
+  //     this.handleIncrement = this.handleIncrement.bind(this);
+  //   }
+
+  // Event handler: Use arrow function instead of constructor
+  //   handleIncrement = (product) => {
+  //     console.log(product);
+  //     this.setState({ count: this.props.counter.count + 1 });
+  //     // obj.method();
+  //     // function();
+  //   };
+  // handleIncrement = () => {
+  //   this.setState({ value: this.props.counter.value + 1 });
+  //   // obj.method();
+  //   // function();
+  // };
+
+  //   doHandleIncrement = () => {
+  //     this.handleIncrement({ id: 1 });
+  //   };
+
+  render() {
+    // let classes = this.getBadgeClasses();
+    // console.log("props", this.props);
+    console.log("Counter - rendered");
+    return (
+      <div>
+        {/* <h4> {this.props.id}</h4> */}
+        {/* <img src={this.props.counter.imageUrl} alt="" /> */}
+        {/* <span style={this.styles} className="badge badge-primary m-2">{this.formatCount()} </span> */}
+        <span className={this.getBadgeClasses()}>{this.formatCount()} </span>
+        <button
+          onClick={() => this.props.onIncrement(this.props.counter)}
+          className="btn badge-secondary btn-sm"
+        >
+          Increment
+        </button>
+        <button
+          onClick={() => this.props.onDelete(this.props.counter.id)}
+          className="btn btn-danger btn-sm m-2"
+        >
+          Delete
+        </button>
+        {/* {this.props.counter.tags.length === 0 && "Please create a new tag! "}
+        {this.renderTags()} */}
+      </div>
+    );
+  }
+
+  renderTags() {
+    if (this.props.counter.tags.length === 0) return <p>There are no tags! </p>;
+    return (
+      <ul>
+        {this.props.counter.tags.map((tag) => (
+          <li key={tag}>{tag}</li>
+        ))}
+      </ul>
+    );
+  }
+
+  getBadgeClasses() {
+    let classes = "badge m-2 badge-";
+    classes += this.props.counter.value === 0 ? "warning" : "primary";
+    return classes;
+  }
+
+  formatCount() {
+    const { value } = this.props.counter;
+    // const x = <h1>Zero</h1>;
+    // return value === 0 ? x : value;
+    return value === 0 ? "Zero" : value;
+  }
+}
+
+export default Counter;

src/components/counters.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import Counter from "./counter";
+
+class Counters extends Component {
+  // state = {
+  //   counters: [
+  //     { id: 1, value: 4 },
+  //     { id: 2, value: 0 },
+  //     { id: 3, value: 0 },
+  //     { id: 4, value: 0 },
+  //   ],
+  // };
+
+  // handleIncrement = (counter) => {
+  //   const counters = [...this.state.counters];
+  //   const index = counters.indexOf(counter);
+  //   counters[index] = { ...counter };
+  //   counters[index].value++;
+  //   this.setState({ counters });
+  //   // console.log(this.state.counters[index]);
+  // };
+
+  // handleDelete = (counterId) => {
+  //   // console.log("Event handler called! ", counterId);
+  //   const counters = this.state.counters.filter((c) => c.id !== counterId);
+  //   // this.setState({ counters: counters });
+  //   this.setState({ counters });
+  // };
+
+  // handleReset = () => {
+  //   const counters = this.state.counters.map((c) => {
+  //     c.value = 0;
+  //     return c;
+  //   });
+  //   this.setState({ counters });
+  // };
+
+  render() {
+    console.log("Counters - rendered");
+    const { onReset, onDelete, onIncrement } = this.props; // Obj Destructuring
+    return (
+
+      <div>
+        <button onClick={onReset} className="btn btn-primary btn-sm m-2">
+          Reset
+        </button>
+        {this.props.counters.map((counter) => (
+          <Counter
+            key={counter.id}
+            onDelete={onDelete}
+            onIncrement={onIncrement}
+            counter={counter}
+            // value={counter.value}
+            // id={counter.id}
+          >
+            {/* <h4>counter # {counter.id}</h4> */}
+          </Counter>
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Counters;

src/components/navbar.jsx

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+// Stateless functional component (sfc)
+const NavBar = ({ totalCounters }) => {
+  console.log("NavBar - randered"); // lifecycle hook only worked in Class, not function
+  return (
+    <nav className="navbar navbar-light bg-light">
+      <a className="navbar-brand" href="#">
+        Navbar{" "}
+        <span className="badge badge-pill badge-secondary">
+          {totalCounters}
+        </span>
+      </a>
+    </nav>
+  );
+};
+
+// class NavBar extends Component {
+//   render() {
+//     return (
+//       <nav className="navbar navbar-light bg-light">
+//         <a className="navbar-brand" href="#">
+//           Navbar{" "}
+//           <span className="badge badge-pill badge-secondary">
+//             {this.props.totalCounters}
+//           </span>
+//         </a>
+//       </nav>
+//     );
+//   }
+// }
+
+export default NavBar;

src/index.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;
+}

src/index.js

@@ -1,6 +1,19 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import "bootstrap/dist/css/bootstrap.css";
+import Counters from "./components/counters";
 
-const element = <h1>Hello world!</h1>;
-console.log(element);
-ReactDOM.render(element, document.getElementById("root"));
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();