update category

app/controllers/CategoryController.js

@@ -34,6 +34,35 @@ const CategoryController = {
       }
     }
   },
+  /**
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
+  async update(req, res) {
+    try {
+      const { id, name } = req.body;
+      console.log(id, name);
+      await db.category.update({ where: { id}, data: { name } });
+      await db.$disconnect();
+      res.json({ status: 301, message: "update success" });
+    } catch (err) {
+      console.log(err);
+      res.json({ status: 300, message: "error can't update" });
+    }
+  },
+  /**
+   * 
+   * @param {Request} req 
+   * @param {Response} res 
+   */
+  async delete(req,res) {
+    try {
+      res.json({params: req.params})
+    } catch(err) {
+      res.json({status: 400, message: "server has some error"})
+    }
+  }
 };
 
 export default CategoryController;

app/routes/admin.js

@@ -7,5 +7,6 @@ const adminRouter = express.Router();
 adminRouter.get("/user", AdminUserController.index);
 adminRouter.post("/product", AdminProductController.create);
 adminRouter.post("/category", CategoryController.create);
+adminRouter.put("/category", CategoryController.update);
 
 export default adminRouter;

src/components/AddCategory.js

-import { useState, useEffect, useContext } from "react";
+import { useState, 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 {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Snackbar,
-} from "@mui/material";
+import { Snackbar } from "@mui/material";
 import axios from "axios";
 import { UserContext } from "@/pages/_app";
 
@@ -36,10 +30,10 @@ export default function AddCategory({ open, handleClose }) {
       setTimeout(() => {
         setMessage({ message: "", error: false });
       }, 3000);
-    } else if(response.data.status === 201) {
-      setName("")
-      handleClose()
-      setMessage({message: "เพิ่มหมวดหมู่สำเร็จ", error: false})
+    } else if (response.data.status === 201) {
+      setName("");
+      handleClose();
+      setMessage({ message: "เพิ่มหมวดหมู่สำเร็จ", error: false });
       setTimeout(() => {
         setMessage({ message: "", error: false });
       }, 3000);

src/components/UpdateCategory.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 { Snackbar } from "@mui/material";
+import axios from "axios";
+import { UserContext } from "@/pages/_app";
+
+export default function UpdateCategory({ open, handleClose, data }) {
+  const user = useContext(UserContext);
+  const [message, setMessage] = useState({ message: "", error: false });
+  const [name, setName] = useState(data.name);
+
+  /**
+   *
+   * @param {FormDataEvent} e
+   */
+  async function fetchAddProduct(e) {
+    e.preventDefault();
+    let response = await axios.put(
+      "/api/admin/category",
+      { id: data.id, name },
+      { headers: { token: user.value.token } }
+    );
+    console.log(response.data);
+    if (response.data.status === 301) {
+      setName("");
+      setMessage({ message: "บันทึกหมวดหมู่สำเร็จ", error: false });
+      setTimeout(() => {
+        handleClose();
+        setMessage({ message: "", error: false });
+      }, 2000);
+    } else {
+      setMessage({ message: "มีบางอย่างผิดพลาด", error: true });
+      setTimeout(() => {
+        setMessage({ message: "", error: false });
+      }, 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}
+      />
+      <Dialog open={open} onClose={handleClose}>
+        <form onSubmit={fetchAddProduct}>
+          <DialogTitle>แก้ไข</DialogTitle>
+          <DialogContent className="text-center">
+            <TextField
+              className="m-1"
+              label="ชื่อหมวดหมู่"
+              variant="standard"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button color="error" onClick={handleClose}>
+              ยกเลิก
+            </Button>
+            <Button type="submit">บันทึก</Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+}

src/pages/admin/category.js

@@ -15,16 +15,21 @@ import AddCategory from "@/components/AddCategory";
 import axios from "axios";
 import { Delete } from "@mui/icons-material";
 import { Edit } from "@mui/icons-material";
+import UpdateCategory from "@/components/UpdateCategory";
 
 export default function AdminCategory() {
   const [modal, setModal] = useState(false);
+  const [updateState, setUpdateState] = useState({
+    open: false,
+    data: { id: -1, name: "" },
+  });
   const [category, setCategory] = useState([]);
 
   useEffect(() => {
     axios.get("/api/category").then((res) => {
       setCategory(res.data);
     });
-  }, []);
+  }, [modal, updateState]);
   return (
     <Box>
       <Grid container>
@@ -52,11 +57,19 @@ export default function AdminCategory() {
                 </TableHead>
                 <TableBody>
                   {category.map((cate, idx) => (
-                    <TableRow>
+                    <TableRow key={idx}>
                       <TableCell>{cate.id}</TableCell>
                       <TableCell>{cate.name}</TableCell>
                       <TableCell sx={{ maxWidth: 10 }}>
-                        <Button color="warning">
+                        <Button
+                          color="warning"
+                          onClick={() =>
+                            setUpdateState({
+                              open: true,
+                              data: { id: cate.id, name: cate.name },
+                            })
+                          }
+                        >
                           <Edit />
                         </Button>
                       </TableCell>
@@ -74,7 +87,18 @@ export default function AdminCategory() {
         </Grid>
         <Grid item lg={3} md={0}></Grid>
       </Grid>
+      {modal && (
         <AddCategory open={modal} handleClose={() => setModal(false)} />
+      )}
+      {updateState.open && (
+        <UpdateCategory
+          open={updateState.open}
+          data={updateState.data}
+          handleClose={() =>
+            setUpdateState({ open: false, data: { id: -1, name: "" } })
+          }
+        />
+      )}
     </Box>
   );
 }