Close delete stream modal on success

src/hooks/useCacheToggle.tsx

@@ -2,23 +2,22 @@ import { useMutation, useQuery } from 'react-query';
 import { getCachingStatus, updateCaching } from '@/api/caching';
 
 export const useCacheToggle = (streamName: string) => {
-	const { mutate: updateCacheStatus, isSuccess: updateCacheIsSuccess } = useMutation(
-		({ type }: { type: boolean }) => updateCaching(streamName, type),
-		{},
-	);
-
-	const { data: checkCacheData } = useQuery(
-		['fetch-cache-status', streamName, updateCacheIsSuccess],
+	const { data: checkCacheData, refetch: getCacheStatusRefetch } = useQuery(
+		['fetch-cache-status', streamName],
 		() => getCachingStatus(streamName),
 		{
 			retry: false,
 			enabled: streamName !== '',
-			refetchOnWindowFocus: false
+			refetchOnWindowFocus: false,
 		},
 	);
 
-	const handleCacheToggle = () => {
-		updateCacheStatus({ type: !checkCacheData?.data });
+	const { mutate: updateCacheStatus } = useMutation(({ type }: { type: boolean }) => updateCaching(streamName, type), {
+		onSuccess: () => getCacheStatusRefetch(),
+	});
+
+	const handleCacheToggle = (val: boolean) => {
+		updateCacheStatus({ type: val });
 	};
 
 	return {

src/hooks/useLogStream.tsx

@@ -9,7 +9,12 @@ export const useLogStream = () => {
 		isSuccess: deleteLogStreamIsSuccess,
 		isError: deleteLogStreamIsError,
 		isLoading: deleteLogStreamIsLoading,
-	} = useMutation((data: { deleteStream: string }) => deleteLogStream(data.deleteStream), {});
+	} = useMutation((data: { deleteStream: string, onSuccess: () => void }) => deleteLogStream(data.deleteStream), {
+		onSuccess: (_data, variables) => {
+			variables.onSuccess && variables.onSuccess();
+			notifySuccess({message: `Stream ${variables.deleteStream} deleted successfully`})
+		},
+	});
 
 	const {
 		mutate: createLogStreamMutation,

src/pages/Logs/DeleteStreamModal.tsx

@@ -3,6 +3,7 @@ import { useLogsPageContext } from './logsContextProvider';
 import styles from './styles/Logs.module.css';
 import { useCallback, useState } from 'react';
 import { useLogStream } from '@/hooks/useLogStream';
+import { useNavigate } from 'react-router-dom';
 
 const DeleteStreamModal = () => {
 	const {
@@ -15,9 +16,15 @@ const DeleteStreamModal = () => {
 	}, []);
 
 	const { deleteLogStreamMutation } = useLogStream();
+	const navigate = useNavigate();
+
+	const onDeleteSuccess = useCallback(() => {
+		closeDeleteModal();
+		navigate('/');
+	}, [])
 
 	const handleDeleteStream = useCallback(() => {
-		deleteLogStreamMutation({ deleteStream: currentStream });
+		deleteLogStreamMutation({ deleteStream: currentStream, onSuccess: onDeleteSuccess });
 	}, [currentStream]);
 
 	return (

src/pages/Logs/RetentionModal.tsx

@@ -23,10 +23,6 @@ const RententionModal = () => {
 	const { getLogRetentionData } = useGetRetention(currentStream);
 	const { updateLogStreamRetention } = useRetentionEditor(currentStream);
 
-	const switchStyles = {
-		track: isCacheEnabled ? classes.trackStyle : {},
-	};
-
 	const onSubmit = useCallback(() => {
 		if (retentionConfig) {
 			let parsedConfig;
@@ -60,9 +56,8 @@ const RententionModal = () => {
 					<Switch
 						checked={isCacheEnabled}
 						labelPosition="left"
-						onChange={handleCacheToggle}
+						onChange={(event) => handleCacheToggle(event.currentTarget.checked)}
 						label={isCacheEnabled ? 'Enabled' : 'Disabled'}
-						styles={switchStyles}
 					/>
 				</Stack>
 				<Text style={{ fontSize: '1rem', fontWeight: 600 }}>Retention</Text>