Shipping info

client/package.json

@@ -7,7 +7,8 @@
         "react-axios": "^2.0.3",
         "react-dom": "^16.9.0",
         "react-router-dom": "^5.0.1",
-        "react-scripts": "3.1.1"
+        "react-scripts": "3.1.1",
+        "sweetalert": "^2.1.2"
     },
     "scripts": {
         "start": "react-scripts start",

client/src/components/App/App.js

@@ -1,11 +1,9 @@
-import React, { Component } from 'react'
-import './App.css'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
-import Home from '../Home'
-import Shop from '../Shop'
-
-
-
+import React, { Component } from "react";
+import "./App.css";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import Home from "../Home";
+import Shop from "../Shop";
+import shipping_info from "../shipping_info";
 
 class App extends Component {
 
@@ -28,6 +26,7 @@ class App extends Component {
             <Route  path = "/shop/:id" component={Shop}/> 
             <Route exact path = "/shop" component={Shop}/> 
             <Route  path = "/search/:searchInput" component={Shop}/>
+            <Route exact path="/shipping_info" component={shipping_info} />
 
 
             </div> </Router >
@@ -36,4 +35,4 @@ class App extends Component {
     }
 }
 
-export default App
+export default App;

client/src/components/shipping_info/index.js

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import "./style.css";
+import swal from "sweetalert";
+import NavBar from "../Navbar";
+import axios from "axios";
+
+class shippingInfo extends Component {
+  state = {
+    username: "",
+    phone: "",
+    Address: "",
+    Extra_Note: ""
+  };
+
+  changeInput = ({ target: { value, name } }) => {
+    this.setState({ [name]: value });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    const { username, phone, Address, Extra_Note } = this.state;
+
+    axios
+      .post("/shipping_info", { username, phone, Address, Extra_Note })
+      .then(res => {
+        if (res.data) {
+          swal({
+            title:
+              "Your Order is processed Contact us on phone No : 0598121490",
+            icon: "success",
+            button: "Home!"
+          }).then(function() {
+            window.location.href = "/";
+          });
+        }
+      });
+  };
+
+  render() {
+    const { username, phone, Address, Extra_Note } = this.state;
+    return (
+      <div>
+        <NavBar />
+
+        <h1>Shipping info</h1>
+        <form className="flex-container" onSubmit={this.handleSubmit}>
+          <label for="username"></label>
+          <input
+            type="text"
+            placeholder="Name"
+            name="username"
+            onChange={this.changeInput}
+            value={username}
+            required
+          ></input>
+          <label for="phone"></label>
+          <input
+            type="tel"
+            name="phone"
+            placeholder="Phone 059-123-1234"
+            onChange={this.changeInput}
+            pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+            value={phone}
+            required
+          ></input>
+
+          <label for="Address"></label>
+          <input
+            type="text"
+            placeholder="Address"
+            name="Address"
+            onChange={this.changeInput}
+            value={Address}
+            required
+          ></input>
+          <label for="Extra Note"></label>
+          <input
+            type="text"
+            placeholder="Extra Note"
+            name="Extra_Note"
+            onChange={this.changeInput}
+            value={Extra_Note}
+          ></input>
+          <button type="submit" className="confirm">
+            Confirm
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+export default shippingInfo;

client/src/components/shipping_info/style.css

@@ -0,0 +1,31 @@
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    border: 1px #000000;
+  }
+  .flex-container input[type="text"] {
+    border: 0px;
+    border-bottom: solid 1px;
+    width: 95%;
+    margin: 6% auto 6% auto;
+    font-size: 1.2em;
+  }
+  .confirm {
+    text-align: center;
+    align-items: center;
+    width: 193px;
+    height: 63px;
+    background-color: #50bb00;
+    border-radius: 5px;
+    border: 0px;
+    color: white;
+    margin: 20% 50% auto 24%;
+    font-size: 1.2em
+  }
+  .flex-container input[type="tel"] {
+    border: 0px;
+    border-bottom: solid 1px;
+    width: 95%;
+    margin: 6% auto 6% auto;
+    font-size: 1.2em;
+  }

src/controller/add_order.js

@@ -0,0 +1,11 @@
+const postOrder = require('../database/queries/post_order')
+
+const addOrder = (req, res) => {
+  const { username, phone, Address, Extra_Note, orderID = 3 } = req.body
+  // The orderID will be token from the cookie after making the login page
+
+  postOrder(username, phone, Address, Extra_Note, orderID)
+    .then(() => res.status(200).json({ res: 'success true' }))
+    .catch(err => err.status(500).json({ err: 'error for post shipping info' }))
+}
+module.exports = addOrder

src/controller/getProducts.js

@@ -1,5 +1,5 @@
 const getProduct = require('../database/queries/getAllProduct.js')
 
 exports.getAllProduct = (request, response) => {
-    getProduct().then(result => response.json(result)).catch(err => response.json(err))
-}
+  getProduct().then(result => response.json(result)).catch(err => response.json(err))
+}

src/controller/index.js

@@ -4,10 +4,11 @@ const { getAllProduct } = require('./getProducts.js')
 const { getAllcategoryProduct } = require('./get_category_products')
 const { searchForAllProduct } = require('./get_products_by_name')
 const getCategories = require('./get_category')
+const add_order = require('./add_order')
 router.get('/shop/:category_id', getAllcategoryProduct)
 router.get('/search/:searchInput', searchForAllProduct)
 router.get('/shop', getAllProduct)
-
+router.post('/shipping_info', add_order)
 router.get('/category', getCategories)
 
-module.exports = router
+module.exports = router

src/database/db_connection.js

@@ -5,10 +5,10 @@ require('env2')('./config.env')
 const connectionString = process.env.DATABASE_URL
 
 if (!connectionString) {
-    throw new Error('Set a DATABASE_URL env variable')
+  throw new Error('Set a DATABASE_URL env variable')
 }
 
 module.exports = new Pool({
-    connectionString,
-    ssl: !connectionString.includes('localhost')
-})
+  connectionString,
+  ssl: !connectionString.includes('localhost')
+})

src/database/queries/getAllProduct.js

@@ -2,8 +2,8 @@
 const dbConnection = require('../db_connection')
 
 const getProduct = () => {
-    return dbConnection.query('SELECT * FROM product')
-        .then(res => res.rows)
-        .catch(err => err)
+  return dbConnection.query('SELECT * FROM product')
+    .then(res => res.rows)
+    .catch(err => err)
 }
-module.exports = getProduct
+module.exports = getProduct

src/database/queries/post_order.js

@@ -0,0 +1,13 @@
+const dbConnection = require('../db_connection')
+
+const postOrder = (name, address, phone, note, ID) => {
+  return dbConnection
+    .query(
+      'UPDATE "order" SET name=$1,address=$2,phone=$3,note=$4 WHERE ID=$5',
+      [name, address, phone, note, ID]
+    )
+    .then(res => res.rows)
+
+    .catch(err => err)
+}
+module.exports = postOrder