belindas-closet-nextjs_4_265_edit-functionality-button-visibility (#272)

* Added edit functionality and button visibility only to admins and creators * Updated product input fields for consistency It was causing issues * Updated Input and InputSelect for flexible styling
SeattleColleges · Mar 18, 2024 · 7d9c288 · 7d9c288
1 parent 20f4c00
commit 7d9c288
Show file tree

Hide file tree

Showing 8 changed files with 286 additions and 32 deletions.
diff --git a/app/category-page/[categoryId]/page.tsx b/app/category-page/[categoryId]/page.tsx
@@ -11,7 +11,7 @@ interface Product {
   productType: string[];
   productGender: string;
   productSizeShoe: string;
-  productSize: string;
+  productSizes: string;
   productSizePantsWaist: string;
   productSizePantsInseam: string;
   productDescription: string;
@@ -87,7 +87,7 @@ const ViewProduct = ({ categoryId }: { categoryId: string }) => {
                 categories={product.productType}
                 gender={product.productGender}
                 sizeShoe={product.productSizeShoe}
-                size={product.productSize}
+                size={product.productSizes}
                 sizePantsWaist={product.productSizePantsWaist}
                 sizePantsInseam={product.productSizePantsInseam}
                 description={product.productDescription}

diff --git a/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx b/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx
@@ -14,13 +14,14 @@ import EditIcon from "@mui/icons-material/Edit";
 import ArchiveIcon from "@mui/icons-material/Archive";
 import ConfirmDeleteDialog from "@/components/ConfirmDeleteDialog";
 import ConfirmArchiveDialog from "@/components/ConfirmArchiveDialog";
+import EditProductDialog from "@/components/EditProductDialog";
 
 export interface Product {
   _id: string;
   productType: string[];
   productGender: string[];
-  productShoeSize: string[];
-  productSize: string[];
+  productSizeShoe: string[];
+  productSizes: string[];
   productSizePantsWaist: string[];
   productSizePantsInseam: string[];
   productDescription: string;
@@ -29,8 +30,24 @@ export interface Product {
   isSold: boolean;
 }
 
-const ProductDetailDisplay = ({ product }: { product: Product }) => {
+const ProductDetailDisplay = ({ product }: { product: Product | null }) => {
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+  const [openArchiveDialog, setOpenArchiveDialog] = useState(false);
+  const [openEditDialog, setOpenEditDialog] = useState(false);
+  const [userRole, setUserRole] = React.useState("");
+
+  // Get user role from token
+  React.useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      const role = JSON.parse(atob(token.split(".")[1])).role;
+      setUserRole(role);
+    }
+  }, []);
+
+  if (!product) {
+    return <div>Loading...</div>;
+  }
 
   const handleDeleteButtonClick = () => {
     setOpenDeleteDialog(true);
@@ -40,8 +57,6 @@ const ProductDetailDisplay = ({ product }: { product: Product }) => {
     setOpenDeleteDialog(false);
   };
 
-  const [openArchiveDialog, setOpenArchiveDialog] = useState(false);
-
   const handleArchiveButtonClick = () => {
     setOpenArchiveDialog(true);
   };
@@ -50,6 +65,14 @@ const ProductDetailDisplay = ({ product }: { product: Product }) => {
     setOpenArchiveDialog(false);
   };
 
+  const handleEditButtonClick = () => {
+    setOpenEditDialog(true);
+  };
+
+  const handleCloseEditDialog = () => {
+    setOpenEditDialog(false);
+  };
+
   return (
     <Container
       fixed
@@ -92,10 +115,10 @@ const ProductDetailDisplay = ({ product }: { product: Product }) => {
                     Product Gender: {product.productGender}
                   </Typography>
                   <Typography variant="h6">
-                    Product Shoe Size: {product.productShoeSize || "N/A"}
+                    Product Shoe Size: {product.productSizeShoe || "N/A"}
                   </Typography>
                   <Typography variant="h6">
-                    Product Size: {product.productSize || "N/A"}
+                    Product Size: {product.productSizes || "N/A"}
                   </Typography>
                   <Typography variant="h6">
                     Product Size Pants Waist:{" "}
@@ -122,13 +145,15 @@ const ProductDetailDisplay = ({ product }: { product: Product }) => {
             )}
           </Box>
 
+          {userRole === "admin" || userRole === "creator" ? (
           <Stack direction="row" spacing={2} justifyContent="center">
             {/* Edit Button */}
             <Box p={2} display="flex" justifyContent="center">
               <Button
                 variant="contained"
                 color="primary"
                 startIcon={<EditIcon />}
+                onClick={handleEditButtonClick}
               >
                 Edit
               </Button>
@@ -156,6 +181,13 @@ const ProductDetailDisplay = ({ product }: { product: Product }) => {
               </Button>
             </Box>
           </Stack>
+           ) : null}
+
+            <EditProductDialog
+              open={openEditDialog}
+              onClose={handleCloseEditDialog}
+              product={product}
+            />
             <ConfirmDeleteDialog
               open={openDeleteDialog}
               onClose={handleCloseDeleteDialog}

diff --git a/app/category-page/[categoryId]/products/[productId]/page.tsx b/app/category-page/[categoryId]/products/[productId]/page.tsx
@@ -11,8 +11,8 @@ interface Product {
   _id: string;
   productType: string[];
   productGender: string[];
-  productShoeSize: string[];
-  productSize: string[];
+  productSizeShoe: string[];
+  productSizes: string[];
   productSizePantsWaist: string[];
   productSizePantsInseam: string[];
   productDescription: string;

diff --git a/components/ConfirmArchiveDialog.tsx b/components/ConfirmArchiveDialog.tsx
@@ -42,7 +42,6 @@ export default function ConfirmArchiveDialog({
     const handleYes = async () => {
         // TODO: Confirm Yes to archive product
         const token = localStorage.getItem('token');
-        console.log('Token:', token);
         try {
             const response = await fetch(`http://localhost:3000/api/products/archive/${product._id}`, {
                 method: 'PUT',

diff --git a/components/ConfirmDeleteDialog.tsx b/components/ConfirmDeleteDialog.tsx
@@ -7,21 +7,6 @@ import React, { useState } from "react";
 import { Product } from "@/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay";
 import Snackbar, { SnackbarOrigin } from "@mui/material/Snackbar";
 
-interface State extends SnackbarOrigin {
-    open: boolean;
-  }
-
-interface DeleteSuccessResponse {
-    status: "delete_success";
-    message: string;
-    token?: string;
-  }
-
-interface DeleteErrorResponse {
-    status: "delete_error";
-    message: string;
-  }
-
 /**
  * Props for the ConfirmDeleteDialog component.
  */
@@ -56,7 +41,6 @@ export default function ConfirmDeleteDialog({
     const handleYes = async () => {
         // TODO: Confirm Yes to delete product
         const token = localStorage.getItem('token');
-        console.log('Token:', token);
         try {
             const response = await fetch(`http://localhost:3000/api/products/remove/${product._id}`, {
                 method: 'DELETE',