Implement edit, delete user

hotel-management/src/pages/User/Table.tsx

@@ -17,12 +17,47 @@ import { useFetch } from '../../hooks/useFetch';
 
 // Styled
 import Spinner from '../../commons/styles/Spinner';
+import { sendRequest } from '../../helpers/sendRequest';
+import { USER_PATH } from '../../constants/path';
+import toast from 'react-hot-toast';
+import { STATUS_CODE } from '../../constants/statusCode';
+import { CONFIRM_DELETE, DELETE_SUCCESS } from '../../constants/messages';
 
-type TUserModal = { user: TUser };
+interface IUserRow {
+  user: TUser;
+  openFormDialog: () => void;
+  setUser: React.Dispatch<React.SetStateAction<TUser | null>>;
+  reload: boolean;
+  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+}
 
-const UserRow = ({ user }: TUserModal) => {
-  const handleOnClick = (id: string) => {
-    alert(`Id: ${id}`);
+const UserRow = ({
+  user,
+  openFormDialog,
+  setUser,
+  reload,
+  setReload,
+}: IUserRow) => {
+  const handleOnEdit = (user: TUser) => {
+    setUser(user);
+    openFormDialog();
+  };
+
+  const handleOnDelete = async (user: TUser) => {
+    if (confirm(CONFIRM_DELETE)) {
+      const response = await sendRequest(
+        USER_PATH + `/${user.id}`,
+        null,
+        'DELETE',
+      );
+
+      if (response.statusCode === STATUS_CODE.OK) {
+        toast.success(DELETE_SUCCESS);
+
+        // Reload table
+        setReload(!reload);
+      }
+    }
   };
 
   const { id, name, identifiedCode, phone, roomId } = user;
@@ -41,11 +76,11 @@ const UserRow = ({ user }: TUserModal) => {
         <Menus.List id={id}>
           <Menus.Button
             icon={<HiSquare2Stack />}
-            onClick={() => handleOnClick(id)}
+            onClick={() => handleOnEdit(user)}
           >
             Edit
           </Menus.Button>
-          <Menus.Button icon={<HiTrash />} onClick={() => handleOnClick(id)}>
+          <Menus.Button icon={<HiTrash />} onClick={() => handleOnDelete(user)}>
             Delete
           </Menus.Button>
         </Menus.List>
@@ -56,9 +91,17 @@ const UserRow = ({ user }: TUserModal) => {
 
 interface IUserTable {
   reload: boolean;
+  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+  openFormDialog: () => void;
+  setUser?: React.Dispatch<React.SetStateAction<TUser | null>>;
 }
 
-const UserTable = ({ reload }: IUserTable) => {
+const UserTable = ({
+  reload,
+  setReload,
+  openFormDialog,
+  setUser,
+}: IUserTable) => {
   const { data, isPending, errorMsg } = useFetch('users', reload);
   const [users, setUsers] = useState<TUser[]>([]);
 
@@ -94,7 +137,16 @@ const UserTable = ({ reload }: IUserTable) => {
               </Table.Header>
               <Table.Body<TUser>
                 data={users}
-                render={(user: TUser) => <UserRow user={user} key={user.id} />}
+                render={(user: TUser) => (
+                  <UserRow
+                    user={user}
+                    key={user.id}
+                    reload={reload}
+                    setReload={setReload}
+                    openFormDialog={openFormDialog}
+                    setUser={setUser!}
+                  />
+                )}
               />
             </Table>
           </Menus>