From d543558a016ebe89512158285e6c187f05667db0 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 8 Dec 2023 17:16:13 +0700
Subject: [PATCH] Update table component

---
 .../src/components/Table/index.tsx            | 13 +++++++
 .../src/components/Table/styled.ts            |  4 +++
 hotel-management/src/contexts/ItemSelected.ts | 35 +++++++++++++++++++
 hotel-management/src/hooks/useItemSelected.ts | 22 ++++++++++++
 .../src/pages/Booking/BookingTable.tsx        | 16 ++++++---
 hotel-management/src/pages/Booking/index.tsx  | 32 +++++++++--------
 hotel-management/src/types/common.ts          |  1 +
 7 files changed, 103 insertions(+), 20 deletions(-)
 create mode 100644 hotel-management/src/contexts/ItemSelected.ts
 create mode 100644 hotel-management/src/hooks/useItemSelected.ts

diff --git a/hotel-management/src/components/Table/index.tsx b/hotel-management/src/components/Table/index.tsx
index 004f73b..a5108d2 100644
--- a/hotel-management/src/components/Table/index.tsx
+++ b/hotel-management/src/components/Table/index.tsx
@@ -7,6 +7,7 @@ import {
   StyledTable,
 } from './styled';
 import Pagination from '../Pagination';
+import { TbArrowNarrowRight } from 'react-icons/tb';
 
 const parseWidthString = (columnsWidth: number[]): string => {
   let result: string = '';
@@ -46,6 +47,18 @@ const Table = <T,>({ rows, columns, count }: Props<T>) => {
         {columns.map((column, columnIndex) => {
           const value = row[column.key as keyof typeof row] as string;
 
+          if (column.isDateValue) {
+            return (
+              <div
+                style={{ display: 'flex', alignItems: 'center' }}
+                key={`cell-${columnIndex}`}
+              >
+                {value[0]} &nbsp; <TbArrowNarrowRight />
+                &nbsp; {value[1]}
+              </div>
+            );
+          }
+
           return <div key={`cell-${columnIndex}`}>{value}</div>;
         })}
       </StyledRow>
diff --git a/hotel-management/src/components/Table/styled.ts b/hotel-management/src/components/Table/styled.ts
index c0105a5..dbf0406 100644
--- a/hotel-management/src/components/Table/styled.ts
+++ b/hotel-management/src/components/Table/styled.ts
@@ -26,6 +26,10 @@ const StyledBody = styled.div`
 const StyledRow = styled(CommonRow)`
   padding: 20px;
 
+  &.active {
+    background-color: red;
+  }
+
   &:not(:last-child) {
     border-bottom: 1px solid var(--border-color);
   }
diff --git a/hotel-management/src/contexts/ItemSelected.ts b/hotel-management/src/contexts/ItemSelected.ts
new file mode 100644
index 0000000..0832895
--- /dev/null
+++ b/hotel-management/src/contexts/ItemSelected.ts
@@ -0,0 +1,35 @@
+import { Dispatch, createContext } from 'react';
+
+export type TItemSelectAction = 'setData' | 'removeData';
+
+interface IAction<T> {
+  type: TItemSelectAction;
+  payload: T;
+}
+
+interface IItemSelect {
+  data?: any;
+  dispatch?: Dispatch<IAction<unknown>>;
+}
+
+const ItemSelectContext = createContext<IItemSelect>({});
+
+const itemSelectReducer =
+  <T>() =>
+  (state: T, action: IAction<T>) => {
+    switch (action.type) {
+      // Init data for the first load
+      case 'setData': {
+        const tempData = { ...state };
+
+        return {
+          data: tempData,
+        };
+      }
+
+      default:
+        throw new Error('Action unknown');
+    }
+  };
+
+export { itemSelectReducer, ItemSelectContext };
diff --git a/hotel-management/src/hooks/useItemSelected.ts b/hotel-management/src/hooks/useItemSelected.ts
new file mode 100644
index 0000000..a2fe3e5
--- /dev/null
+++ b/hotel-management/src/hooks/useItemSelected.ts
@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+
+// Contexts
+import { ItemSelectContext } from '@src/contexts/ItemSelected';
+
+/**
+ * The hooks check the place call is in UserRoomAvailableProvider or not
+ * @returns The context of UserRoomAvailableContext
+ */
+const useItemSelect = () => {
+  const context = useContext(ItemSelectContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'ItemSelectContext was used outside of ItemSelectContextProvider'
+    );
+  }
+
+  return context;
+};
+
+export { useItemSelect };
diff --git a/hotel-management/src/pages/Booking/BookingTable.tsx b/hotel-management/src/pages/Booking/BookingTable.tsx
index da3677c..7521e49 100644
--- a/hotel-management/src/pages/Booking/BookingTable.tsx
+++ b/hotel-management/src/pages/Booking/BookingTable.tsx
@@ -14,10 +14,11 @@ import { useBookings } from '@src/hooks/bookings/useBookings';
 // Types
 import { ColumnProps } from '@src/types/common';
 import { formatCurrency } from '@src/helpers/helper';
+import { useItemSelect } from '@src/hooks/useItemSelected';
 
 interface IBookingTable {
   user: string;
-  date: string;
+  date: string[];
   room: string;
   amount: string;
   status: string;
@@ -25,16 +26,19 @@ interface IBookingTable {
 }
 
 const BookingTable = () => {
+  const { dispatch } = useItemSelect();
+
   const columns: ColumnProps[] = [
     {
       key: 'user',
       title: 'User',
-      width: 15,
+      width: 10,
     },
     {
       key: 'date',
       title: 'Date',
       width: 25,
+      isDateValue: true,
     },
     {
       key: 'room',
@@ -49,19 +53,21 @@ const BookingTable = () => {
     {
       key: 'status',
       title: 'Status',
-      width: 15,
+      width: 20,
     },
   ];
 
   const { isLoading, bookings, count } = useBookings();
 
   const tempBookings = bookings?.map((booking) => ({
-    date: 'Error',
+    date: [booking.startDate, booking.endDate],
     amount: formatCurrency(booking.amount),
     room: booking.rooms!.name,
     user: booking.users!.name,
     status: booking.status ? 'Check in' : 'Check out',
-    onClick: () => console.log(booking),
+    onClick: () => {
+      dispatch!({type: 'setData', payload: booking})
+    },
   }));
 
   return (  
diff --git a/hotel-management/src/pages/Booking/index.tsx b/hotel-management/src/pages/Booking/index.tsx
index c5c75ac..57f78b6 100644
--- a/hotel-management/src/pages/Booking/index.tsx
+++ b/hotel-management/src/pages/Booking/index.tsx
@@ -17,21 +17,23 @@ const Booking = () => {
       <Direction type="horizontal">
         <Title>List Booking</Title>
 
-        <Modal>
-          <Modal.Open
-            modalName={FORM.BOOKING}
-            renderChildren={(onCloseModal) => (
-              <Button onClick={onCloseModal}>Add booking</Button>
-            )}
-          />
-          <Modal.Window
-            name={FORM.BOOKING}
-            title="Add form"
-            renderChildren={(onCloseModal) => (
-              <BookingForm onCloseModal={onCloseModal} />
-            )}
-          />
-        </Modal>
+        <div style={{ display: 'flex', gap: '15px' }}>
+          <Modal>
+            <Modal.Open
+              modalName={FORM.BOOKING}
+              renderChildren={(onCloseModal) => (
+                <Button onClick={onCloseModal}>Add booking</Button>
+              )}
+            />
+            <Modal.Window
+              name={FORM.BOOKING}
+              title="Add form"
+              renderChildren={(onCloseModal) => (
+                <BookingForm onCloseModal={onCloseModal} />
+              )}
+            />
+          </Modal>
+        </div>
       </Direction>
 
       <BookingTable />
diff --git a/hotel-management/src/types/common.ts b/hotel-management/src/types/common.ts
index e9116e5..440884b 100644
--- a/hotel-management/src/types/common.ts
+++ b/hotel-management/src/types/common.ts
@@ -16,6 +16,7 @@ interface ColumnProps {
   key: string;
   title: string;
   width: number;
+  isDateValue?: boolean;
 }
 
 type TDirection = 'vertical' | 'horizontal';