Add page to query param

biolab · Oct 24, 2023 · 17de2a5 · 17de2a5
1 parent 1a10675
commit 17de2a5
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 16 deletions.
diff --git a/components/Pagination/Pagination.tsx b/components/Pagination/Pagination.tsx
@@ -61,7 +61,7 @@ export default function Pagination({
   noOfPages,
   page,
 }: {
-  setPage: React.Dispatch<React.SetStateAction<number>>;
+  setPage: (value: number) => void;
   noOfPages: number;
   page: number;
 }) {
@@ -91,7 +91,7 @@ export default function Pagination({
         <PageButtonNavigation
           $previous
           onClick={() => {
-            setPage((v) => v - 1);
+            setPage(page - 1);
           }}
         >
           <Image
@@ -143,7 +143,7 @@ export default function Pagination({
       {page !== noOfPages - 1 && (
         <PageButtonNavigation
           onClick={() => {
-            setPage((v) => v + 1);
+            setPage(page + 1);
           }}
         >
           Next

diff --git a/components/TagsList/useTags.tsx b/components/TagsList/useTags.tsx
@@ -3,24 +3,28 @@ import React from "react";
 
 export default function useTags<T>(data: T[], tagProp: string) {
   const router = useRouter();
-  const [selectedTag, setSelectedTag] = React.useState<string | null>(
-    (router.query.tag as string) || null
-  );
 
-  React.useEffect(() => {
-    setSelectedTag(router.query.tag as string);
+  const selectedTag = React.useMemo(() => {
+    if (!router.query.tag) {
+      return null;
+    }
+
+    return router.query.tag as string;
   }, [router.query.tag]);
 
   const onTagClick = React.useCallback(
     (tag: string) => {
       const remove = selectedTag === tag;
 
+      delete router.query.page;
+
       if (remove) {
+        delete router.query.tag;
+
         router.push(
           {
             query: {
               ...router.query,
-              tag: undefined,
             },
           },
           undefined,

diff --git a/hooks/usePagination.tsx b/hooks/usePagination.tsx
@@ -1,10 +1,40 @@
+import { useRouter } from "next/router";
 import React from "react";
 
-export default function usePagination(_items: any[] = [], itemsPerPage: number = 12) {
+export default function usePagination(
+  _items: any[] = [],
+  itemsPerPage: number = 12
+) {
+  const router = useRouter();
+
   const [items, setItems] = React.useState(_items);
+  const noOfPages = React.useMemo(
+    () => Math.ceil(items.length / itemsPerPage),
+    [items.length, itemsPerPage]
+  );
 
-  const noOfPages = React.useMemo(() => Math.ceil(items.length / itemsPerPage), [items.length, itemsPerPage]);
-  const [page, setPage] = React.useState(0);
+  const page = React.useMemo(() => {
+    if (!router.query.page) {
+      return 0;
+    }
+    return parseInt(router.query.page as string, 10) || 0;
+  }, [router.query.page]);
+
+  const setPage = React.useCallback(
+    (page: number) => {
+      router.push(
+        {
+          query: {
+            ...router.query,
+            page,
+          },
+        },
+        undefined,
+        { shallow: true }
+      );
+    },
+    [router]
+  );
 
   const itemsOnPage = React.useMemo(
     () => items.slice(page * itemsPerPage, (page + 1) * itemsPerPage),

diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -51,8 +51,7 @@ export default function Blog({
 
   React.useEffect(() => {
     setItems(selectedTag ? filteredData : blogs.slice(1));
-    setPage(0);
-  }, [blogs, filteredData, selectedTag, setItems, setPage]);
+  }, [blogs, filteredData, selectedTag, setItems]);
 
   return (
     <MainLayout title="Blog">

diff --git a/pages/examples/index.tsx b/pages/examples/index.tsx
@@ -85,8 +85,7 @@ export default function Examples({
 
   React.useEffect(() => {
     setItems(selectedTag ? filteredData : examples);
-    setPage(0);
-  }, [examples, filteredData, selectedTag, setItems, setPage]);
+  }, [examples, filteredData, selectedTag, setItems]);
 
   return (
     <MainLayout title="Examples">