Video-13-Product-Screen

Author: basir

.eslintrc.js

@@ -13,5 +13,6 @@ module.exports = {
     'no-console': 0,
     'no-underscore-dangle': 0,
     'no-nested-ternary': 0,
+    'import/prefer-default-export': 0,
   },
 };

README.md

@@ -111,3 +111,16 @@ JS AMAZONA
     8. style div.rating, span and last span
     9. Edit HomeScreen
     10. Add div.product-rating and use Rating component
+13. Product Screen
+    1. get product id from request
+    2. implement /api/product/:id api
+    3. send Ajax request to product api
+    4. create back to result link
+    5. create div.details with 3 columns
+    6. column 1 for product image
+    7. column 2 for product information
+    8. column 3 form product action
+    9. style .details and all columns
+    10. create add to cart button with add-button id
+    11. after_render() to add event to the button
+    12. redirect user to cart/:product_id

backend/server.js

@@ -7,6 +7,14 @@ app.use(cors());
 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.listen(5000, () => {
   console.log('serve at http://localhost:5000');

frontend/src/api.js

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { apiUrl } from './config';
+
+export const getProduct = async (id) => {
+  try {
+    const response = await axios({
+      url: `${apiUrl}/api/products/${id}`,
+      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 };
+  }
+};

frontend/src/config.js

@@ -0,0 +1 @@
+export const apiUrl = 'http://localhost:5000';

frontend/src/srceens/ProductScreen.js

@@ -1,4 +1,14 @@
+import { parseRequestUrl } from '../utils';
+import { getProduct } from '../api';
+
 const ProductScreen = {
-  render: () => '<div>ProductScreen</div>',
+  render: async () => {
+    const request = parseRequestUrl();
+    const product = await getProduct(request.id);
+    if (product.error) {
+      return `<div>${product.error}</div>`;
+    }
+    return `<h1>${product.name}</h1>`;
+  },
 };
 export default ProductScreen;