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 };