-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
belindas-closet-nextjs_4_256_buttons-functionality (#261)
* Added functionality to delete button * Added functionality to delete and archive buttons Resolves #256 As a developer, I added functionality to the delete and archive buttons along with confirmation dialogues. When products are deleted or archived from the frontend, they are hidden. They are marked as isHidden (deleted) or isSold (archived) in the database. I wanted to make the page reroute back to the category page, but the components complicates it and my attempts to incorporate router.back() caused errors. * Routes back to category page after successful deletion * Created pop up success/error messages
- Loading branch information
1 parent
7d7bfcc
commit 6b43b5d
Showing
7 changed files
with
330 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import Box from "@mui/material/Box"; | ||
| import Button from "@mui/material/Button"; | ||
| import DialogTitle from "@mui/material/DialogTitle"; | ||
| import DialogActions from "@mui/material/DialogActions"; | ||
| import Dialog from "@mui/material/Dialog"; | ||
| import React, { useState } from "react"; | ||
| import { Product } from "@/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay"; | ||
| import Snackbar from "@mui/material/Snackbar"; | ||
|
|
||
| /** | ||
| * Props for the ConfirmArchiveDialog component. | ||
| */ | ||
| interface ConfirmArchiveDialogProps { | ||
| open: boolean; | ||
| onClose: () => void; | ||
| product: Product; | ||
| } | ||
| /** | ||
| * Renders a confirmation dialog for archiving products. | ||
| * | ||
| * @param props - The component props. | ||
| * @returns The rendered ConfirmArchiveDialog component. | ||
| */ | ||
| export default function ConfirmArchiveDialog({ | ||
| open, | ||
| onClose, | ||
| product, | ||
| }: ConfirmArchiveDialogProps) { | ||
| const [snackBarMessage, setSnackBarMessage] = useState<string>(""); | ||
|
|
||
| /** | ||
| * Handles the click event when the user confirms "No" to archiving product. | ||
| * @returns {void} | ||
| */ | ||
| const handleNo = () => { | ||
| onClose(); | ||
| }; | ||
| /** | ||
| * Handles the click event when the user confirms "Yes" to archiving product. | ||
| * @returns {void} | ||
| */ | ||
| 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', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| 'Authorization': `Bearer ${token}`, | ||
| }, | ||
| body: JSON.stringify({isSold: Boolean}), | ||
| }); | ||
| if (response.ok) { | ||
| onClose(); | ||
| setSnackBarMessage("Product archived successfully!"); | ||
| setTimeout(() => { | ||
| window.history.back(); | ||
| }, 2000); | ||
| } else { | ||
| const errorMessage = await response.json(); | ||
| setSnackBarMessage(errorMessage.message); | ||
| console.error('Failed to archive product', response.statusText); | ||
| } | ||
| } catch (error) { | ||
| setSnackBarMessage("Error archiving product"); | ||
| console.error('Error archiving product:', error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Box | ||
| sx={{ | ||
| width: "100%", | ||
| maxWidth: 800, | ||
| bgcolor: "background.paper", | ||
| color: "#000", | ||
| }} | ||
| > | ||
| <Dialog | ||
| sx={{ "& .MuiDialog-paper": { width: "50%", maxHeight: 435 } }} | ||
| maxWidth="xs" | ||
| open={open} | ||
| > | ||
| <DialogTitle>Are you sure you want to archive this product?</DialogTitle> | ||
| <DialogActions> | ||
| <Button autoFocus onClick={handleNo}>No</Button> | ||
| <Button onClick={handleYes}>Yes</Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| <Snackbar | ||
| open={Boolean(snackBarMessage)} | ||
| autoHideDuration={6000} | ||
| onClose={() => setSnackBarMessage("")} | ||
| anchorOrigin={{ vertical: "bottom", horizontal: "center" }} | ||
| message={snackBarMessage} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import Box from "@mui/material/Box"; | ||
| import Button from "@mui/material/Button"; | ||
| import DialogTitle from "@mui/material/DialogTitle"; | ||
| import DialogActions from "@mui/material/DialogActions"; | ||
| import Dialog from "@mui/material/Dialog"; | ||
| 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. | ||
| */ | ||
| interface ConfirmDeleteDialogProps { | ||
| open: boolean; | ||
| onClose: () => void; | ||
| product: Product; | ||
| } | ||
| /** | ||
| * Renders a confirmation dialog for deleting products. | ||
| * | ||
| * @param props - The component props. | ||
| * @returns The rendered ConfirmDeleteDialog component. | ||
| */ | ||
| export default function ConfirmDeleteDialog({ | ||
| open, | ||
| onClose, | ||
| product, | ||
| }: ConfirmDeleteDialogProps) { | ||
| const [snackBarMessage, setSnackBarMessage] = useState<string>(""); | ||
| /** | ||
| * Handles the click event when the user confirms "No" to deleting product. | ||
| * @returns {void} | ||
| */ | ||
| const handleNo = () => { | ||
| onClose(); | ||
| }; | ||
| /** | ||
| * Handles the click event when the user confirms "Yes" to deleting product. | ||
| * @returns {void} | ||
| */ | ||
| 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', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| 'Authorization': `Bearer ${token}`, | ||
| }, | ||
| body: JSON.stringify({isHidden: Boolean}), | ||
| }); | ||
| if (response.ok) { | ||
| onClose(); | ||
| setSnackBarMessage("Product deleted successfully!"); | ||
| setTimeout(() => { | ||
| window.history.back(); | ||
| }, 2000); | ||
| } else { | ||
| const errorMessage = await response.json(); | ||
| setSnackBarMessage(errorMessage.message); | ||
| console.error('Failed to delete product', response.statusText); | ||
| } | ||
| } catch (error) { | ||
| setSnackBarMessage("Error deleting product"); | ||
| console.error('Error deleting product:', error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Box | ||
| sx={{ | ||
| width: "100%", | ||
| maxWidth: 800, | ||
| bgcolor: "background.paper", | ||
| color: "#000", | ||
| }} | ||
| > | ||
| <Dialog | ||
| sx={{ "& .MuiDialog-paper": { width: "50%", maxHeight: 435 } }} | ||
| maxWidth="xs" | ||
| open={open} | ||
| > | ||
| <DialogTitle>Are you sure you want to delete this product?</DialogTitle> | ||
| <DialogActions> | ||
| <Button autoFocus onClick={handleNo}>No</Button> | ||
| <Button onClick={handleYes}>Yes</Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| <Snackbar | ||
| open={Boolean(snackBarMessage)} | ||
| autoHideDuration={6000} | ||
| onClose={() => setSnackBarMessage("")} | ||
| anchorOrigin={{ vertical: "bottom", horizontal: "center" }} | ||
| message={snackBarMessage} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
Oops, something went wrong.