From c0e2d1e2b0c75bcfd73edfc0e6fdf5ef0c5b23b5 Mon Sep 17 00:00:00 2001
From: inaseem <inaseem@protonmail.com>
Date: Fri, 2 Feb 2024 19:51:13 +0530
Subject: [PATCH] fix: pagination bug

---
 src/components/Pagination.tsx | 13 +++++++++----
 src/components/TopNav.tsx     | 14 ++++++++++++--
 src/hooks/useHNSearch.ts      |  2 +-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 93e0dbf..bfbcf5c 100644
--- 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
index 16e8391..212f9ff 100644
--- 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
index 8456cc1..36f7412 100644
--- 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],