Add delete final code

owenjoseph · Oct 29, 2018 · 2b1582d · 2b1582d
1 parent 93ed371
commit 2b1582d
Show file tree

Hide file tree

Showing 15 changed files with 8,200 additions and 0 deletions.
diff --git a/chapter 4/Delete-Final/.gitignore b/chapter 4/Delete-Final/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+.idea
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/chapter 4/Delete-Final/package.json b/chapter 4/Delete-Final/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "e-book-crud",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts": "1.0.17"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/chapter 4/Delete-Final/public/favicon.ico b/chapter 4/Delete-Final/public/favicon.ico
diff --git a/chapter 4/Delete-Final/public/index.html b/chapter 4/Delete-Final/public/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
+          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+            crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+            crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
+            integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
+            crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/chapter 4/Delete-Final/public/manifest.json b/chapter 4/Delete-Final/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/chapter 4/Delete-Final/src/components/AddItem.js b/chapter 4/Delete-Final/src/components/AddItem.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const AddItem = ({name, price, onChange, onSubmit}) => (
+    <div className="row justify-content-center">
+      <form className="form-inline" onSubmit={onSubmit}>
+        <input
+            type="text"
+            className="form-control mb-2 mr-sm-2"
+            placeholder="Item"
+            value={name}
+            name="name"
+            onChange={onChange}
+        />
+
+        <div className="input-group mb-2 mr-sm-2">
+          <input
+              type="text"
+              className="form-control"
+              placeholder="Price"
+              value={price}
+              name="price"
+              onChange={onChange}
+          />
+        </div>
+        <button type="submit" className="btn btn-primary mb-2 pxy-4">Save</button>
+      </form>
+    </div>
+);
+
+AddItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  price: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
diff --git a/chapter 4/Delete-Final/src/components/App.js b/chapter 4/Delete-Final/src/components/App.js
@@ -0,0 +1,169 @@
+import React, {Component} from 'react';
+import image from '../img/vumbulaitem.png';
+import {ItemCard} from "./ItemCard";
+import {Footer} from "./Footer";
+import {Nav} from "./Nav";
+import {Jumbtron} from "./Jumbtron";
+import {AddItem} from "./AddItem";
+
+class App extends Component {
+  state = {
+    name: "",
+    price: "",
+    items: [
+      {
+        id: 1,
+        name: "Noodles",
+        price: "15"
+      },
+      {
+        id: 2,
+        name: "Mangoes",
+        price: "10"
+      },
+      {
+        id: 3,
+        name: "Oranges",
+        price: "20"
+      },
+      {
+        id: 4,
+        name: "Passion Fruits",
+        price: "14"
+      }
+    ]
+  };
+
+  /**
+   * Handle input changes in the AddItem component.
+   * @param event
+   */
+  handleInputChange = event => {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    this.setState({
+      [name]: value
+    });
+  };
+
+  /**
+   * Add an item to state.
+   * @param event
+   */
+  addItem = event => {
+    event.preventDefault();
+    const {name, price} = this.state;
+    const itemsInState = this.state.items;
+    const itemsArrayLength = itemsInState.length;
+    const id = itemsArrayLength ? (itemsInState[itemsArrayLength - 1].id + 1) : 1;
+    this.setState({
+      items: [
+        ...itemsInState,
+        Object.assign({}, {
+          id,
+          name,
+          price
+        })
+      ],
+      name: "",
+      price: ""
+    })
+  };
+
+  /**
+   * Toggle the isEditing property of an item when the Edit button
+   * within ItemCard is clicked.
+   * @param index
+   */
+  toggleItemEditing = index => {
+    this.setState({
+      items: this.state.items.map((item, itemIndex) => {
+        if (itemIndex === index) {
+          return {
+            ...item,
+            isEditing: !item.isEditing
+          }
+        }
+        return item;
+      })
+    });
+  };
+
+  /**
+   * Update the Name and/or Price of an item.
+   * @param event
+   * @param index
+   */
+  handleItemUpdate = (event, index) => {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    this.setState({
+      items: this.state.items.map((item, itemIndex) => {
+        if (itemIndex === index) {
+          return {
+            ...item,
+            [name]: value
+          }
+        }
+        return item;
+      })
+    });
+  };
+
+  /**
+   * Delete an item from state
+   * @param index Index of the item to be deleted.
+   */
+  onDelete = index => {
+    this.setState({
+      items: [
+        ...this.state.items.slice(0, index),
+        ...this.state.items.slice(index + 1)
+      ]
+    });
+  };
+
+  render() {
+    const {name, price} = this.state;
+    return <div>
+      <Nav/>
+
+      <Jumbtron/>
+
+      <div className="container pt-4">
+
+        <AddItem
+            name={name}
+            price={price}
+            onChange={this.handleInputChange}
+            onSubmit={this.addItem}
+        />
+
+        <h1 className="display-4 my-4 text-center text-muted">Items</h1>
+
+        <div className="row">
+          {
+            this.state.items.map((item, index) =>
+                <ItemCard
+                    key={item.id}
+                    index={index}
+                    image={image}
+                    item={item}
+                    toggleEditing={() => this.toggleItemEditing(index)}
+                    onChange={this.handleItemUpdate}
+                    onDelete={() => this.onDelete(index)}
+                />
+            )
+          }
+        </div>
+
+        <hr/>
+        <Footer/>
+      </div>
+    </div>;
+  }
+}
+
+export default App;
diff --git a/chapter 4/Delete-Final/src/components/Footer.js b/chapter 4/Delete-Final/src/components/Footer.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Footer = () => (
+    <div className="row py-3">
+      <div className="col-md-7">
+        <ul className="nav">
+          <li className="nav-item">
+            <a className="nav-link" href="#">Contact Us</a>
+          </li>
+        </ul>
+      </div>
+      <div className="col-md text-md-right">
+        <small>&copy; Vumbula ShoppingList</small>
+      </div>
+    </div>
+);