Video-28-PlaceOrder-Screen-Action (basir#28)

Author: basir

README.md

@@ -244,8 +244,11 @@ JS AMAZONA
     1. create PlaceOrder.js
     2. style elements
 28. PlaceOrder Screen Action
-    1. handle form submit
-    2. create backend api to create order
+    1. handle place order button click
+    2. createOrder api
+    3. create orderModel
+    4. create orderRouter
+    5. create post order route
 29. Order Screen
     1. create OrderScreen.js
     2. style elements

backend/data.js

@@ -1,7 +1,7 @@
 export default {
   products: [
     {
-      _id: '1',
+      _id: '111111111111111111111111',
       name: 'Hiskywin Full Zip Running Shirts Thermal Workout',
       category: 'Shirts',
       image: '/images/product-1.jpg',

backend/models/orderModel.js

@@ -0,0 +1,47 @@
+import mongoose from 'mongoose';
+
+const orderSchema = new mongoose.Schema(
+  {
+    orderItems: [
+      {
+        name: { type: String, required: true },
+        image: { type: String, required: true },
+        price: { type: Number, required: true },
+        qty: { type: Number, required: true },
+        product: {
+          type: mongoose.Schema.Types.ObjectId,
+          ref: 'Product',
+          required: true,
+        },
+      },
+    ],
+    user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
+    shipping: {
+      address: String,
+      city: String,
+      postalCode: String,
+      country: String,
+    },
+    payment: {
+      paymentMethod: String,
+      paymentResult: {
+        orderID: String,
+        payerID: String,
+        paymentID: String,
+      },
+    },
+    itemsPrice: Number,
+    taxPrice: Number,
+    shippingPrice: Number,
+    totalPrice: Number,
+    isPaid: { type: Boolean, required: true, default: false },
+    paidAt: Date,
+    isDelivered: { type: Boolean, required: true, default: false },
+    deliveredAt: Date,
+  },
+  {
+    timestamps: true,
+  }
+);
+const Order = mongoose.model('Order', orderSchema);
+export default Order;

backend/routers/orderRouter.js

@@ -0,0 +1,26 @@
+import express from 'express';
+import expressAsyncHandler from 'express-async-handler';
+import { isAuth } from '../utils';
+import Order from '../models/orderModel';
+
+const orderRouter = express.Router();
+
+orderRouter.post(
+  '/',
+  isAuth,
+  expressAsyncHandler(async (req, res) => {
+    const order = new Order({
+      orderItems: req.body.orderItems,
+      user: req.user._id,
+      shipping: req.body.shipping,
+      payment: req.body.payment,
+      itemsPrice: req.body.itemsPrice,
+      taxtPrice: req.body.taxtPrice,
+      shippingPrice: req.body.shippingPrice,
+      totalPrice: req.body.totalPrice,
+    });
+    const createdOrder = await order.save();
+    res.status(201).send({ message: 'New Order Created', order: createdOrder });
+  })
+);
+export default orderRouter;

backend/server.js

@@ -5,6 +5,7 @@ import bodyParser from 'body-parser';
 import data from './data';
 import config from './config';
 import userRouter from './routers/userRouter';
+import orderRouter from './routers/orderRouter';
 
 mongoose
   .connect(config.MONGODB_URL, {
@@ -22,6 +23,7 @@ const app = express();
 app.use(cors());
 app.use(bodyParser.json());
 app.use('/api/users', userRouter);
+app.use('/api/orders', orderRouter);
 app.get('/api/products', (req, res) => {
   res.send(data.products);
 });

frontend/src/api.js

@@ -90,3 +90,23 @@ export const update = async ({ name, email, password }) => {
     return { error: err.response.data.message || err.message };
   }
 };
+export const createOrder = async (order) => {
+  try {
+    const { token } = getUserInfo();
+    const response = await axios({
+      url: `${apiUrl}/api/orders`,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      data: order,
+    });
+    if (response.statusText !== 'Created') {
+      throw new Error(response.data.message);
+    }
+    return response.data;
+  } catch (err) {
+    return { error: err.response ? err.response.data.message : err.message };
+  }
+};

frontend/src/localStorage.js

@@ -69,3 +69,6 @@ export const getPayment = () => {
 export const setPayment = ({ paymentMethod = 'paypal' }) => {
   localStorage.setItem('payment', JSON.stringify({ paymentMethod }));
 };
+export const cleanCart = () => {
+  localStorage.removeItem('cartItems');
+};

frontend/src/srceens/PlaceOrderScreen.js

@@ -1,5 +1,12 @@
-import { getCartItems, getShipping, getPayment } from '../localStorage';
+import {
+  getCartItems,
+  getShipping,
+  getPayment,
+  cleanCart,
+} from '../localStorage';
 import CheckoutSteps from '../components/CheckoutSteps';
+import { showLoading, hideLoading, showMessage } from '../utils';
+import { createOrder } from '../api';
 
 const convertCartToOrder = () => {
   const orderItems = getCartItems();
@@ -29,7 +36,22 @@ const convertCartToOrder = () => {
   };
 };
 const PlaceOrderScreen = {
-  after_render: () => {},
+  after_render: async () => {
+    document
+      .getElementById('placeorder-button')
+      .addEventListener('click', async () => {
+        const order = convertCartToOrder();
+        showLoading();
+        const data = await createOrder(order);
+        hideLoading();
+        if (data.error) {
+          showMessage(data.error);
+        } else {
+          cleanCart();
+          document.location.hash = `/order/${data.order._id}`;
+        }
+      });
+  },
   render: () => {
     const {
       orderItems,
@@ -100,7 +122,7 @@ const PlaceOrderScreen = {
                  <li><div>Tax</div><div>$${taxPrice}</div></li>
                  <li class="total"><div>Order Total</div><div>$${totalPrice}</div></li> 
                  <li>
-                 <button class="primary fw">
+                 <button id="placeorder-button" class="primary fw">
                  Place Order
                  </button>
         </div>