From d917a7e37514f971d29eb386787546eb07e066a5 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Thu, 18 Apr 2024 11:55:52 +0530 Subject: [PATCH 1/4] Close delete stream modal on success --- src/hooks/useLogStream.tsx | 7 ++++++- src/pages/Logs/DeleteStreamModal.tsx | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/hooks/useLogStream.tsx b/src/hooks/useLogStream.tsx index 1470235f..0aef335d 100644 --- a/src/hooks/useLogStream.tsx +++ b/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, diff --git a/src/pages/Logs/DeleteStreamModal.tsx b/src/pages/Logs/DeleteStreamModal.tsx index 3974d008..d5ffaa9a 100644 --- a/src/pages/Logs/DeleteStreamModal.tsx +++ b/src/pages/Logs/DeleteStreamModal.tsx @@ -17,7 +17,7 @@ const DeleteStreamModal = () => { const { deleteLogStreamMutation } = useLogStream(); const handleDeleteStream = useCallback(() => { - deleteLogStreamMutation({ deleteStream: currentStream }); + deleteLogStreamMutation({ deleteStream: currentStream, onSuccess: closeDeleteModal }); }, [currentStream]); return ( From 190fbd0af5422ff1a9ac234edbdca77f7524919b Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Thu, 18 Apr 2024 14:16:49 +0530 Subject: [PATCH 2/4] fixed cache toggle styling --- src/pages/Logs/RetentionModal.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/Logs/RetentionModal.tsx b/src/pages/Logs/RetentionModal.tsx index cd17c4fc..655e0783 100644 --- a/src/pages/Logs/RetentionModal.tsx +++ b/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; @@ -62,7 +58,6 @@ const RententionModal = () => { labelPosition="left" onChange={handleCacheToggle} label={isCacheEnabled ? 'Enabled' : 'Disabled'} - styles={switchStyles} /> Retention From b0e7594de3ebea916de72f2df77a417c00c9ce32 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Thu, 18 Apr 2024 14:40:11 +0530 Subject: [PATCH 3/4] navigate to home after deleting stream --- src/pages/Logs/DeleteStreamModal.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/Logs/DeleteStreamModal.tsx b/src/pages/Logs/DeleteStreamModal.tsx index d5ffaa9a..3a54ce7d 100644 --- a/src/pages/Logs/DeleteStreamModal.tsx +++ b/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, onSuccess: closeDeleteModal }); + deleteLogStreamMutation({ deleteStream: currentStream, onSuccess: onDeleteSuccess }); }, [currentStream]); return ( From 560d855c87ac408a3b1b4b37e16e51e5f8155acc Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Thu, 18 Apr 2024 15:15:48 +0530 Subject: [PATCH 4/4] fixed - multiple get cache status requests are firing --- src/hooks/useCacheToggle.tsx | 19 +++++++++---------- src/pages/Logs/RetentionModal.tsx | 2 +- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/hooks/useCacheToggle.tsx b/src/hooks/useCacheToggle.tsx index 262883da..159348fd 100644 --- a/src/hooks/useCacheToggle.tsx +++ b/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 { diff --git a/src/pages/Logs/RetentionModal.tsx b/src/pages/Logs/RetentionModal.tsx index 655e0783..f81eec00 100644 --- a/src/pages/Logs/RetentionModal.tsx +++ b/src/pages/Logs/RetentionModal.tsx @@ -56,7 +56,7 @@ const RententionModal = () => { handleCacheToggle(event.currentTarget.checked)} label={isCacheEnabled ? 'Enabled' : 'Disabled'} />