move refetch on page change to upper component

Author: followynne

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

@@ -13,15 +13,15 @@ import { useDisclosure, useMediaQuery } from '@mantine/hooks';
 import { IconBook, IconListNumbers } from '@tabler/icons-react';
 import useQueryLogs from 'app/hooks/useQueryLogs';
 import { toNumber } from 'app/util/guards';
-import { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 import classes from 'style/search.module.css';
 
 export const PagingRightColumn = memo(
   ({ field }: { field: ControllerRenderProps<FieldValues, 'page'> }) => {
     const [opened, { close, toggle }] = useDisclosure(false);
 
-    const { data, refetch } = useQueryLogs();
+    const { data } = useQueryLogs();
 
     const lessPages = useMediaQuery(`(max-width: ${em(800)})`);
     const totalPages = useMemo(() => {
@@ -30,10 +30,6 @@ export const PagingRightColumn = memo(
       return Number.isNaN(pages) ? 1 : pages;
     }, [data]);
 
-    useEffect(() => {
-      void refetch();
-    }, [refetch, field.value]);
-
     return (
       <Box
         className={classes.paginationGrid}

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

@@ -15,7 +15,7 @@ import { useQueryTableKeys } from 'app/hooks/useQueryTableKeys';
 import { useSearchForm } from 'app/hooks/useSearchForm';
 import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
 import { memo, useEffect } from 'react';
-import { useController } from 'react-hook-form';
+import { useController, useWatch } from 'react-hook-form';
 import classes from 'style/search.module.css';
 import { LogLevel } from '../../../types/types';
 
@@ -27,10 +27,11 @@ const levelsArray = Object.keys(LogLevel).map((level) => ({
 const Search = ({ onRefetch }: { onRefetch?: () => void }) => {
   const { isError } = useQueryTableKeys(true);
   const { isUtc, setIsUtc } = useSerilogUiProps();
-  const { handleSubmit, reset, setValue, watch } = useSearchForm();
+  const { handleSubmit, reset, setValue } = useSearchForm();
 
   const { refetch } = useQueryLogs();
-  const currentDbKey = watch('table');
+  const currentDbKey = useWatch({ name: 'table' });
+  const currentPage = useWatch({ name: 'page' });
 
   const clean = async () => {
     reset();
@@ -45,7 +46,7 @@ const Search = ({ onRefetch }: { onRefetch?: () => void }) => {
 
   useEffect(() => {
     void refetch();
-  }, [currentDbKey, refetch]);
+  }, [currentDbKey, currentPage, refetch]);
 
   return (
     <form aria-label="search-logs-form" onSubmit={() => {}}>