From 132dff64e619f4989e0cebd651eb5d181f5dde94 Mon Sep 17 00:00:00 2001
From: Ayon95 <mushfiqurrahman78@yahoo.com>
Date: Thu, 2 May 2024 21:25:19 -0400
Subject: [PATCH] refactor useDeleteBooking hook

this refactor moves code for navigating to Bookings page upon deletion from the delete hook to onConfirmDelete handler function for the Delete button on Booking Details page.
---
 src/features/bookings/BookingDetails.tsx        | 14 +++++++++++++-
 src/features/bookings/hooks/useDeleteBooking.ts |  8 --------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/features/bookings/BookingDetails.tsx b/src/features/bookings/BookingDetails.tsx
index dc385d5..efe0674 100644
--- a/src/features/bookings/BookingDetails.tsx
+++ b/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}
 				/>
diff --git a/src/features/bookings/hooks/useDeleteBooking.ts b/src/features/bookings/hooks/useDeleteBooking.ts
index 5ac8388..120574b 100644
--- a/src/features/bookings/hooks/useDeleteBooking.ts
+++ b/src/features/bookings/hooks/useDeleteBooking.ts
@@ -3,11 +3,8 @@ 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({
@@ -15,11 +12,6 @@ export function useDeleteBooking() {
 		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),
 	});