Video-33-Admin-Products-UI (#33)

Author: basir

README.md

@@ -294,32 +294,36 @@ JS AMAZONA
     1. update ProductListScreen.js
     2. handle delete button
     3. rerender after deletion
-37. Admin Orders
+37. Show Categories In Sidebar Menu
+    1. update ProductListScreen.js
+    2. handle delete button
+    3. rerender after deletion
+38. Admin Orders
     1. create Admin Order menu in header
     2. create AdminOrder.js
     3. load orders from backend
     4. list them in the screen
     5. show delete and edit button
     6. redirect to order details on edit action
-38. Edit Order
+39. Edit Order
     1. if order is payed show deliver button for admin
     2. handle click on deliver button
     3. set state to delivered
-39. Delete Order
+40. Delete Order
     1. update OrderListScreen.js
     2. handle delete button
     3. rerender after deletion
-40. Show Summary Report in Dashboard
+41. Show Summary Report in Dashboard
     1. create summary section
     2. style summary
     3. create summary backend
     4. create getSummary in api.js
     5. load data in dashboard screen
     6. show 3 boxes for Users, Orders and Sales
-41. Show Chart in Dashboard
+42. Show Chart in Dashboard
     1. import chartist
     2. add chartist css to index.html
     3. create linear chart for daily sales
     4. create pie chart for product categories
-42. Publish heroku
+43. Publish heroku
     1. publish steps

frontend/src/api.js

@@ -2,6 +2,25 @@ import axios from 'axios';
 import { apiUrl } from './config';
 import { getUserInfo } from './localStorage';
 
+export const getProducts = async () => {
+  try {
+    const response = await axios({
+      url: `${apiUrl}/api/products`,
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (response.statusText !== 'OK') {
+      throw new Error(response.data.message);
+    }
+    return response.data;
+  } catch (err) {
+    console.log(err);
+    return { error: err.response.data.message || err.message };
+  }
+};
+
 export const getProduct = async (id) => {
   try {
     const response = await axios({

frontend/src/index.js

@@ -12,6 +12,7 @@ import PaymentScreen from './srceens/PaymentScreen';
 import PlaceOrderScreen from './srceens/PlaceOrderScreen';
 import OrderScreen from './srceens/OrderScreen';
 import DashboardScreen from './srceens/DashboardScreen';
+import ProductListScreen from './srceens/ProductListScreen';
 
 const routes = {
   '/': HomeScreen,
@@ -26,6 +27,7 @@ const routes = {
   '/payment': PaymentScreen,
   '/placeorder': PlaceOrderScreen,
   '/dashboard': DashboardScreen,
+  '/productlist': ProductListScreen,
 };
 const router = async () => {
   showLoading();

frontend/src/srceens/HomeScreen.js

@@ -1,21 +1,13 @@
 import axios from 'axios';
 import Rating from '../components/Rating';
-import { hideLoading, showLoading } from '../utils';
+import { getProducts } from '../api';
 
 const HomeScreen = {
   render: async () => {
-    showLoading();
-    const response = await axios({
-      url: 'http://localhost:5000/api/products',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    hideLoading();
-    if (!response || response.statusText !== 'OK') {
-      return '<div>Error in getting data</div>';
+    const products = await getProducts();
+    if (products.error) {
+      return `<div class="error">${products.error}</div>`;
     }
-    const products = response.data;
 
     return `
     <ul class="products">

frontend/src/srceens/ProductListScreen.js

@@ -0,0 +1,54 @@
+import DashboardMenu from '../components/DashboardMenu';
+import { getProducts } from '../api';
+
+const ProductListScreen = {
+  after_render: () => {},
+  render: async () => {
+    const products = await getProducts();
+    return `
+    <div class="dashboard">
+    ${DashboardMenu.render({ selected: 'products' })}
+    <div class="dashboard-content">
+      <h1>Products</h1>
+      <button id="create-product-button" class="primary">
+        Create Product
+      </button>
+      <div class="product-list">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>NAME</th>
+              <th>PRICE</th>
+              <th>CATEGORY</th>
+              <th>BRAND</th>
+              <th class="tr-action">ACTION</th>
+            <tr>
+          </thead>
+          <tbody>
+            ${products
+              .map(
+                (product) => `
+            <tr>
+              <td>${product._id}</td>
+              <td>${product.name}</td>
+              <td>${product.price}</td>
+              <td>${product.category}</td>
+              <td>${product.brand}</td>
+              <td>
+              <button id="${product._id}" class="edit-button">Edit</button>
+              <button id="${product._id}" class="delete-button">Delete</button>
+              </td>
+            </tr>
+            `
+              )
+              .join('\n')}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+    `;
+  },
+};
+export default ProductListScreen;

frontend/style.css

@@ -408,3 +408,11 @@ td {
   flex: 4 1 80rem;
   padding: 1rem;
 }
+
+.product-list button {
+  font-size: 1.3rem;
+  padding: 0.5rem;
+}
+.tr-action {
+  width: 10rem;
+}