delete category with confirm alert

app/controllers/CategoryController.js

@@ -43,7 +43,7 @@ const CategoryController = {
     try {
       const { id, name } = req.body;
       console.log(id, name);
-      await db.category.update({ where: { id}, data: { name } });
+      await db.category.update({ where: { id }, data: { name } });
       await db.$disconnect();
       res.json({ status: 301, message: "update success" });
     } catch (err) {
@@ -56,13 +56,20 @@ const CategoryController = {
    * @param {Request} req
    * @param {Response} res
    */
-  async delete(req,res) {
+  async delete(req, res) {
     try {
-      res.json({params: req.params})
-    } catch(err) {
-      res.json({status: 400, message: "server has some error"})
-    }
+      const { id } = req.query;
+      if (!id) throw 400;
+      await db.category.delete({ where: { id: Number(id) } });
+      await db.$disconnect();
+      res.json({
+        status: 401, 
+        message: "delete success"
+      })
+    } catch (err) {
+      res.json({ status: 400, message: "server has some error" });
     }
+  },
 };
 
 export default CategoryController;

app/routes/admin.js

@@ -8,5 +8,6 @@ adminRouter.get("/user", AdminUserController.index);
 adminRouter.post("/product", AdminProductController.create);
 adminRouter.post("/category", CategoryController.create);
 adminRouter.put("/category", CategoryController.update);
+adminRouter.delete('/category', CategoryController.delete)
 
 export default adminRouter;

src/components/AddCategory.js → src/components/category/AddCategory.js

@@ -5,7 +5,7 @@ import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
-import { Snackbar } from "@mui/material";
+import { Alert, Snackbar } from "@mui/material";
 import axios from "axios";
 import { UserContext } from "@/pages/_app";
 
@@ -44,12 +44,12 @@ export default function AddCategory({ open, handleClose }) {
     <>
       <Snackbar
         anchorOrigin={{ horizontal: "center", vertical: "top" }}
-        ContentProps={{
-          className: message.error ? "bg-red-500" : "bg-green-500",
-        }}
        open={!!message.message.length}
-        message={message.message}
-      />
+      >
+        <Alert severity={message.error ? "error" : "success"}>
+          {message.message}
+        </Alert>
+      </Snackbar>
       <Dialog open={open} onClose={handleClose}>
         <form onSubmit={fetchAddProduct}>
           <DialogTitle>เพิ่มหมวดหมู่</DialogTitle>

src/components/category/DeleteCategory.js

+import { useState, useEffect, useContext } from "react";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import { Alert, Snackbar } from "@mui/material";
+import axios from "axios";
+import { UserContext } from "@/pages/_app";
+
+export default function DeleteCategory({ open, handleClose, id }) {
+  const user = useContext(UserContext);
+  const [message, setMessage] = useState({ message: "", error: false });
+
+  async function onDeleteCategory() {
+    try {
+      let response = await axios.delete(`/api/admin/category?id=${id}`, {
+        headers: { token: user.value.token },
+      });
+      console.log(response.data);
+      if (response.data.status === 401) {
+        setMessage({ error: false, message: "สบสำเร็จ!" });
+        setTimeout(() => {
+          handleClose()
+          setMessage({ error: false, message: "" });
+        }, 1000);
+      }
+    } catch (err) {
+      setMessage({ error: true, message: "พบข้อผิดพลาด ไม่สามารถลบได้" });
+      setTimeout(() => {
+        setMessage({ error: false, message: "" });
+      }, 3000);
+    }
+  }
+
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{ horizontal: "center", vertical: "top" }}
+        ContentProps={{
+          className: message.error ? "bg-red-500" : "bg-green-500",
+        }}
+        open={!!message.message.length}
+        message={message.message}
+      >
+        <Alert severity={message.error ? "error" : "success"}>
+          {message.message}
+        </Alert>
+      </Snackbar>
+      <Dialog open={open} onClose={handleClose}>
+          <DialogTitle>ยืนยันการลบ</DialogTitle>
+          <DialogContent className="text-center">
+            เมื่อกดลบแล้วจะไม่สามารถกู้คืนได้
+         </DialogContent>
+          <DialogActions>
+            <Button color="error" onClick={handleClose}>
+              ยกเลิก
+            </Button>
+            <Button onClick={onDeleteCategory}>ยืนยัน</Button>
+          </DialogActions>
+      </Dialog>
+    </>
+  );
+}

src/components/UpdateCategory.js → src/components/category/UpdateCategory.js

@@ -5,7 +5,7 @@ import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
-import { Snackbar } from "@mui/material";
+import { Alert, Snackbar } from "@mui/material";
 import axios from "axios";
 import { UserContext } from "@/pages/_app";
 
@@ -50,7 +50,7 @@ export default function UpdateCategory({ open, handleClose, data }) {
         }}
         open={!!message.message.length}
         message={message.message}
-      />
+      ><Alert severity={message.error ? "error" : "success"}>{message.message}</Alert></Snackbar>
       <Dialog open={open} onClose={handleClose}>
         <form onSubmit={fetchAddProduct}>
           <DialogTitle>แก้ไข</DialogTitle>

src/pages/admin/category.js

 import { Add } from "@mui/icons-material";
 import {
+  Snackbar,
   Box,
   Button,
   Grid,
@@ -9,27 +10,37 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  Alert,
 } from "@mui/material";
-import React, { useState, useEffect } from "react";
-import AddCategory from "@/components/AddCategory";
+import React, { useState, useContext, useEffect } from "react";
+import AddCategory from "@/components/category/AddCategory";
 import axios from "axios";
 import { Delete } from "@mui/icons-material";
 import { Edit } from "@mui/icons-material";
-import UpdateCategory from "@/components/UpdateCategory";
+import UpdateCategory from "@/components/category/UpdateCategory";
+import { UserContext } from "../_app";
+import DeleteCategory from "@/components/category/DeleteCategory";
 
 export default function AdminCategory() {
+  const user = useContext(UserContext);
   const [modal, setModal] = useState(false);
+  const [message, setMessage] = useState({ message: "", error: false });
+  const [deleteState, setDeleteState] = useState({
+    open: false,
+    id: -1,
+  });
   const [updateState, setUpdateState] = useState({
     open: false,
     data: { id: -1, name: "" },
   });
   const [category, setCategory] = useState([]);
 
-  useEffect(() => {
+  const fetchCategory = () => {
     axios.get("/api/category").then((res) => {
       setCategory(res.data);
     });
-  }, [modal, updateState]);
+  };
+ useEffect(fetchCategory, [modal, updateState, message, deleteState]);
   return (
     <Box>
       <Grid container>
@@ -74,7 +85,10 @@ export default function AdminCategory() {
                         </Button>
                       </TableCell>
                       <TableCell sx={{ maxWidth: 10 }}>
-                        <Button color="error">
+                        <Button
+                          color="error"
+                          onClick={() => setDeleteState({open: true, id: cate.id})}
+                        >
                           <Delete />
                         </Button>
                       </TableCell>
@@ -87,9 +101,15 @@ export default function AdminCategory() {
         </Grid>
         <Grid item lg={3} md={0}></Grid>
       </Grid>
-      {modal && (
-        <AddCategory open={modal} handleClose={() => setModal(false)} />
+
+      {deleteState.open && (
+        <DeleteCategory
+          open={deleteState.open}
+          handleClose={() => setDeleteState({ open: false, id: -1 })}
+          id={deleteState.id}
+        />
       )}
+      <AddCategory open={modal} handleClose={() => setModal(false)} />
       {updateState.open && (
         <UpdateCategory
           open={updateState.open}