belindas-closet-nextjs_4_249_add-delete-and-archive-buttons-to-produc…

…t-card (#264)

* WIP delete fucntionality on the product card

* got delete functionality mostly done

* implemented the delete and archive functionality to the delete and archive buttons for product cards

* adjusted other files that should avoid file conflicts

app/category-page/[categoryId]/page.tsx

@@ -91,7 +91,10 @@ const ViewProduct = ({ categoryId }: { categoryId: string }) => {
                 sizePantsWaist={product.productSizePantsWaist}
                 sizePantsInseam={product.productSizePantsInseam}
                 description={product.productDescription}
-                href={`/category-page/${categoryId}/products/${product._id}`} // Construct the URL
+                href={`/category-page/${categoryId}/products/${product._id}`} // Construct the URL            
+                _id={product._id} 
+                isHidden={false} 
+                isSold={false}              
               />
             </Grid>
           ))}
@@ -113,4 +116,4 @@ export default function ProductList({
       <ViewProduct categoryId={decodedCategoryId} />
     </Container>
   );
-}
+}

components/ProductCard.tsx

@@ -19,6 +19,9 @@ type ProductCardProps = {
   size: string;
   description: string;
   href: string;
+  _id: string;
+  isHidden: boolean;
+  isSold: boolean;
 };
 export default function ProductCard({
   image,
@@ -30,17 +33,62 @@ export default function ProductCard({
   sizePantsInseam,
   description,
   href,
+  _id,
 }: ProductCardProps) {
   const [userRole, setUserRole] = React.useState("");
 
-  // Get user role from token
+  const token = localStorage.getItem("token"); // get token from local storage
   React.useEffect(() => {
-    const token = localStorage.getItem("token");
     if (token) {
       const role = JSON.parse(atob(token.split(".")[1])).role;
       setUserRole(role);
     }
-  }, []);
+    // testing what role is returned via console log -- delete later
+    console.log(userRole);
+  }
+  , [token, userRole]);
+
+    // delete product function -----------------------------------
+    const handleDelete = async () => {
+      try {
+        const response = await fetch(`http://localhost:3000/api/products/remove/${_id}`, {
+          // delete API uses DELETE method
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}` // pass token to the server
+          },
+
+        });
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
+        console.log(`Successful delete the product with id: ${_id}`)
+      } catch (error) {
+        console.error("Error deleting product:", error);
+      }
+      window.location.reload();
+    };
+
+  // archive product function -----------------------------------------
+  const handleArchive = async () => {
+    try {
+      const response = await fetch(`http://localhost:3000/api/products/archive/${_id}`, {
+        // archive API uses PUT method
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+           Authorization: `Bearer ${token}` // pass token to the server
+        },
+      });
+      console.log("Product archived successfully!");
+    } catch (error) {
+      console.error("Error archiving product:", error);
+    }
+    window.location.reload();
+  };
+
+
   return (
     <Paper
       sx={{
@@ -96,20 +144,24 @@ export default function ProductCard({
         <Button variant="contained" href={href} color="primary">
           View
         </Button>
-        {userRole === "admin" ||
-          (userRole === "creator" && (
-            <Stack direction="row" spacing={2}>
-              {/* TODO: Add delete function to this button  */}
-              <Button variant="contained" startIcon={<DeleteIcon />} color="error">
-                Delete
-              </Button>
-              {/* TODO: Add archive function to this button  */}
-              <Button variant="contained" startIcon={<ArchiveIcon />} color="warning">
-                Archive
-              </Button>
-            </Stack>
-          ))}
+
+        {userRole === "admin" || userRole === "creator" ? 
+            (
+              <Stack direction="row" spacing={2}>
+                {/* TODO: Add delete function to this button  */}
+                <Button variant="contained" startIcon={<DeleteIcon />} color="error" onClick={() => handleDelete()}>
+                  Delete
+                </Button>
+                {/* TODO: Add archive function to this button  */}
+                <Button variant="contained" startIcon={<ArchiveIcon />} color="warning" onClick={() => handleArchive()}>
+                  Archive
+                </Button>
+              </Stack>
+            ) 
+            : null
+          }
+
       </Stack>
     </Paper>
   );
-}
+}