Load data into edit product screen

Author: kkamara

frontend/src/components/pages/adminDashboard/products/EditProductComponent.jsx

@@ -8,7 +8,7 @@ import Error from "../../../layouts/Error"
 import { getAdminCategories, } from "../../../../redux/actions/adminCategoriesActions"
 import { getAdminManufacturers, } from "../../../../redux/actions/adminManufacturersActions"
 // import { newProduct, } from "../../../../redux/actions/createAdminProductActions"
-import { getAdminProduct, } from "../../../../redux/actions/adminProductActions"
+import { getAdminProductEdit, } from "../../../../redux/actions/adminProductEditActions"
 
 import "./EditProductComponent.scss"
 
@@ -29,7 +29,7 @@ export default function EditProductComponent() {
     adminAuth: state.adminAuth,
     adminCategories: state.adminCategories,
     adminManufacturers: state.adminManufacturers,
-    adminProduct: state.adminProduct,
+    adminProductEdit: state.adminProductEdit,
   }))
   // At least one image is required.
   const [image, setImage] = useState(defaultImageState)
@@ -61,26 +61,34 @@ export default function EditProductComponent() {
     ) {
       dispatch(getAdminCategories())
       dispatch(getAdminManufacturers())
-      dispatch(getAdminProduct(productSlug))
+      dispatch(getAdminProductEdit(productSlug))
     }
   }, [state.adminAuth])
 
   useEffect(() => {
     if (
-      false === state.adminProduct.loading
+      false === state.adminProductEdit.loading
     ) {
       if (
-        null !== state.adminProduct.data
+        null !== state.adminProductEdit.data
       ) {
         // TODO: set loaded product data into state.
+        setName(state.adminProductEdit.data.name)
+        setUnits(state.adminProductEdit.data.units)
+        setWeight(state.adminProductEdit.data.weight)
+        setPrice(state.adminProductEdit.data.price)
+        setDescription(state.adminProductEdit.data.description)
+        setCategory(state.adminProductEdit.data.category.id)
+        setManufacturer(state.adminProductEdit.data.manufacturer.id)
+        setIsLive(state.adminProductEdit.data.isLive ? "1" : "0")
       }
       if (
-        null !== state.adminProduct.error
+        null !== state.adminProductEdit.error
       ) {
         navigate("/admin/404-not-found")
       }
     }
-  }, [state.adminProduct])
+  }, [state.adminProductEdit])
 
   const handleSetImage = e => {
     if (1 !== e.target.files.length || false !== imageError(e.target.files[0].type)) {
@@ -289,7 +297,7 @@ export default function EditProductComponent() {
     state.adminAuth.loading ||
     state.adminCategories.loading ||
     state.adminManufacturers.loading ||
-    state.adminProduct.loading
+    state.adminProductEdit.loading
   ) {
     return (
       <div className="container dashboard-edit-product-container text-center">
@@ -307,18 +315,18 @@ export default function EditProductComponent() {
     >
       <Helmet>
         <title>
-          Edit {state.adminProduct.data.name} - {adminDashboardTitle}
+          Edit {state.adminProductEdit.data.name} - {adminDashboardTitle}
         </title>
-        <meta name="title" content={`Edit ${state.adminProduct.data.name} - ${adminDashboardTitle}`}/>
+        <meta name="title" content={`Edit ${state.adminProductEdit.data.name} - ${adminDashboardTitle}`}/>
       </Helmet>
       <div className="d-sm-flex align-items-center justify-content-between mb-4">
         <h1 className="h3 mb-0 text-gray-800">
           <a href="/admin/products" className="breadcrumb-link">
             View Products
           </a>
           &nbsp;&#x2022;&nbsp;
-          <a href={`/admin/products/${state.adminProduct.data.slug}`} className="breadcrumb-link">
-            {state.adminProduct.data.name}
+          <a href={`/admin/products/${state.adminProductEdit.data.slug}`} className="breadcrumb-link">
+            {state.adminProductEdit.data.name}
           </a>
           &nbsp;&#x2022; Edit Product
         </h1>

frontend/src/redux/actions/adminProductEditActions.js

@@ -0,0 +1,38 @@
+
+import HttpService from "../../services/HttpService"
+import { adminProductEdit, } from "../types"
+
+export const getAdminProductEdit = slug => {
+  return async dispatch => {
+    const http = new HttpService()
+
+    dispatch({ type: adminProductEdit.GET_ADMIN_PRODUCT_EDIT_PENDING, })
+
+    const tokenId = "admin-user-token"
+    const path = "/admin/products/"+slug+"/edit"
+    await http.getData(path, tokenId)
+      .then(res => {
+        dispatch({
+          type: adminProductEdit.GET_ADMIN_PRODUCT_EDIT_SUCCESS,
+          payload: res.data.data,
+        })
+      }).catch(error => {
+        let message
+        if ("ERR_NETWORK" === error.code) {
+          message = "Server unavailable."
+        } else if (
+          error.response &&
+          error.response.data &&
+          error.response.data.error
+        ) {
+          message = error.response.data.error
+        } else {
+          message = "Something went wrong. Please come back later."
+        }
+        dispatch({ 
+          type: adminProductEdit.GET_ADMIN_PRODUCT_EDIT_ERROR, 
+          payload: message,
+        })
+      })
+  }
+}

frontend/src/redux/reducers/adminProductEditReducer.js

@@ -0,0 +1,36 @@
+import { adminProductEdit, } from "../types"
+
+const initState = {
+  data: null,
+  error: null,
+  loading: true,
+}
+
+export default function adminEditProductReducer (state = initState, action) {
+  switch (action.type) {
+    
+    case adminProductEdit.GET_ADMIN_PRODUCT_EDIT_ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        loading: false,
+      }
+    
+    case adminProductEdit.GET_ADMIN_PRODUCT_EDIT_PENDING:
+      return {
+        ...state,
+        loading: true,
+      }
+    
+    case adminProductEdit.GET_ADMIN_PRODUCT_EDIT_SUCCESS:
+      return {
+        ...state,
+        data: action.payload,
+        loading: false,
+        error: null,
+      }
+
+    default:
+      return state
+  }
+}

frontend/src/redux/reducers/index.js

@@ -15,6 +15,7 @@ import adminManufacturersReducer from "./adminManufacturersReducer"
 import createAdminProductReducer from "./createAdminProductReducer"
 import productsReducer from "./productsReducer"
 import productReducer from "./productReducer"
+import adminProductEditReducer from "./adminProductEditReducer"
 
 export default combineReducers({
   auth: authReducer,
@@ -33,4 +34,5 @@ export default combineReducers({
   createAdminProduct: createAdminProductReducer,
   products: productsReducer,
   product: productReducer,
+  adminProductEdit: adminProductEditReducer,
 })

frontend/src/redux/types.js

@@ -108,4 +108,10 @@ export const product = {
   GET_PRODUCT_SUCCESS: "GET_PRODUCT_SUCCESS",
   GET_PRODUCT_ERROR: "GET_PRODUCT_ERROR",
   GET_PRODUCT_PENDING: "GET_PRODUCT_PENDING",
+}
+
+export const adminProductEdit = {
+  GET_ADMIN_PRODUCT_EDIT_SUCCESS: "GET_ADMIN_PRODUCT_EDIT_SUCCESS",
+  GET_ADMIN_PRODUCT_EDIT_ERROR: "GET_ADMIN_PRODUCT_EDIT_ERROR",
+  GET_ADMIN_PRODUCT_EDIT_PENDING: "GET_ADMIN_PRODUCT_EDIT_PENDING",
 }

grocery-store-management-system.postman_collection.json

@@ -470,6 +470,36 @@
 											},
 											"response": []
 										},
+										{
+											"name": "Get Product Edit",
+											"request": {
+												"auth": {
+													"type": "bearer",
+													"bearer": [
+														{
+															"key": "token",
+															"value": "{{token}}",
+															"type": "string"
+														}
+													]
+												},
+												"method": "GET",
+												"header": [],
+												"url": {
+													"raw": "{{web}}/admin/products/SpongeBob/edit",
+													"host": [
+														"{{web}}"
+													],
+													"path": [
+														"admin",
+														"products",
+														"SpongeBob",
+														"edit"
+													]
+												}
+											},
+											"response": []
+										},
 										{
 											"name": "New Product",
 											"request": {
@@ -523,14 +553,14 @@
 												"method": "DELETE",
 												"header": [],
 												"url": {
-													"raw": "{{web}}/admin/products/Bespoke-Bamboo-Hat",
+													"raw": "{{web}}/admin/products/SpongeBob",
 													"host": [
 														"{{web}}"
 													],
 													"path": [
 														"admin",
 														"products",
-														"Bespoke-Bamboo-Hat"
+														"SpongeBob"
 													]
 												}
 											},

src/models/v1/product.js

@@ -395,6 +395,7 @@ module.exports = (sequelize, DataTypes) => {
      * @param {boolean} [options.getCategory=false] options.getCategory
      * @param {boolean} [options.getManufacturer=false] options.getManufacturer
      * @param {boolean} [options.singlePhoto=false] options.singlePhoto
+     * @param {boolean} [options.unformatted=false] options.unformatted
      * @returns {array}
      */
     static async getFormattedProductData(
@@ -440,6 +441,13 @@ module.exports = (sequelize, DataTypes) => {
             result.photos = [photo];
           }
         }
+        if (true === options.unformatted) {
+          result.price = product.price;
+          result.weight = product.weight.slice(
+            0,
+            product.weight.indexOf(" kg"),
+          );
+        }
       }
       return result;
     }
@@ -481,9 +489,10 @@ module.exports = (sequelize, DataTypes) => {
 
     /**
      * @param {string} slug
+     * @param {boolean} [options.unformatted=false] options.unformatted
      * @returns {object|false}
      */
-    static async getAdminProductBySlug(slug) {
+    static async getAdminProductBySlug(slug, options) {
       try {
         const result = await sequelize.query(
           `SELECT *
@@ -504,6 +513,7 @@ module.exports = (sequelize, DataTypes) => {
           {
             getCategory: true,
             getManufacturer: true,
+            unformatted: options && true === options.unformatted,
           }
         );
       } catch(err) {

src/routes/api/v1/web/admin/products/product.js

@@ -31,6 +31,28 @@ router.get("/", adminAuthenticate, async (req, res) => {
   return res.json({ data: product, });
 });
 
+router.get("/edit", adminAuthenticate, async (req, res) => {
+  const product = await db.sequelize.models
+    .product
+    .getAdminProductBySlug(
+      req.paramString("productSlug"),
+      { unformatted: true },
+    );
+  if (false === product) {
+    res.status(status.NOT_FOUND);
+    return res.json({ error: message404, });
+  }
+  const photos = await db.sequelize.models
+    .productPhoto
+    .getProductPhotos(product.id);
+  if (false === photos) {
+    product.photos = null;
+  } else {
+    product.photos = photos;
+  }
+  return res.json({ data: product, });
+});
+
 router.delete("/", adminAuthenticate, async (req, res) => {
   const product = await db.sequelize.models
     .product