move fetch logic to useQuery internal key, extract manual exception cases

Author: followynne

src/Serilog.Ui.Web/src/app/components/Search/PagingLeftColumn.tsx

@@ -6,7 +6,6 @@ import {
   IconSortAscending,
   IconSortDescending,
 } from '@tabler/icons-react';
-import useQueryLogs from 'app/hooks/useQueryLogs';
 import { useSearchForm } from 'app/hooks/useSearchForm';
 import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
 import { memo, useEffect, useMemo } from 'react';
@@ -26,7 +25,6 @@ const sortOnOptions = Object.values(SortPropertyOptions).map((entry) => ({
 export const PagingLeftColumn = memo(
   ({ changePage }: { changePage: (page: number) => void }) => {
     const { disabledSortOnKeys } = useSerilogUiProps();
-    const { refetch } = useQueryLogs();
     const { control, watch } = useSearchForm();
     const currentDbKey = watch('table');
 
@@ -58,10 +56,6 @@ export const PagingLeftColumn = memo(
       }
     }, [disableSortOn, fieldSortOn]);
 
-    useEffect(() => {
-      void refetch();
-    }, [refetch, fieldEntries.value, fieldSortOn.value, fieldSortBy.value]);
-
     return (
       <Box
         aria-label="paging-left-column"

src/Serilog.Ui.Web/src/app/components/Search/Search.tsx

@@ -14,7 +14,7 @@ import useQueryLogs from 'app/hooks/useQueryLogs';
 import { useQueryTableKeys } from 'app/hooks/useQueryTableKeys';
 import { useSearchForm } from 'app/hooks/useSearchForm';
 import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 import classes from 'style/search.module.css';
 import { LogLevel } from '../../../types/types';
@@ -28,25 +28,26 @@ const Search = ({ onRefetch }: { onRefetch?: () => void }) => {
   const { isError } = useQueryTableKeys(true);
   const { isUtc, setIsUtc } = useSerilogUiProps();
   const { handleSubmit, reset, setValue } = useSearchForm();
-
   const { refetch } = useQueryLogs();
-  const currentDbKey = useWatch({ name: 'table' });
   const currentPage = useWatch({ name: 'page' });
 
-  const clean = async () => {
-    reset();
-    await refetch();
-  };
+  const onSubmit = async () => {
+    if (currentPage === 1) {
+      await refetch();
+    } else {
+      setValue('page', 1);
+    }
 
-  const submit = async () => {
-    setValue('page', 1);
-    await refetch();
     onRefetch?.();
   };
 
-  useEffect(() => {
-    void refetch();
-  }, [currentDbKey, currentPage, refetch]);
+  const onClear = async () => {
+    const shouldRefetch = reset();
+
+    if (shouldRefetch) {
+      await refetch();
+    }
+  };
 
   return (
     <form aria-label="search-logs-form" onSubmit={() => {}}>
@@ -67,13 +68,13 @@ const Search = ({ onRefetch }: { onRefetch?: () => void }) => {
                 setIsUtc(event.currentTarget.checked);
               }}
             />
-            <Button type="submit" onClick={handleSubmit(submit)} disabled={isError}>
+            <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isError}>
               Submit
             </Button>
             <ActionIcon
               visibleFrom="lg"
               size={28}
-              onClick={clean}
+              onClick={onClear}
               variant="light"
               aria-label="reset filters"
             >

src/Serilog.Ui.Web/src/app/components/ShellStructure/FilterButton.tsx

@@ -13,6 +13,13 @@ const FilterButton = () => {
   const [filterModalOpened, { open, close }] = useDisclosure(false);
   const { reset } = useSearchForm();
   const { refetch } = useQueryLogs();
+  const onClear = async () => {
+    const shouldRefetch = reset();
+
+    if (shouldRefetch) {
+      await refetch();
+    }
+  };
 
   useCloseOnResize(close);
 
@@ -29,10 +36,7 @@ const FilterButton = () => {
           <Box className={classes.searchFiltersModalTitle}>
             <Text>Search filters</Text>
             <ActionIcon
-              onClick={async () => {
-                reset();
-                await refetch();
-              }}
+              onClick={onClear}
               size={28}
               variant="light"
               aria-label="reset filters"

src/Serilog.Ui.Web/src/app/hooks/useQueryLogs.ts

@@ -2,24 +2,31 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { fetchLogs } from '../queries/logs';
 import { useAuthProperties } from './useAuthProperties';
 import { useSearchForm } from './useSearchForm';
+import { useWatch } from 'react-hook-form';
 
 const useQueryLogs = () => {
   const { fetchInfo, isHeaderReady } = useAuthProperties();
-  const { getValues, watch } = useSearchForm();
-  const currentDbKey = watch('table');
+  const { getValues } = useSearchForm();
 
+  const currentDbKey = useWatch({ name: 'table' })
+  const entriesPerPage = useWatch({ name: 'entriesPerPage' })
+  const page = useWatch({ name: 'page' })
+  const sortBy = useWatch({ name: 'sortBy' })
+  const sortOn = useWatch({ name: 'sortOn' })
+
+  console.log(['get-logs', entriesPerPage, page, sortBy, sortOn, currentDbKey])
   return useQuery({
-    enabled: false,
-    queryKey: ['get-logs'],
+    enabled: true,
+    queryKey: ['get-logs', entriesPerPage, page, sortBy, sortOn, currentDbKey],
     queryFn: async () => {
       if (!isHeaderReady) return null;
-      
+
       return currentDbKey
         ? await fetchLogs(getValues(), fetchInfo.headers, fetchInfo.routePrefix)
         : null;
     },
     placeholderData: keepPreviousData,
-    refetchOnMount: true,
+    refetchOnMount: false,
     refetchOnWindowFocus: false,
     retry: false,
   });

src/Serilog.Ui.Web/src/app/hooks/useSearchForm.ts

@@ -19,6 +19,19 @@ export const searchFormInitialValues: SearchForm = {
   page: 1,
 };
 
+// react-query run a refetch when any of these values change,
+// as they're part of its query hash-key. 
+// If on a clear fields no value was changed, we run a manual refetch
+// otherwise it won't automatically run
+const runManualRefetch = (getValues: () => SearchForm, tableDefault: string) => {
+  const { table, entriesPerPage, page, sortBy, sortOn } = getValues();
+
+  const propertiesToCheck = [table === tableDefault, entriesPerPage === searchFormInitialValues.entriesPerPage,
+  page === searchFormInitialValues.page, sortBy === searchFormInitialValues.sortBy, sortOn === searchFormInitialValues.sortOn]
+
+  return propertiesToCheck.every(isEqualToDefault => isEqualToDefault)
+}
+
 export const useSearchForm = () => {
   const methods = useForm<SearchForm>({
     defaultValues: searchFormInitialValues,
@@ -29,10 +42,14 @@ export const useSearchForm = () => {
   const tableKeysDefaultValue = isArrayGuard(data) ? data.at(0)! : '';
 
   const resetForm = () => {
+    const runRefetch = runManualRefetch(useSearchContext.getValues, tableKeysDefaultValue)
+
     useSearchContext.reset({
       ...searchFormInitialValues,
       table: tableKeysDefaultValue,
     });
+
+    return runRefetch
   };
 
   return { methods, ...useSearchContext, reset: resetForm };