Update room, user pages and service

hotel-management/src/pages/Room/RoomRow.tsx

@@ -1,13 +1,6 @@
-import { Dispatch, SetStateAction } from 'react';
-import toast from 'react-hot-toast';
-
-// Constants
-import { ROOM_PATH } from '@constant/path';
-import { STATUS_CODE } from '@constant/responseStatus';
-import { CONFIRM_DELETE, DELETE_SUCCESS } from '@constant/messages';
+import { useCallback, useMemo } from 'react';
 
 // Helpers
-import { sendRequest } from '@helper/sendRequest';
 import { formatCurrency } from '@helper/helper';
 
 // Types
@@ -20,38 +13,47 @@ import Table from '@component/Table';
 import Menus from '@component/Menus';
 import { RiEditBoxFill } from 'react-icons/ri';
 import { HiTrash } from 'react-icons/hi';
+import ConfirmMessage from '@component/ConfirmMessage';
+
+// Hooks
+import { useDeleteRoom } from '@hook/rooms/useDeleteRoom';
+
+// Constants
+import { FORM } from '@constant/commons';
 
 interface IRoomRow {
   room: IRoom;
-  reload: boolean;
-  setReload: Dispatch<SetStateAction<boolean>>;
 }
 
-const RoomRow = ({ room, reload, setReload }: IRoomRow) => {
-  const handleDelete = async (room: IRoom) => {
-    if (confirm(CONFIRM_DELETE)) {
-      const response = await sendRequest(ROOM_PATH + `/${room.id}`, 'DELETE');
-
-      if (response.statusCode === STATUS_CODE.OK) {
-        toast.success(DELETE_SUCCESS);
-
-        // Reload table
-        setReload(!reload);
-      }
-    }
-  };
-
-  const { id, name, finalPrice, status } = room;
-
+const RoomRow = ({ room }: IRoomRow) => {
+  const { id, name, price, status } = room;
+  const { isDeleting, deleteRoom } = useDeleteRoom();
   const statusText = status 
     ? 'Unavailable' 
     : 'Available';
+  const formattedPrice = useMemo(() => formatCurrency(price), [price]);
+  const renderEditBtn = useCallback(
+    (onCloseModal: () => void) => (
+      <Menus.Button onClick={onCloseModal} icon={<RiEditBoxFill />}>
+        Edit
+      </Menus.Button>
+    ),
+    []
+  );
+  const renderDeleteBtn = useCallback(
+    (onCloseModal: () => void) => (
+      <Menus.Button icon={<HiTrash />} onClick={onCloseModal}>
+        Delete
+      </Menus.Button>
+    ),
+    []
+  );
 
   return (
     <Table.Row>
       <div>{id}</div>
       <div>{name}</div>
-      <div>{formatCurrency(finalPrice)}</div>
+      <div>{formattedPrice}</div>
       <div>{statusText}</div>
 
       <div>
@@ -61,24 +63,25 @@ const RoomRow = ({ room, reload, setReload }: IRoomRow) => {
 
             <Menus.List id={id.toString()}>
               <Modal.Open
-                modalName="edit"
-                renderChildren={(onCloseModal) => (
-                  <Menus.Button onClick={onCloseModal} icon={<RiEditBoxFill />}>
-                    Edit
-                  </Menus.Button>
-                )}
+                modalName={FORM.EDIT}
+                renderChildren={renderEditBtn}
+              />
+              <Modal.Open
+                modalName={FORM.DELETE}
+                renderChildren={renderDeleteBtn}
               />
-
-              <Menus.Button
-                icon={<HiTrash />}
-                onClick={() => handleDelete(room)}
-              >
-                Delete
-              </Menus.Button>
             </Menus.List>
 
-            <Modal.Window name="edit" title="Edit Room">
-              <RoomForm roomEdit={room} setReload={setReload} reload={reload} />
+            <Modal.Window name={FORM.EDIT} title="Edit Room">
+              <RoomForm room={room} />
+            </Modal.Window>
+
+            <Modal.Window name={FORM.DELETE} title="Delete Room">
+              <ConfirmMessage
+                disabled={isDeleting}
+                message={`Are you sure to delete ${name}?`}
+                onConfirm={() => deleteRoom(id)}
+              />
             </Modal.Window>
           </Menus.Menu>
         </Modal>