Video 41 deliver order (basir#41)

* Video-40-Admin-Orders * Video-41-Deliver-Order

Author: basir

README.md

@@ -346,7 +346,7 @@ Feel free to take a look at the course preview and enroll if it is along with yo
  4. list them in the screen
  5. show delete and edit button
  6. redirect to order details on edit action
-41. Edit Order
+41. Deliver Order
  1. if order is payed show deliver button for admin
  2. handle click on deliver button
  3. set state to delivered

backend/routers/orderRouter.js

@@ -88,4 +88,20 @@ orderRouter.put(
  }
  })
 );
+
+orderRouter.put(
+ '/:id/deliver',
+ isAuth,
+ expressAsyncHandler(async (req, res) => {
+ const order = await Order.findById(req.params.id);
+ if (order) {
+ order.isDelivered = true;
+ order.deliveredAt = Date.now();
+ const updatedOrder = await order.save();
+ res.send({ message: 'Order Delivered', order: updatedOrder });
+ } else {
+ res.status(404).send({ message: 'Order Not Found.' });
+ }
+ })
+);
 export default orderRouter;

frontend/src/api.js

@@ -320,3 +320,22 @@ export const payOrder = async (orderId, paymentResult) => {
  return { error: err.response ? err.response.data.message : err.message };
  }
 };
+export const deliverOrder = async (orderId) => {
+ try {
+ const { token } = getUserInfo();
+ const response = await axios({
+ url: `${apiUrl}/api/orders/${orderId}/deliver`,
+ method: 'PUT',
+ 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.response ? err.response.data.message : err.message };
+ }
+};

frontend/src/srceens/OrderListScreen.js

@@ -19,6 +19,12 @@ const OrderListScreen = {
  }
  });
  });
+ const editButtons = document.getElementsByClassName('edit-button');
+ Array.from(editButtons).forEach((editButton) => {
+ editButton.addEventListener('click', async () => {
+ document.location.hash = `/order/${editButton.id}`;
+ });
+ });
  },
  render: async () => {
  const orders = await getOrders();

frontend/src/srceens/OrderScreen.js

@@ -5,7 +5,8 @@ import {
  showMessage,
  rerender,
 } from '../utils';
-import { getOrder, getPaypalClientId, payOrder } from '../api';
+import { getOrder, getPaypalClientId, payOrder, deliverOrder } from '../api';
+import { getUserInfo } from '../localStorage';
 
 const addPaypalSdk = async (totalPrice) => {
  const clientId = await getPaypalClientId();
@@ -70,8 +71,20 @@ const handlePayment = (clientId, totalPrice) => {
  });
 };
 const OrderScreen = {
- after_render: async () => {},
+ after_render: async () => {
+ const request = parseRequestUrl();
+ document
+ .getElementById('deliver-order-button')
+ .addEventListener('click', async () => {
+ showLoading();
+ await deliverOrder(request.id);
+ hideLoading();
+ showMessage('Order Delivered.');
+ rerender(OrderScreen);
+ });
+ },
  render: async () => {
+ const { isAdmin } = getUserInfo();
  const request = parseRequestUrl();
  const {
  _id,
@@ -157,6 +170,12 @@ const OrderScreen = {
  <li class="total"><div>Order Total</div><div>$${totalPrice}</div></li> 
  <li><div class="fw" id="paypal-button"></div></li>
  <li>
+ ${
+ isPaid && !isDelivered && isAdmin
+ ? `<button id="deliver-order-button" class="primary fw">Deliver Order</button>`
+ : ''
+ }
+ <li>
  
  </div>
  </div>