fix pagination and tests

lib/hooks/useQueryWithPages.ts

@@ -151,14 +151,12 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
     });
   }, [ router, resource.paginationFields, resource.filterFields, scrollToTop ]);
 
-  const hasPaginationParams = Object.keys(currPageParams || {}).length > 0;
   const nextPageParams = data?.next_page_params;
 
   const pagination = {
     page,
     onNextPageClick,
     onPrevPageClick,
-    hasPaginationParams,
     resetPage,
     hasNextPage: nextPageParams ? Object.keys(nextPageParams).length > 0 : false,
     canGoBackwards: canGoBackwards.current,

ui/pages/SearchResults.tsx

@@ -37,7 +37,6 @@ const SearchResultsPageContent = () => {
     if (isLoading) {
       return (
         <Box>
-          <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ 6 }/>
           <Show below="lg">
             <SkeletonList/>
           </Show>
@@ -48,56 +47,64 @@ const SearchResultsPageContent = () => {
       );
     }
 
-    const num = pagination.page > 1 ? 50 : data.items.length;
-    const text = (
-      <Box mb={ isPaginationVisible ? 0 : 6 } lineHeight="32px">
-        <span>Found </span>
-        <chakra.span fontWeight={ 700 }>{ num }{ data.next_page_params || pagination.page > 1 ? '+' : '' }</chakra.span>
-        <span> matching results for </span>
-                “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
-      </Box>
+    if (data.items.length === 0) {
+      return null;
+    }
+
+    return (
+      <>
+        <Show below="lg" ssr={ false }>
+          { data.items.map((item, index) => <SearchResultListItem key={ index } data={ item } searchTerm={ debouncedSearchTerm }/>) }
+        </Show>
+        <Hide below="lg" ssr={ false }>
+          <Table variant="simple" size="md" fontWeight={ 500 }>
+            <Thead top={ isPaginationVisible ? 80 : 0 }>
+              <Tr>
+                <Th width="50%">Search Result</Th>
+                <Th width="50%"/>
+                <Th width="150px">Category</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              { data.items.map((item, index) => <SearchResultTableItem key={ index } data={ item } searchTerm={ debouncedSearchTerm }/>) }
+            </Tbody>
+          </Table>
+        </Hide>
+      </>
     );
+  })();
+
+  const bar = (() => {
+    if (isError) {
+      return null;
+    }
 
-    const bar = (() => {
-      if (!isPaginationVisible) {
-        return text;
-      }
+    const text = isLoading ? (
+      <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ isPaginationVisible ? 0 : 6 }/>
+    ) : (
+      (
+        <Box mb={ isPaginationVisible ? 0 : 6 } lineHeight="32px">
+          <span>Found </span>
+          <chakra.span fontWeight={ 700 }>
+            { pagination.page > 1 ? 50 : data.items.length }{ data.next_page_params || pagination.page > 1 ? '+' : '' }
+          </chakra.span>
+          <span> matching results for </span>
+                      “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
+        </Box>
+      )
+    );
 
-      return (
-        <>
-          <Box display={{ base: 'block', lg: 'none' }}>{ text }</Box>
-          <ActionBar mt={{ base: 0, lg: -6 }}>
-            <Box display={{ base: 'none', lg: 'block' }}>{ text }</Box>
-            <Pagination { ...pagination }/>
-          </ActionBar>
-        </>
-      );
-    })();
+    if (!isPaginationVisible) {
+      return text;
+    }
 
     return (
       <>
-        { bar }
-        { data.items.length > 0 && (
-          <>
-            <Show below="lg" ssr={ false }>
-              { data.items.map((item, index) => <SearchResultListItem key={ index } data={ item } searchTerm={ debouncedSearchTerm }/>) }
-            </Show>
-            <Hide below="lg" ssr={ false }>
-              <Table variant="simple" size="md" fontWeight={ 500 }>
-                <Thead top={ isPaginationVisible ? 80 : 0 }>
-                  <Tr>
-                    <Th width="50%">Search Result</Th>
-                    <Th width="50%"/>
-                    <Th width="150px">Category</Th>
-                  </Tr>
-                </Thead>
-                <Tbody>
-                  { data.items.map((item, index) => <SearchResultTableItem key={ index } data={ item } searchTerm={ debouncedSearchTerm }/>) }
-                </Tbody>
-              </Table>
-            </Hide>
-          </>
-        ) }
+        <Box display={{ base: 'block', lg: 'none' }}>{ text }</Box>
+        <ActionBar mt={{ base: 0, lg: -6 }} alignItems="center">
+          <Box display={{ base: 'none', lg: 'block' }}>{ text }</Box>
+          <Pagination { ...pagination }/>
+        </ActionBar>
       </>
     );
   })();
@@ -126,6 +133,7 @@ const SearchResultsPageContent = () => {
   return (
     <Page renderHeader={ renderHeader }>
       <PageTitle text="Search results"/>
+      { bar }
       { content }
     </Page>
   );

ui/shared/Pagination.tsx

@@ -9,12 +9,11 @@ export type Props = {
   onPrevPageClick: () => void;
   resetPage: () => void;
   hasNextPage: boolean;
-  hasPaginationParams?: boolean;
   className?: string;
   canGoBackwards: boolean;
 }
 
-const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, hasPaginationParams, className, canGoBackwards }: Props) => {
+const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, className, canGoBackwards }: Props) => {
 
   return (
     <Flex
@@ -26,7 +25,7 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNext
         variant="outline"
         size="sm"
         onClick={ resetPage }
-        disabled={ !hasPaginationParams }
+        disabled={ page === 1 }
         mr={ 4 }
       >
         First
@@ -49,7 +48,6 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNext
         fontWeight={ 400 }
         h={ 8 }
         cursor="unset"
-        disabled={ hasPaginationParams && page === 1 }
       >
         { page }
       </Button>

ui/snippets/searchBar/SearchBarSuggest.tsx

-import { Box, Text } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -23,7 +23,7 @@ const SearchBarSuggest = ({ query, searchTerm }: Props) => {
     }
 
     if (query.isError) {
-      return <Box>Something went wrong. Try refreshing the page or come back later.</Box>;
+      return <Text>Something went wrong. Try refreshing the page or come back later.</Text>;
     }
 
     const num = query.data.next_page_params ? '50+' : query.data.items.length;