selling's page is now complete

frontend/src/pages/Selling.jsx

@@ -93,6 +93,24 @@ const Selling = () => {
     fetchProducts();
   }, []); // Add userId to dependency array if it might change
 
+  // When editing a product, save the original product properly
+const handleEditProduct = (product) => {
+  // Save the original product completely
+  setOriginalProduct(product);
+
+  // Convert category ID to category name if needed
+  const categoryName = getCategoryNameById(product.CategoryID);
+
+  setEditingProduct({
+    ...product,
+    categories: categoryName ? [categoryName] : [],
+    images: product.images || [], // Ensure images array exists
+  });
+
+  setShowForm(true);
+};
+
+// Then update the handleSaveProduct function to properly merge values
 const handleSaveProduct = async () => {
   if (!(editingProduct.categories || []).length) {
     alert("Please select at least one category");
@@ -102,31 +120,37 @@ const Selling = () => {
   try {
     const imagePaths = [];
 
+    // Handle images properly
     if (editingProduct.images && editingProduct.images.length > 0) {
-        editingProduct.images.forEach((file) => {
+      // If there are new images uploaded (File objects)
+      const newImages = editingProduct.images.filter(img => img instanceof File);
+      newImages.forEach((file) => {
         const simulatedPath = `/public/uploads/${file.name}`;
         imagePaths.push(simulatedPath);
       });
-      } else if (originalProduct?.images?.length > 0) {
+      
-        imagePaths.push(...originalProduct.images);
+      // Also include any existing image URLs that are strings, not File objects
+      const existingImages = editingProduct.images.filter(img => typeof img === 'string');
+      if (existingImages.length > 0) {
+        imagePaths.push(...existingImages);
+      }
+    } else if (originalProduct?.image_url) {
+      // If no new images but there was an original image URL
+      imagePaths.push(originalProduct.image_url);
     }
 
     const categoryName = (editingProduct.categories || [])[0];
-      const categoryID =
+    const categoryID = categoryMapping[categoryName] || originalProduct?.CategoryID || 1;
-        categoryMapping[categoryName] || originalProduct?.category || 1;
 
+    // Create payload with proper fallback to original values
     const payload = {
-        name: editingProduct.name || originalProduct?.name || "",
+      name: editingProduct.Name || editingProduct.name || originalProduct?.Name || "",
-        price:
+      price: parseFloat(editingProduct.Price || editingProduct.price || originalProduct?.Price || 0),
-          parseFloat(editingProduct.price) ||
-          parseFloat(originalProduct?.price) ||
-          0,
       qty: 1,
       userID: storedUser.ID,
-        description:
+      description: editingProduct.Description || editingProduct.description || originalProduct?.Description || "",
-          editingProduct.description || originalProduct?.description || "",
       category: categoryID,
-        images: imagePaths,
+      images: imagePaths.length > 0 ? imagePaths : (originalProduct?.image_url ? [originalProduct.image_url] : []),
     };
 
     console.log("Sending payload:", payload);
@@ -148,9 +172,7 @@ const Selling = () => {
     if (!response.ok) {
       const errorData = await response.text();
       throw new Error(
-          `${
+        `${editingProduct.ProductID ? "Failed to update" : "Failed to add"} product: ${errorData}`
-            editingProduct.ProductID ? "Failed to update" : "Failed to add"
-          } product: ${errorData}`,
       );
     }
 
@@ -205,20 +227,6 @@ const Selling = () => {
     }
   };
 
-  // Handle editing a product
-  const handleEditProduct = (product) => {
-    // Convert category ID to category name if needed
-    const categoryName = getCategoryNameById(product.CategoryID);
-
-    setEditingProduct({
-      ...product,
-      categories: categoryName ? [categoryName] : [],
-      images: product.images || [], // Ensure images array exists
-    });
-
-    setShowForm(true);
-  };
-
   // Helper function to get category name from ID
   const getCategoryNameById = (categoryId) => {
     if (!categoryId || !categoryMapping) return null;