refactor

ui/pages/SearchResults.tsx

 import { Box, chakra, Table, Tbody, Tr, Th, Skeleton } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import type { FormEvent } from 'react';
 import React from 'react';
 
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-import useUpdateValueEffect from 'lib/hooks/useUpdateValueEffect';
+import link from 'lib/link/link';
 import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -12,6 +11,9 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import { default as Thead } from 'ui/shared/TheadSticky';
+import Header from 'ui/snippets/header/Header';
+import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
+import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
 
 // const data = {
 //   items: [
@@ -59,18 +61,16 @@ import { default as Thead } from 'ui/shared/TheadSticky';
 // };
 
 const SearchResultsPageContent = () => {
-  const router = useRouter();
-  const searchTerm = String(router.query.q || '');
-  const { data, isError, isLoading, pagination, isPaginationVisible, onFilterChange } = useQueryWithPages({
-    resourceName: 'search',
-    filters: { q: searchTerm },
-    options: { enabled: Boolean(searchTerm) },
-  });
+  const { query, searchTerm, handleSearchTermChange } = useSearchQuery(true);
+  const { data, isError, isLoading, pagination, isPaginationVisible } = query;
 
-  useUpdateValueEffect(() => {
-    onFilterChange({ q: searchTerm });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, searchTerm);
+  const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (searchTerm) {
+      const url = link('search_results', undefined, { q: searchTerm });
+      window.location.assign(url);
+    }
+  }, [ searchTerm ]);
 
   const content = (() => {
     if (isError) {
@@ -122,8 +122,22 @@ const SearchResultsPageContent = () => {
     );
   })();
 
+  const renderSearchBar = React.useCallback(() => {
+    return (
+      <SearchBarInput
+        onChange={ handleSearchTermChange }
+        onSubmit={ handleSubmit }
+        value={ searchTerm }
+      />
+    );
+  }, [ handleSearchTermChange, handleSubmit, searchTerm ]);
+
+  const renderHeader = React.useCallback(() => {
+    return <Header renderSearchBar={ renderSearchBar }/>;
+  }, [ renderSearchBar ]);
+
   return (
-    <Page isSearchPage>
+    <Page renderHeader={ renderHeader }>
       <PageTitle text="Search results"/>
       { content }
     </Page>

ui/shared/Page/Page.tsx

@@ -15,7 +15,7 @@ interface Props {
   wrapChildren?: boolean;
   hideMobileHeaderOnScrollDown?: boolean;
   isHomePage?: boolean;
-  isSearchPage?: boolean;
+  renderHeader?: () => React.ReactNode;
 }
 
 const Page = ({
@@ -23,7 +23,7 @@ const Page = ({
   wrapChildren = true,
   hideMobileHeaderOnScrollDown,
   isHomePage,
-  isSearchPage,
+  renderHeader,
 }: Props) => {
   const fetch = useFetch();
 
@@ -45,7 +45,10 @@ const Page = ({
     <Flex w="100%" minH="100vh" alignItems="stretch">
       <NavigationDesktop/>
       <Flex flexDir="column" flexGrow={ 1 } w={{ base: '100%', lg: 'auto' }}>
-        <Header isHomePage={ isHomePage } isSearchPage={ isSearchPage } hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
+        { renderHeader ?
+          renderHeader() :
+          <Header isHomePage={ isHomePage } hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
+        }
         <ErrorBoundary renderErrorScreen={ renderErrorScreen }>
           { renderedChildren }
         </ErrorBoundary>

ui/snippets/header/Header.tsx

@@ -13,14 +13,16 @@ import ColorModeToggler from './ColorModeToggler';
 
 type Props = {
   isHomePage?: boolean;
-  isSearchPage?: boolean;
   hideOnScrollDown?: boolean;
+  renderSearchBar?: () => React.ReactNode;
 }
 
-const Header = ({ hideOnScrollDown, isHomePage, isSearchPage }: Props) => {
+const Header = ({ hideOnScrollDown, isHomePage, renderSearchBar }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
   const scrollDirection = useScrollDirection();
 
+  const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar withShadow={ !hideOnScrollDown }/>;
+
   return (
     <>
       <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
@@ -44,7 +46,7 @@ const Header = ({ hideOnScrollDown, isHomePage, isSearchPage }: Props) => {
           <NetworkLogo/>
           <ProfileMenuMobile/>
         </Flex>
-        { !isHomePage && <SearchBar withShadow={ !hideOnScrollDown } isSearchPage={ isSearchPage }/> }
+        { !isHomePage && searchBar }
       </Box>
       <Box
         paddingX={ 12 }
@@ -62,7 +64,7 @@ const Header = ({ hideOnScrollDown, isHomePage, isSearchPage }: Props) => {
             paddingBottom="52px"
           >
             <Box width="100%">
-              <SearchBar isSearchPage={ isSearchPage }/>
+              { searchBar }
             </Box>
             <ColorModeToggler/>
             <ProfileMenuDesktop/>

ui/snippets/searchBar/SearchBar.tsx

@@ -12,17 +12,16 @@ import useSearchQuery from './useSearchQuery';
 type Props = {
   withShadow?: boolean;
   isHomepage?: boolean;
-  isSearchPage?: boolean;
 }
 
-const SearchBar = ({ isHomepage, isSearchPage, withShadow }: Props) => {
+const SearchBar = ({ isHomepage, withShadow }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const inputRef = React.useRef<HTMLFormElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const menuWidth = React.useRef<number>(0);
   const isMobile = useIsMobile();
 
-  const { searchTerm, handleSearchTermChange, query } = useSearchQuery(isSearchPage);
+  const { searchTerm, handleSearchTermChange, query } = useSearchQuery();
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -58,7 +57,7 @@ const SearchBar = ({ isHomepage, isSearchPage, withShadow }: Props) => {
 
   return (
     <Popover
-      isOpen={ isOpen && searchTerm.trim().length > 0 && !isSearchPage }
+      isOpen={ isOpen && searchTerm.trim().length > 0 }
       autoFocus={ false }
       onClose={ onClose }
       placement="bottom-start"

ui/snippets/searchBar/SearchBarInput.tsx

@@ -10,8 +10,8 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 interface Props {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-  onBlur: (event: FocusEvent<HTMLFormElement>) => void;
-  onFocus: () => void;
+  onBlur?: (event: FocusEvent<HTMLFormElement>) => void;
+  onFocus?: () => void;
   isHomepage?: boolean;
   withShadow?: boolean;
   value: string;

ui/snippets/searchBar/useSearchQuery.tsx

@@ -69,9 +69,9 @@ export default function useSearchQuery(isSearchPage = false) {
   }, []);
 
   useUpdateValueEffect(() => {
-    query.onFilterChange({ q: debouncedSearchTerm });
-  // should run only when debouncedSearchTerm updates
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (isSearchPage) {
+      query.onFilterChange({ q: debouncedSearchTerm });
+    }
   }, debouncedSearchTerm);
 
   return {