Video-35-Edit-Product-UI (basir#35)

Author: basir

README.md

@@ -284,16 +284,16 @@ JS AMAZONA
  3. create product function in api.js
  4. call create product function in ProductListScreen
  5. redirect to edit product
-35. Edit and Delete Product
- 1. update parseUrlRequest to get action
+35. Edit Product UI
  2. create ProductEditScreen.js
  3. load product data from backend
  4. handle form submit
  5. save product in backend
- 6. update ProductListScreen.js
- 7. handle delete button
- 8. rerender after deletion
-36. Upload Product Image
+36. Delete Product
+ 3. update ProductListScreen.js
+ 4. handle delete button
+ 5. rerender after deletion
+37. Upload Product Image
  1. npm install multer
  2. create routes/uploadRoute.js
  3. import express and multer
@@ -310,43 +310,43 @@ JS AMAZONA
  14. call uploadProductImage()
  15. create uploadProductImage in api.js
  16. update server.js
-37. Build Project
+38. Build Project
  1. create build script for frontend
  2. create build script for backend
  3. update sever.js to serve frontend build folder and uploads folder
  4. stop running frontend
  5. npm run build
  6. check localhost:5000 for running website and showing images
-38. Show Categories In Sidebar Menu
+39. Show Categories In Sidebar Menu
  1. update ProductListScreen.js
  2. handle delete button
  3. rerender after deletion
-39. Admin Orders
+40. 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
-40. Edit Order
+41. Edit Order
  1. if order is payed show deliver button for admin
  2. handle click on deliver button
  3. set state to delivered
-41. Delete Order
+42. Delete Order
  1. update OrderListScreen.js
  2. handle delete button
  3. rerender after deletion
-42. Show Summary Report in Dashboard
+43. 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
-43. Show Chart in Dashboard
+44. 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
-44. Publish heroku
+45. Publish heroku
  1. publish steps

backend/routers/productRouter.js

@@ -4,6 +4,21 @@ import { isAuth, isAdmin } from '../utils';
 import Product from '../models/productModel';
 
 const productRouter = express.Router();
+productRouter.get(
+ '/',
+ expressAysncHandler(async (req, res) => {
+ const products = await Product.find({});
+ res.send(products);
+ })
+);
+productRouter.get(
+ '/:id',
+ expressAysncHandler(async (req, res) => {
+ const product = await Product.findById(req.params.id);
+ res.send(product);
+ })
+);
+
 productRouter.post(
  '/',
  isAuth,

backend/server.js

@@ -29,17 +29,7 @@ app.use('/api/orders', orderRouter);
 app.get('/api/paypal/clientId', (req, res) => {
  res.send({ clientId: config.PAYPAL_CLIENT_ID });
 });
-app.get('/api/products', (req, res) => {
- res.send(data.products);
-});
-app.get('/api/products/:id', (req, res) => {
- const product = data.products.find((x) => x._id === req.params.id);
- if (product) {
- res.send(product);
- } else {
- res.status(404).send({ message: 'Product Not Found!' });
- }
-});
+
 app.use((err, req, res, next) => {
  const status = err.name && err.name === 'ValidationError' ? 400 : 500;
  res.status(status).send({ message: err.message });

frontend/src/index.js

@@ -13,9 +13,11 @@ import PlaceOrderScreen from './srceens/PlaceOrderScreen';
 import OrderScreen from './srceens/OrderScreen';
 import DashboardScreen from './srceens/DashboardScreen';
 import ProductListScreen from './srceens/ProductListScreen';
+import ProductEditScreen from './srceens/ProductEditScreen';
 
 const routes = {
  '/': HomeScreen,
+ '/product/:id/edit': ProductEditScreen,
  '/product/:id': ProductScreen,
  '/order/:id': OrderScreen,
  '/cart/:id': CartScreen,
@@ -36,6 +38,7 @@ const router = async () => {
  (request.resource ? `/${request.resource}` : '/') +
  (request.id ? '/:id' : '') +
  (request.verb ? `/${request.verb}` : '');
+ console.log(request);
  const screen = routes[parseUrl] ? routes[parseUrl] : Error404Screen;
  const header = document.getElementById('header-container');
  header.innerHTML = await Header.render();

frontend/src/srceens/ProductEditScreen.js

@@ -0,0 +1,73 @@
+import { parseRequestUrl } from '../utils';
+import { getProduct } from '../api';
+
+const ProductEditScreen = {
+ after_render: () => {},
+ render: async () => {
+ const request = parseRequestUrl();
+ const product = await getProduct(request.id);
+ return `
+ <div class="content">
+ <div>
+ <a href="/#/productlist">Back to products</a>
+ </div>
+ <div class="form-container">
+ <form id="edit-product-form">
+ <ul class="form-items">
+ <li>
+ <h1>Edit Product ${product._id.substring(0, 8)}</h1>
+ </li>
+ <li>
+ <label for="name">Name</label>
+ <input type="text" name="name" value="${
+ product.name
+ }" id="name" />
+ </li>
+ <li>
+ <label for="price">Price</label>
+ <input type="number" name="price" value="${
+ product.price
+ }" id="price" />
+ </li>
+ <li>
+ <label for="image">Image (680 x 830)</label>
+ <input type="text" name="image" value="${
+ product.image
+ }" id="image" />
+ </li>
+ <li>
+ <label for="brand">Brand</label>
+ <input type="text" name="brand" value="${
+ product.brand
+ }" id="brand" />
+ </li>
+ <li>
+ <label for="countInStock">Count In Stock</label>
+ <input type="text" name="countInStock" value="${
+ product.countInStock
+ }" id="countInStock" />
+ </li>
+ <li>
+ <label for="category">Category</label>
+ <input type="text" name="category" value="${
+ product.category
+ }" id="category" />
+ </li>
+ <li>
+ <label for="description">Description</label>
+ <input type="text" name="description" value="${
+ product.description
+ }" id="description" />
+ </li>
+ <li>
+ <button type="submit" class="primary">Update</button>
+ </li>
+ </ul>
+ </form>
+ </div>
+
+ </div>
+ `;
+ },
+};
+export default ProductEditScreen;

frontend/src/srceens/ProductListScreen.js

@@ -9,6 +9,12 @@ const ProductListScreen = {
  const data = await createProduct();
  document.location.hash = `/product/${data.product._id}/edit`;
  });
+ const editButtons = document.getElementsByClassName('edit-button');
+ Array.from(editButtons).forEach((editButton) => {
+ editButton.addEventListener('click', () => {
+ document.location.hash = `/product/${editButton.id}/edit`;
+ });
+ });
  },
  render: async () => {
  const products = await getProducts();

frontend/src/utils.js

@@ -6,7 +6,7 @@ export const parseRequestUrl = () => {
  return {
  resource: request[1],
  id: request[2],
- action: request[3],
+ verb: request[3],
  };
 };
 export const rerender = async (component) => {