Video 29 order screen (basir#29)

* Video-29-Order-Screen * Video-29-Order-Screen

Author: basir

backend/routers/orderRouter.js

@@ -4,7 +4,18 @@ import { isAuth } from '../utils';
 import Order from '../models/orderModel';
 
 const orderRouter = express.Router();
-
+orderRouter.get(
+ '/:id',
+ isAuth,
+ expressAsyncHandler(async (req, res) => {
+ const order = await Order.findById(req.params.id);
+ if (order) {
+ res.send(order);
+ } else {
+ res.status(404).send({ message: 'Order Not Found' });
+ }
+ })
+);
 orderRouter.post(
  '/',
  isAuth,
@@ -15,12 +26,13 @@ orderRouter.post(
  shipping: req.body.shipping,
  payment: req.body.payment,
  itemsPrice: req.body.itemsPrice,
- taxtPrice: req.body.taxtPrice,
+ taxPrice: req.body.taxPrice,
  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;

frontend/src/api.js

@@ -110,3 +110,21 @@ export const createOrder = async (order) => {
  return { error: err.response ? err.response.data.message : err.message };
  }
 };
+export const getOrder = async (id) => {
+ try {
+ const { token } = getUserInfo();
+ const response = await axios({
+ url: `${apiUrl}/api/orders/${id}`,
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ if (response.statusText !== 'OK') {
+ throw new Error(response.data.message);
+ }
+ return response.data;
+ } catch (err) {
+ return { error: err.message };
+ }
+};

frontend/src/index.js

@@ -10,10 +10,12 @@ import ProfileScreen from './srceens/ProfileScreen';
 import ShippingScreen from './srceens/ShippingScreen';
 import PaymentScreen from './srceens/PaymentScreen';
 import PlaceOrderScreen from './srceens/PlaceOrderScreen';
+import OrderScreen from './srceens/OrderScreen';
 
 const routes = {
  '/': HomeScreen,
  '/product/:id': ProductScreen,
+ '/order/:id': OrderScreen,
  '/cart/:id': CartScreen,
  '/cart': CartScreen,
  '/signin': SigninScreen,

frontend/src/srceens/OrderScreen.js

@@ -0,0 +1,95 @@
+import { parseRequestUrl } from '../utils';
+import { getOrder } from '../api';
+
+const OrderScreen = {
+ after_render: async () => {},
+ render: async () => {
+ const request = parseRequestUrl();
+ const {
+ _id,
+ shipping,
+ payment,
+ orderItems,
+ itemsPrice,
+ shippingPrice,
+ taxPrice,
+ totalPrice,
+ isDelivered,
+ deliveredAt,
+ isPaid,
+ paidAt,
+ } = await getOrder(request.id);
+ return `
+ <div>
+ <h1>Order ${_id}</h1>
+ <div class="order">
+ <div class="order-info">
+ <div>
+ <h2>Shipping</h2>
+ <div>
+ ${shipping.address}, ${shipping.city}, ${shipping.postalCode}, 
+ ${shipping.country}
+ </div>
+ ${
+ isDelivered
+ ? `<div class="success">Delivered at ${deliveredAt}</div>`
+ : `<div class="error">Not Delivered</div>`
+ }
+ 
+ </div>
+ <div>
+ <h2>Payment</h2>
+ <div>
+ Payment Method : ${payment.paymentMethod}
+ </div>
+ ${
+ isPaid
+ ? `<div class="success">Paid at ${paidAt}</div>`
+ : `<div class="error">Not Paid</div>`
+ }
+ </div>
+ <div>
+ <ul class="cart-list-container">
+ <li>
+ <h2>Shopping Cart</h2>
+ <div>Price</div>
+ </li>
+ ${orderItems
+ .map(
+ (item) => `
+ <li>
+ <div class="cart-image">
+ <img src="${item.image}" alt="${item.name}" />
+ </div>
+ <div class="cart-name">
+ <div>
+ <a href="/#/product/${item.product}">${item.name} </a>
+ </div>
+ <div> Qty: ${item.qty} </div>
+ </div>
+ <div class="cart-price"> $${item.price}</div>
+ </li>
+ `
+ )
+ .join('\n')}
+ </ul>
+ </div>
+ </div>
+ <div class="order-action">
+ <ul>
+ <li>
+ <h2>Order Summary</h2>
+ </li>
+ <li><div>Items</div><div>$${itemsPrice}</div></li>
+ <li><div>Shipping</div><div>$${shippingPrice}</div></li>
+ <li><div>Tax</div><div>$${taxPrice}</div></li>
+ <li class="total"><div>Order Total</div><div>$${totalPrice}</div></li> 
+ <li>
+ 
+ </div>
+ </div>
+ </div>
+ `;
+ },
+};
+export default OrderScreen;

frontend/style.css

@@ -322,6 +322,9 @@ footer {
 .order-info > div:first-child {
  margin-top: 0;
 }
+.order-info > div > div {
+ padding: 1rem;
+}
 .order-action {
  flex: 1 1 20rem;
  border: 0.1rem #c0c0c0 solid;