Update hooks and services

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

@@ -18,7 +18,11 @@ const useCreateRoom = () => {
   const queryClient = useQueryClient();
   const { dispatch } = useUserRoomAvailable();
 
-  const { mutate: createRoom, isPending: isCreating } = useMutation({
+  const {
+    mutate: createRoom,
+    isPending: isCreating,
+    isSuccess,
+  } = useMutation({
     mutationFn: createRoomFn,
     onSuccess: (room) => {
       toast.success(ADD_SUCCESS);
@@ -33,7 +37,7 @@ const useCreateRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isCreating, createRoom };
+  return { isCreating, createRoom, isSuccess };
 };
 
 export { useCreateRoom };

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

@@ -14,7 +14,11 @@ import * as messages from '@constant/messages';
 const useDeleteRoom = () => {
   const queryClient = useQueryClient();
 
-  const { isPending: isDeleting, mutate: deleteRoom } = useMutation({
+  const {
+    isPending: isDeleting,
+    mutate: deleteRoom,
+    isSuccess
+  } = useMutation({
     mutationFn: deleteRoomFn,
     onSuccess: () => {
       toast.success(messages.DELETE_SUCCESS);
@@ -25,7 +29,7 @@ const useDeleteRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isDeleting, deleteRoom };
+  return { isDeleting, deleteRoom, isSuccess };
 };
 
 export { useDeleteRoom };

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

@@ -1,34 +1,65 @@
 import toast from 'react-hot-toast';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 
 // Services
 import { getAllRooms } from '@service/roomServices';
 
+// Constants
+import { DEFAULT_PAGE_SIZE } from '@constant/config';
+
 /**
  * Fetch room from database
  * @returns The status of loading rooms from database and data of rooms
  */
 const useRooms = () => {
+  const queryClient = useQueryClient();
   const [searchParams] = useSearchParams();
+
   const sortByValue = searchParams.get('sortBy') || 'id';
   const orderByValue = searchParams.get('orderBy') || 'asc';
-  const phoneSearch = searchParams.get('search') || '';
+  const roomSearch = searchParams.get('search') || '';
+  const page = searchParams.get('page') 
+    ? Number(searchParams.get('page')) 
+    : 1;
 
   const {
     isLoading,
-    data: rooms,
+    data: { data: rooms, count } = {},
     error,
   } = useQuery({
-    queryKey: ['rooms', sortByValue, orderByValue, phoneSearch],
-    queryFn: () => getAllRooms(sortByValue, orderByValue, phoneSearch),
+    queryKey: ['rooms', sortByValue, orderByValue, roomSearch, page],
+    queryFn: () => getAllRooms(sortByValue, orderByValue, roomSearch, page),
   });
 
   if (error) {
     toast.error(error.message);
   }
 
-  return { isLoading, rooms };
+  // Pre-fetching
+  const totalPage = Math.ceil(count! / DEFAULT_PAGE_SIZE);
+
+  if (page < totalPage) {
+    const nextPage = page + 1;
+
+    queryClient.prefetchQuery({
+      queryKey: ['rooms', sortByValue, orderByValue, roomSearch, nextPage],
+      queryFn: () =>
+        getAllRooms(sortByValue, orderByValue, roomSearch, nextPage),
+    });
+  }
+
+  if (page > 1) {
+    const previousPage = page - 1;
+
+    queryClient.prefetchQuery({
+      queryKey: ['rooms', sortByValue, orderByValue, roomSearch, previousPage],
+      queryFn: () =>
+        getAllRooms(sortByValue, orderByValue, roomSearch, previousPage),
+    });
+  }
+
+  return { isLoading, rooms, count };
 };
 
 export { useRooms };

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

@@ -18,14 +18,18 @@ const useUpdateRoom = () => {
   const queryClient = useQueryClient();
   const { dispatch } = useUserRoomAvailable();
 
-  const { mutate: updateRoom, isPending: isUpdating } = useMutation({
+  const {
+    mutate: updateRoom,
+    isPending: isUpdating,
+    isSuccess
+  } = useMutation({
     mutationFn: updateRoomFn,
     onSuccess: (room) => {
       toast.success(UPDATE_SUCCESS);
       queryClient.invalidateQueries({ queryKey: ['rooms'] });
 
       // Update name room in global state
-      dispatch!({
+      dispatch?.({
         type: 'updateRoomName',
         payload: [{ id: room.id, name: room.name }],
       });
@@ -33,7 +37,7 @@ const useUpdateRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isUpdating, updateRoom };
+  return { isUpdating, updateRoom, isSuccess };
 };
 
 export { useUpdateRoom };

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

@@ -18,7 +18,11 @@ const useCreateUser = () => {
   const queryClient = useQueryClient();
   const { dispatch } = useUserRoomAvailable();
 
-  const { mutate: createUser, isPending: isCreating } = useMutation({
+  const {
+    mutate: createUser,
+    isPending: isCreating,
+    isSuccess,
+  } = useMutation({
     mutationFn: createUserFn,
     onSuccess: (user) => {
       toast.success(ADD_SUCCESS);
@@ -33,7 +37,7 @@ const useCreateUser = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isCreating, createUser };
+  return { isCreating, createUser, isSuccess };
 };
 
 export { useCreateUser };

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

@@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 // Services
 import { updateUser as updateUserFn } from '@service/userServices';
 
-// Messages
+// Constants
 import { UPDATE_SUCCESS } from '@constant/messages';
 
 // Hooks
@@ -18,7 +18,11 @@ const useUpdateUser = () => {
   const queryClient = useQueryClient();
   const { dispatch } = useUserRoomAvailable();
 
-  const { mutate: updateUser, isPending: isUpdating } = useMutation({
+  const {
+    mutate: updateUser,
+    isPending: isUpdating,
+    isSuccess,
+  } = useMutation({
     mutationFn: updateUserFn,
     onSuccess: (user) => {
       toast.success(UPDATE_SUCCESS);
@@ -33,7 +37,7 @@ const useUpdateUser = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isUpdating, updateUser };
+  return { isUpdating, updateUser, isSuccess };
 };
 
 export { useUpdateUser };

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

@@ -1,34 +1,64 @@
 import toast from 'react-hot-toast';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 
 // Services
 import { getAllUsers } from '@service/userServices';
 
+// Constants
+import { DEFAULT_PAGE_SIZE } from '@constant/config';
+
 /**
  * Fetch data of users from database
  * @returns The status of loading users and data of users
  */
 const useUsers = () => {
   const [searchParams] = useSearchParams();
+  const queryClient = useQueryClient();
   const sortByValue = searchParams.get('sortBy') || 'id';
   const orderByValue = searchParams.get('orderBy') || 'asc';
   const phoneSearch = searchParams.get('search') || '';
+  const page = searchParams.get('page') 
+    ? Number(searchParams.get('page')) 
+    : 1;
 
   const {
     isLoading,
-    data: users,
+    data: { data: users, count } = {},
     error,
   } = useQuery({
-    queryKey: ['users', sortByValue, orderByValue, phoneSearch],
-    queryFn: () => getAllUsers(sortByValue, orderByValue, phoneSearch),
+    queryKey: ['users', sortByValue, orderByValue, phoneSearch, page],
+    queryFn: () => getAllUsers(sortByValue, orderByValue, phoneSearch, page),
   });
 
   if (error) {
     toast.error(error.message);
   }
 
-  return { isLoading, users };
+  // Pre-fetching
+  const totalPage = Math.ceil(count! / DEFAULT_PAGE_SIZE);
+
+  if (page < totalPage) {
+    const nextPage = page + 1;
+
+    queryClient.prefetchQuery({
+      queryKey: ['users', sortByValue, orderByValue, phoneSearch, nextPage],
+      queryFn: () =>
+        getAllUsers(sortByValue, orderByValue, phoneSearch, nextPage),
+    });
+  }
+
+  if (page > 1) {
+    const previousPage = page - 1;
+
+    queryClient.prefetchQuery({
+      queryKey: ['users', sortByValue, orderByValue, phoneSearch, previousPage],
+      queryFn: () =>
+        getAllUsers(sortByValue, orderByValue, phoneSearch, previousPage),
+    });
+  }
+
+  return { isLoading, users, count };
 };
 
 export { useUsers };

hotel-management/src/services/roomServices.ts

@@ -6,6 +6,8 @@ import { IDataState } from '@type/common';
 import supabase from './supabaseService';
 
 // Constants
+import { DEFAULT_PAGE_SIZE } from '@constant/config';
+
 const ROOMS_TABLE = 'rooms';
 const ERROR_FETCHING = "Can't fetch room data!";
 const ERROR_UPDATE_ROOM = "Can't update room!";
@@ -19,11 +21,16 @@ const ERROR_DELETE_ROOM = "Can't delete room!";
 const getAllRooms = async (
   sortBy: string,
   orderBy: string,
-  roomName: string
-): Promise<IRoom[]> => {
-  const { data, error } = await supabase
+  roomName: string,
+  page: number
+): Promise<{ data: IRoom[]; count: number | null }> => {
+  const from = (page - 1) * DEFAULT_PAGE_SIZE;
+  const to = from + DEFAULT_PAGE_SIZE - 1;
+
+  const { data, error, count } = await supabase
     .from(ROOMS_TABLE)
-    .select('*')
+    .select('*', { count: 'exact' })
+    .range(from, to)
     .order(sortBy, { ascending: orderBy === 'asc' })
     .ilike('name', `%${roomName}%`);
 
@@ -32,7 +39,7 @@ const getAllRooms = async (
     throw new Error(ERROR_FETCHING);
   }
 
-  return data;
+  return { data, count };
 };
 
 /**

hotel-management/src/services/userServices.ts

@@ -5,6 +5,9 @@ import { IDataState } from '@type/common';
 // Services
 import supabase from './supabaseService';
 
+// Constants
+import { DEFAULT_PAGE_SIZE } from '@constant/config';
+
 const USERS_TABLE = 'users';
 const ERROR_FETCHING = "Users can't be loaded!";
 const ERROR_CREATE_USER = "Can't create user!";
@@ -59,11 +62,16 @@ const updateUser = async (user: IUser): Promise<IUser> => {
 const getAllUsers = async (
   sortBy: string,
   orderBy: string,
-  phoneSearch: string
-): Promise<IUser[]> => {
-  const { data, error } = await supabase
+  phoneSearch: string,
+  page: number
+): Promise<{ data: IUser[]; count: number | null }> => {
+  const from = (page - 1) * DEFAULT_PAGE_SIZE;
+  const to = from + DEFAULT_PAGE_SIZE - 1;
+
+  const { data, error, count } = await supabase
     .from(USERS_TABLE)
-    .select('*')
+    .select('*', { count: 'exact' })
+    .range(from, to)
     .order(sortBy, { ascending: orderBy === 'asc' })
     .ilike('phone', `%${phoneSearch}%`);
 
@@ -72,7 +80,7 @@ const getAllUsers = async (
     throw new Error(ERROR_FETCHING);
   }
 
-  return data;
+  return { data, count };
 };
 
 const getUserNotBooked = async (): Promise<IDataState[]> => {

hotel-management/src/styles/abstracts/variables.css

@@ -3,6 +3,7 @@
 
   --header-table-color: #ebebeb;
   --border-color: #8c8c8c;
+  --footer-table-color: #ebebeb;
 
   --secondary-btn-color: #d1d1d1;
   --disabled-btn-color: #7f82a6;