fix: inital call with incorrect page param when navigating between se…

…ctions
research-software-directory · Apr 9, 2022 · 63de651 · 63de651
1 parent d0eaed7
commit 63de651
Showing 1 changed file with 16 additions and 21 deletions.
diff --git a/frontend/utils/usePaginationWithSearch.tsx b/frontend/utils/usePaginationWithSearch.tsx
@@ -8,8 +8,19 @@ export default function usePaginationWithSearch(placeholder:string) {
   const [search, setSearch] = useState(searchFor)
 
   useEffect(() => {
-    setPlaceholder(placeholder)
-  },[placeholder,setPlaceholder])
+    if (placeholder !== currentPlaceholder) {
+      // first reset page to 0
+      if (pagination.count !== 0) {
+        setPagination({
+          ...pagination,
+          page: 0,
+          count: 0
+        })
+      }
+      // change placeholder
+      setPlaceholder(placeholder)
+    }
+  },[placeholder,currentPlaceholder,setPlaceholder,pagination,setPagination])
 
   useEffect(() => {
     // sync search passed from Searchbox component
@@ -26,24 +37,6 @@ export default function usePaginationWithSearch(placeholder:string) {
     }
   }, [searchFor, search, pagination, setPagination])
 
-  // TODO! reset page to 0 on firt request
-  // useEffect(() => {
-  //   if (placeholder !== currentPlaceholder) {
-  //     // switch of placeholer means we need to reset pagination
-  //     // as we moved to another section/page
-  //     console.group('usePaginationWithSearch')
-  //     console.log('placeholder...', placeholder)
-  //     console.log('currentPlaceholder...', currentPlaceholder)
-  //     console.log('pagination...', pagination)
-  //     console.groupEnd()
-  //     setPagination({
-  //       ...pagination,
-  //       page: 0,
-  //       count:0
-  //     })
-  //   }
-  // },[placeholder,currentPlaceholder, pagination,setPagination])
-
   function setCount(count: number) {
     // sync count from api and in the component
     if (pagination.count !== count) {
@@ -65,7 +58,9 @@ export default function usePaginationWithSearch(placeholder:string) {
 
   return {
     searchFor: search,
-    page: pagination.page,
+    // when navigating between sections we need to reset page to 0
+    // assumption: placeholder change is result of switching between sections
+    page: placeholder !== currentPlaceholder ? 0 : pagination.page,
     rows: pagination.rows,
     setSearchInput,
     setPagination,