finish delete user by admin

app/controllers/AdminUserController.js

@@ -11,6 +11,27 @@ const AdminUserController = {
     db.$disconnect();
     res.json(userAll);
   },
+  /**
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
+  async delete(req, res) {
+    try {
+      const { id } = req.query;
+      if (!id) throw 400;
+      await db.user.delete({ where: { id: Number(id) } });
+      res.json({
+        status: 401,
+        message: "delete success",
+      });
+    } catch (err) {
+      res.json({
+        status: 400,
+        message: "delete failed with some error on server",
+      });
+    }
+  },
 };
 
 export default AdminUserController;

app/routes/admin.js

@@ -5,6 +5,8 @@ import CategoryController from "../controllers/CategoryController";
 const adminRouter = express.Router();
 
 adminRouter.get("/user", AdminUserController.index);
+adminRouter.delete("/user", AdminUserController.delete);
+
 adminRouter.post("/product", AdminProductController.create);
 adminRouter.put("/product", AdminProductController.update);
 adminRouter.delete("/product", AdminProductController.delete);

src/components/member/DeleteMember.js

+import { useState, useContext } from "react";
+import Button from "@mui/material/Button";
+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 DeleteMember({ open, handleClose, id }) {
+  const user = useContext(UserContext);
+  const [message, setMessage] = useState({ message: "", error: false });
+
+  async function onDeleteMember() {
+    try {
+      let response = await axios.delete(`/api/admin/user?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={onDeleteMember}>ยืนยัน</Button>
+          </DialogActions>
+      </Dialog>
+    </>
+  );
+}

src/pages/admin/member.js

 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "../_app";
+import Head from "next/head";
 import axios from "axios";
+import {
+  Button,
+  Paper,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import DeleteMember from "@/components/member/DeleteMember";
 
 export default function Member() {
   const user = useContext(UserContext);
   const [userAll, setUserAll] = useState([]);
+  const [deleteState, setDeleteState] = useState({ open: false, id: -1 });
 
   async function fetchApi() {
     try {
@@ -17,15 +30,73 @@ export default function Member() {
   }
   useEffect(() => {
     fetchApi();
-  }, []);
+  }, [deleteState]);
   return (
     <div>
-      {userAll.map((usr, idx) => (
-        <div key={idx}>
-          {usr.name}@{usr.username} {usr.email}
-        </div>
+      <Head>
+        <title>รายชื่อสมาชิก | admin</title>
+      </Head>
+      <Paper sx={{ p: 2 }}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              {[
+                "id",
+                "รูป",
+                "ชื่อ",
+                "username",
+                "เบอร์โทร",
+                "อีเมล",
+                "rank",
+                "ลบ",
+              ].map((label, idx) => (
+                <TableCell sx={{ textAlign: "center" }} key={idx}>
+                  {label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {userAll.map((user, idx) => (
+              <TableRow key={idx}>
+                <TableCell>{user.id}</TableCell>
+                <TableCell>
+                  <img
+                    width={70}
+                    src={user?.photo?.length ? user.photo : "/empty.jpg"}
+                    alt="profile"
+                  />
+                </TableCell>
+                <TableCell>{user.name}</TableCell>
+                <TableCell>@{user.username}</TableCell>
+                <TableCell>{user.phone}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell sx={{ textAlign: "center" }}>
+                  <Switch
+                    checked={!!user.rank}
+                    onChange={() => alert("change rank")}
+                  />
+                </TableCell>
+                <TableCell sx={{ textAlign: "center" }}>
+                  <Button
+                    onClick={() => setDeleteState({ open: true, id: user.id })}
+                    color="error"
+                  >
+                    ลบ
+                  </Button>
+                </TableCell>
+              </TableRow>
             ))}
-      <button onClick={fetchApi}>submit</button>
+          </TableBody>
+        </Table>
+      </Paper>
+      {deleteState.open && (
+        <DeleteMember
+          open={deleteState.open}
+          handleClose={() => setDeleteState({ open: false, id: -1 })}
+          id={deleteState.id}
+        />
+      )}
     </div>
   );
 }