Video-31-Display-Orders-History (basir#31)

Author: basir

README.md

@@ -263,9 +263,11 @@ JS AMAZONA
  8. create payOrder in api.js
  9. create route for /:id/pay in orderRouter.js
  10. rerender after pay order
-31. User Order History
- 1. Create order history api
- 2. Show orders in profile screen
+31. Display Orders History
+ 1. create customer orders api
+ 2. create api for getMyOrders
+ 3. show orders in profile screen
+ 4. style orders
 32. Admin Products
  1. create Admin Order menu in header
  2. create ProductListScreen.js

backend/routers/orderRouter.js

@@ -4,6 +4,14 @@ import { isAuth } from '../utils';
 import Order from '../models/orderModel';
 
 const orderRouter = express.Router();
+orderRouter.get(
+ '/mine',
+ isAuth,
+ expressAsyncHandler(async (req, res) => {
+ const orders = await Order.find({ user: req.user._id });
+ res.send(orders);
+ })
+);
 orderRouter.get(
  '/:id',
  isAuth,

frontend/src/api.js

@@ -128,7 +128,24 @@ export const getOrder = async (id) => {
  return { error: err.message };
  }
 };
-
+export const getMyOrders = async () => {
+ try {
+ const { token } = getUserInfo();
+ const response = await axios({
+ url: `${apiUrl}/api/orders/mine`,
+ 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 };
+ }
+};
 export const getPaypalClientId = async () => {
  const response = await axios({
  url: `${apiUrl}/api/paypal/clientId`,

frontend/src/srceens/ProfileScreen.js

@@ -1,4 +1,4 @@
-import { update } from '../api';
+import { update, getMyOrders } from '../api';
 import { getUserInfo, setUserInfo, clearUser } from '../localStorage';
 import { showLoading, hideLoading, showMessage } from '../utils';
 
@@ -27,13 +27,16 @@ const ProfileScreen = {
  }
  });
  },
- render: () => {
+ render: async () => {
  const { name, email } = getUserInfo();
  if (!name) {
  document.location.hash = '/';
  }
+ const orders = await getMyOrders();
  return `
- <div class="form-container">
+ <div class="content profile">
+ <div class="profile-info">
+ <div class="form-container">
  <form id="profile-form">
  <ul class="form-items">
  <li>
@@ -56,11 +59,50 @@ const ProfileScreen = {
  </li>
  <li>
  <button type="button" id="signout-button" >Sign Out</button>
- </li>
- 
+ </li> 
  </ul>
  </form>
  </div>
+ </div>
+ <div class="profile-orders">
+ <h2>Order History</h2>
+ <table>
+ <thead>
+ <tr>
+ <th>ORDER ID</th>
+ <th>DATE</th>
+ <th>TOTAL</th>
+ <th>PAID</th>
+ <th>DELIVERED</th>
+ <th>ACTIONS</th>
+ </tr>
+ </thead>
+ <tbody>
+ ${
+ orders.length === 0
+ ? `<tr><td colspan="6">No Order Found.</tr>`
+ : orders
+ .map(
+ (order) => `
+ <tr>
+ <td>${order._id}</td>
+ <td>${order.createdAt}</td>
+ <td>${order.totalPrice}</td>
+ <td>${order.paidAt || 'No'}</td>
+ <td>${order.deliveryAt || 'No'}</td>
+ <td><a href="/#/order/${order._id}">DETIALS</a> </td>
+ </tr>
+ `
+ )
+ .join('\n')
+ }
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+
+ 
  `;
  },
 };

frontend/style.css

@@ -346,3 +346,29 @@ footer {
  font-weight: bold;
  color: #c04000;
 }
+/* Profile */
+.profile {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+}
+.profile-info {
+ flex: 1 1 20rem;
+}
+.profile-orders {
+ flex: 3 1 60rem;
+ margin-left: 1rem;
+}
+
+table {
+ width: 100%;
+}
+th {
+ text-align: left;
+}
+tbody > tr:nth-child(odd) {
+ background-color: #f0f0f0;
+}
+td {
+ padding: 0.5rem;
+}