fix: pagination bug

inaseem · Feb 2, 2024 · c0e2d1e · c0e2d1e
1 parent cf57319
commit c0e2d1e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
@@ -21,10 +21,15 @@ export const Pagination = ({
     pagination.machine({
       id,
       count: totalItems,
-      page,
-      pageSize,
-      onPageChange,
-    })
+    }),
+    {
+      context: {
+        count: totalItems,
+        page,
+        pageSize,
+        onPageChange,
+      },
+    }
   );
 
   const api = pagination.connect(state, send, normalizeProps);

diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
@@ -7,13 +7,20 @@ import BackButton from './BackButton';
 
 const TopNav = () => {
   const { pathname } = useLocation();
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
 
   const handleBackClick = () => {
     navigate(-1);
   };
 
+  const handleTitleClick = () => {
+    searchParams.delete(queryParamsMapping.query);
+    searchParams.delete(queryParamsMapping.tags);
+    searchParams.delete(queryParamsMapping.page);
+    setSearchParams(searchParams);
+  };
+
   const initialSearchValue = searchParams.get(queryParamsMapping.query) || '';
 
   const isHome = pathname === paths.root;
@@ -22,7 +29,10 @@ const TopNav = () => {
       <div className="flex items-center justify-between gap-8">
         <div className="flex gap-6 items-center">
           {!isHome && <BackButton onClick={handleBackClick} />}
-          <h1 className="font-bold uppercase tracking-widest text-lg sm:text-xl">
+          <h1
+            className="font-bold uppercase tracking-widest text-lg sm:text-xl cursor-pointer"
+            onClick={handleTitleClick}
+          >
             HEWS
           </h1>
         </div>

diff --git a/src/hooks/useHNSearch.ts b/src/hooks/useHNSearch.ts
@@ -31,7 +31,7 @@ const useHNSearch = () => {
 
   const queryString = getQueryString();
 
-  const searchBy = searchQuery ? 'search_by_date' : 'search';
+  const searchBy = searchQuery || tags ? 'search_by_date' : 'search';
 
   const query = useQuery({
     queryKey: ['HN', queryString],