Merge pull request #26 from Ayon95/refactor_use_delete_booking_hook

Refactor useDeleteBooking hook

src/features/bookings/BookingDetails.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { HiArrowLeft, HiOutlineHomeModern } from 'react-icons/hi2';
 
@@ -34,9 +35,20 @@ function BookingDetails({ booking }: BookingProps) {
 		closeModal: closeConfirmDeleteModal,
 	} = useModal();
 
+	const navigate = useNavigate();
 	const deleteBookingMutation = useDeleteBooking();
 	const checkOutBookingMutation = useCheckOutBooking();
 
+	function handleDeleteBooking() {
+		deleteBookingMutation.mutate(booking.id, {
+			onSuccess: () => {
+				setTimeout(() => {
+					navigate('/bookings', { replace: true });
+				}, 1000);
+			},
+		});
+	}
+
 	return (
 		<>
 			<Container>
@@ -130,7 +142,7 @@ function BookingDetails({ booking }: BookingProps) {
 			{shouldShowConfirmDeleteModal && (
 				<ConfirmDeleteModal
 					resourceName={`booking ${booking.id}`}
-					onConfirmDelete={() => deleteBookingMutation.mutate(booking.id)}
+					onConfirmDelete={handleDeleteBooking}
 					onCloseModal={closeConfirmDeleteModal}
 					isDeleting={deleteBookingMutation.isLoading}
 				/>

src/features/bookings/hooks/useDeleteBooking.ts

@@ -3,23 +3,15 @@ import toast from 'react-hot-toast';
 
 import { deleteBooking } from '@/services/apiBookings';
 import { BOOKINGS_QUERY_KEY } from '@/utils/constants';
-import { useLocation, useNavigate } from 'react-router-dom';
 
 export function useDeleteBooking() {
-	const location = useLocation();
-	const navigate = useNavigate();
 	const queryClient = useQueryClient();
 
 	return useMutation({
 		mutationFn: deleteBooking,
 		onSuccess: () => {
 			toast.success('Booking deleted successfully!');
 			queryClient.invalidateQueries({ queryKey: [BOOKINGS_QUERY_KEY] });
-			if (location.pathname.includes('bookings/')) {
-				setTimeout(() => {
-					navigate('/bookings', { replace: true });
-				}, 1000);
-			}
 		},
 		onError: (error: Error) => toast.error(error.message),
 	});