Load already uploaded photos onto edit product screen and make editable

Author: kkamara

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

@@ -9,6 +9,7 @@ import { getAdminCategories, } from "../../../../redux/actions/adminCategoriesAc
 import { getAdminManufacturers, } from "../../../../redux/actions/adminManufacturersActions"
 // import { newProduct, } from "../../../../redux/actions/createAdminProductActions"
 import { getAdminProductEdit, } from "../../../../redux/actions/adminProductEditActions"
+import RenderUploadedImages from "./RenderUploadedImages"
 
 import "./EditProductComponent.scss"
 
@@ -31,7 +32,7 @@ export default function EditProductComponent() {
     adminManufacturers: state.adminManufacturers,
     adminProductEdit: state.adminProductEdit,
   }))
-  // At least one image is required.
+  const [uploadedPhotos, setUploadedPhotos] = useState([])
   const [image, setImage] = useState(defaultImageState)
   const [image1, setImage1] = useState(defaultImageState)
   const [image2, setImage2] = useState(defaultImageState)
@@ -72,7 +73,6 @@ export default function EditProductComponent() {
       if (
         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)
@@ -81,6 +81,7 @@ export default function EditProductComponent() {
         setCategory(state.adminProductEdit.data.category.id)
         setManufacturer(state.adminProductEdit.data.manufacturer.id)
         setIsLive(state.adminProductEdit.data.isLive ? "1" : "0")
+        setUploadedPhotos(state.adminProductEdit.data.photos)
       }
       if (
         null !== state.adminProductEdit.error
@@ -181,6 +182,20 @@ export default function EditProductComponent() {
     }
   }
 
+  const resetUploadedPhoto = id => {
+    const newUploadedPhotos = uploadedPhotos
+    for (const key in newUploadedPhotos) {
+      if (id === newUploadedPhotos[key].id) {
+        if (!newUploadedPhotos[key].reset) {
+          newUploadedPhotos[key].reset = true
+        } else {
+          newUploadedPhotos[key].reset = false
+        }
+      }
+    }
+    setUploadedPhotos(newUploadedPhotos)
+  }
+
   const handleNameChange = e => {
     setName(e.target.value)
   }
@@ -339,6 +354,10 @@ export default function EditProductComponent() {
         <div className="col-xl-6 col-lg-6">
           <div className="card shadow mb-4">
             <div className="card-body">
+              <RenderUploadedImages
+                photos={uploadedPhotos}
+                resetUploadedPhoto={resetUploadedPhoto}
+              />
               <div className="form-group">
                 <input
                   type="file"

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

@@ -0,0 +1,26 @@
+import React from "react"
+import { FaWindowClose, } from "react-icons/fa"
+
+import "./RenderUploadedImages.scss"
+
+export default function RenderUploadedImages({ photos, resetUploadedPhoto, }) {
+  return <div className="row render-uploaded-images-container">
+    {photos.map((photo, index) => (
+      <div key={index} className="col-md-4">
+        <div className="card">
+          <div className="card-body">
+            <img
+              className={`img-fluid product-image ${photo.reset ? "reset-photo" : null}`}
+              src={photo.path}
+              alt={photo.name}
+            />
+            <FaWindowClose
+              className="reset-uploaded-file-input-icon"
+              onClick={() => resetUploadedPhoto(photo.id)}
+            />
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+}

frontend/src/components/pages/adminDashboard/products/RenderUploadedImages.scss

@@ -0,0 +1,17 @@
+.render-uploaded-images-container {
+  .product-image {
+    min-height: 50px;
+    min-width: 100px;
+  }
+
+  .reset-uploaded-file-input-icon {
+    float: right;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+  }
+
+  .reset-photo {
+    display: none;
+  }
+}