Merge branch 'react-practice-02' into feat/update-components-ui

hotel-management/src/App.tsx

@@ -18,7 +18,9 @@ import {
   initialState,
   reducer,
 } from '@context/UserRoomAvailableContext';
-import { useEffect, useReducer } from 'react';
+import { useEffect, useMemo, useReducer } from 'react';
+
+// Services
 import { getUserNotBooked } from '@service/userServices';
 import { getRoomsAvailable } from '@service/roomServices';
 
@@ -55,16 +57,21 @@ function App() {
     load();
   }, []);
 
+  const store = useMemo(() => {
+    return { roomsAvailable, usersAvailable, dispatch };
+  }, [roomsAvailable, usersAvailable]);
+
   return (
     <QueryClientProvider client={queryClient}>
       <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-        <UserRoomAvailableContext.Provider
+        <UserRoomAvailableContext.Provider value={store}>
-          value={{ roomsAvailable, usersAvailable, dispatch }}
-        >
           <BrowserRouter>
             <Routes>
               <Route element={<AppLayout />}>
-                <Route index element={<Navigate replace to={PATH.DASHBOARD} />} />
+                <Route
+                  index
+                  element={<Navigate replace to={PATH.DASHBOARD} />}
+                />
                 <Route path={PATH.DASHBOARD} element={<Dashboard />} />
                 <Route path={PATH.USER} element={<User />} />
                 <Route path={PATH.ROOM} element={<Room />} />

hotel-management/src/commons/styles/Button.ts

@@ -16,10 +16,10 @@ const variations: IVariations = {
     background-color: var(--danger-btn-color);
     color: var(--light-text);
   `,
-};
+} as const;
 
 interface IButtonStyle {
-  variations?: keyof IVariations;
+  variations?: keyof typeof variations;
 }
 
 const Button = styled.button<IButtonStyle>`

hotel-management/src/components/ConfirmMessage/index.tsx

@@ -15,7 +15,6 @@ interface IConfirmMessage {
 
 const ConfirmMessage = memo(
   ({ message, disabled, onConfirm, onCloseModal }: IConfirmMessage) => {
-
     return (
       <StyledConfirmDelete>
         <p>{message}</p>

hotel-management/src/components/ConfirmMessage/styled.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const StyledConfirmDelete = styled.div`
   width: 450px;

hotel-management/src/constants/commons.ts

@@ -43,20 +43,6 @@ const ROOM_PAGE = {
   ],
 };
 
-const INIT_VALUE_USER_FORM = {
-  name: '',
-  id: 0,
-  identifiedCode: '',
-  phone: '',
-};
-
-const INIT_VALUE_ROOM_FORM = {
-  name: '',
-  id: 0,
-  price: 0,
-  discount: 0,
-};
-
 const FORM = {
   EDIT: 'edit',
   DELETE: 'delete',
@@ -76,6 +62,4 @@ export {
   FORM,
   REGEX,
   ORDERBY_OPTIONS,
-  INIT_VALUE_USER_FORM,
-  INIT_VALUE_ROOM_FORM,
 };

hotel-management/src/constants/path.ts

@@ -2,5 +2,3 @@ export const DASHBOARD = '/dashboard';
 export const USER = '/user';
 export const ROOM = '/room';
 export const OTHER_PATH = '*';
-export const USER_PATH = 'users';
-export const ROOM_PATH = 'rooms';

hotel-management/src/contexts/UserRoomAvailableContext.ts

@@ -36,16 +36,19 @@ const initialState: IUserRoomState = {
 
 const reducer = (state: IUserRoomState, action: IAction) => {
   switch (action.type) {
+
     case 'initRoom':
       return {
         ...state,
         roomsAvailable: action.payload,
       };
+
     case 'initUser':
       return {
         ...state,
         usersAvailable: action.payload,
       };
+
     case 'addUser': {
       const tempArr = state.usersAvailable;
       const itemExist = state.usersAvailable.find(
@@ -61,6 +64,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         usersAvailable: tempArr,
       };
     }
+
     case 'updateUserName': {
       const tempArr = state.usersAvailable;
 
@@ -77,6 +81,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         usersAvailable: tempArr,
       };
     }
+
     case 'removeUser':
       return {
         ...state,
@@ -84,6 +89,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
           (item) => item.id !== action.payload[0].id
         ),
       };
+
     case 'addRoom': {
       const tempArr = state.roomsAvailable;
       const itemExist = state.roomsAvailable.find(
@@ -99,6 +105,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         roomsAvailable: tempArr,
       };
     }
+
     case 'updateRoomName': {
       const tempArr = state.roomsAvailable;
 
@@ -115,6 +122,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         roomsAvailable: tempArr,
       };
     }
+
     case 'removeRoom':
       return {
         ...state,
@@ -122,6 +130,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
           (item) => item.id !== action.payload[0].id
         ),
       };
+      
     default:
       throw new Error('Action unknown');
   }

hotel-management/src/hooks/rooms/useCreateRoom.ts

@@ -6,6 +6,8 @@ import { createRoom as createRoomFn } from '@service/roomServices';
 
 // Constants
 import { ADD_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/rooms/useRooms.ts

@@ -1,9 +1,9 @@
-import toast from "react-hot-toast";
+import toast from 'react-hot-toast';
-import { useQuery } from "@tanstack/react-query";
+import { useQuery } from '@tanstack/react-query';
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from 'react-router-dom';
 
 // Services
-import { getAllRooms } from "@service/roomServices";
+import { getAllRooms } from '@service/roomServices';
 
 /**
  * Fetch room from database
@@ -13,7 +13,7 @@ const useRooms = () => {
   const [searchParams] = useSearchParams();
   const sortByValue = searchParams.get('sortBy') || 'id';
   const orderByValue = searchParams.get('orderBy') || 'asc';
-  const phoneSearch = searchParams.get('search') || ''
+  const phoneSearch = searchParams.get('search') || '';
 
   const {
     isLoading,

hotel-management/src/hooks/rooms/useUpdateRoom.ts

@@ -6,6 +6,8 @@ import { updateRoom as updateRoomFn } from '@service/roomServices';
 
 // Constants
 import { UPDATE_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/useUserRoomAvailable.ts

@@ -1,6 +1,8 @@
-import { UserRoomAvailableContext } from '@context/UserRoomAvailableContext';
 import { useContext } from 'react';
 
+// Contexts
+import { UserRoomAvailableContext } from '@context/UserRoomAvailableContext';
+
 const useUserRoomAvailable = () => {
   const context = useContext(UserRoomAvailableContext);
 

hotel-management/src/hooks/users/useCreateUser.ts

@@ -6,6 +6,8 @@ import { createUser as createUserFn } from '@service/userServices';
 
 // Constants
 import { ADD_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/users/useUpdateUser.ts

@@ -6,6 +6,8 @@ import { updateUser as updateUserFn } from '@service/userServices';
 
 // Messages
 import { UPDATE_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/users/useUsers.ts

@@ -1,9 +1,9 @@
-import toast from "react-hot-toast";
+import toast from 'react-hot-toast';
-import { useQuery } from "@tanstack/react-query";
+import { useQuery } from '@tanstack/react-query';
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from 'react-router-dom';
 
 // Services
-import { getAllUsers } from "@service/userServices";
+import { getAllUsers } from '@service/userServices';
 
 /**
  * Fetch data of users from database
@@ -13,7 +13,7 @@ const useUsers = () => {
   const [searchParams] = useSearchParams();
   const sortByValue = searchParams.get('sortBy') || 'id';
   const orderByValue = searchParams.get('orderBy') || 'asc';
-  const phoneSearch = searchParams.get('search') || ''
+  const phoneSearch = searchParams.get('search') || '';
 
   const {
     isLoading,

hotel-management/src/pages/Dashboard.tsx

@@ -1,6 +1,8 @@
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 import styled from 'styled-components';
 
+// Hooks
+import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+
 const StyledDashboard = styled.main`
   padding: 20px;
 `;

hotel-management/src/services/roomServices.ts

@@ -1,9 +1,9 @@
 // Types
 import { IRoom } from '@type/rooms';
+import { IDataState } from '@type/common';
 
 // Services
 import supabase from './supabaseService';
-import { IDataState } from '@type/common';
 
 // Constants
 const ROOMS_TABLE = 'rooms';
@@ -25,7 +25,7 @@ const getAllRooms = async (
     .from(ROOMS_TABLE)
     .select('*')
     .order(sortBy, { ascending: orderBy === 'asc' })
-    .like('name', `%${roomName}%`);
+    .ilike('name', `%${roomName}%`);
 
   if (error) {
     console.error(error.message);

hotel-management/src/services/supabaseService.ts

@@ -1,8 +1,8 @@
-import { createClient } from "@supabase/supabase-js";
+import { createClient } from '@supabase/supabase-js';
-import { Database } from "@type/supabase";
+import { Database } from '@type/supabase';
 
 // Constants
-import { supabaseKey, supabaseUrl } from "@constant/config";
+import { supabaseKey, supabaseUrl } from '@constant/config';
 
 const supabase = createClient<Database>(supabaseUrl, supabaseKey!);
 

hotel-management/src/services/userServices.ts

@@ -1,9 +1,9 @@
 // Types
 import { IUser } from '@type/users';
+import { IDataState } from '@type/common';
 
 // Services
 import supabase from './supabaseService';
-import { IDataState } from '@type/common';
 
 const USERS_TABLE = 'users';
 const ERROR_FETCHING = "Users can't be loaded!";
@@ -65,7 +65,7 @@ const getAllUsers = async (
     .from(USERS_TABLE)
     .select('*')
     .order(sortBy, { ascending: orderBy === 'asc' })
-    .like('phone', `%${phoneSearch}%`);
+    .ilike('phone', `%${phoneSearch}%`);
 
   if (error) {
     console.error(error.message);