ssr compat

FormidableLabs · Nov 7, 2023 · 7127200 · 7127200
1 parent d78e74a
commit 7127200
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/nextjs/components/Pagination.tsx b/packages/nextjs/components/Pagination.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import { Pagination as BasePagination } from "shared-ui";
 import Link from "next/link";
 import classNames from "classnames";
+import { useRouter } from "next/router";
+import { stringify } from "querystring";
 
 type PaginationProps = {
   pageCount: number;
@@ -10,6 +12,7 @@ type PaginationProps = {
 };
 
 export const Pagination = ({ onPageChange, pageCount = 1, currentPage = 1 }: PaginationProps) => {
+  const router = useRouter();
   const handlePageChanged = (e: React.MouseEvent<HTMLAnchorElement>, page: number) => {
     if (onPageChange) {
       e.preventDefault();
@@ -22,6 +25,8 @@ export const Pagination = ({ onPageChange, pageCount = 1, currentPage = 1 }: Pag
       pageCount={pageCount}
       NextPreviousLink={Link}
       currentPage={currentPage}
+      currentHref={router.pathname}
+      search={stringify(router.query)}
       renderPaginationLink={({ page, href }) => (
         <Link key={`page-${page}`} href={href} passHref legacyBehavior>
           <a

diff --git a/packages/shared-ui/components/Pagination.tsx b/packages/shared-ui/components/Pagination.tsx
@@ -9,25 +9,29 @@ type PaginationProps = {
   onPageChange?: (page: number) => void;
   NextPreviousLink: React.ElementType;
   renderPaginationLink: ({ page, href }: { page: number; href: string }) => JSX.Element;
+  currentHref: string;
+  search: string;
 };
 
 export const Pagination = ({
   pageCount = 1,
   currentPage = 1,
   renderPaginationLink,
   NextPreviousLink,
+  currentHref,
+  search,
 }: PaginationProps) => {
-  const url = new URL(window.location.href);
-  const params = new URLSearchParams(url.search);
+  const params = new URLSearchParams(search);
   const getUrlWithPage = (pageNum: number) => {
     params.set("page", pageNum.toString());
-    return `${url.pathname}?${params}`;
+    const newUrl = `${currentHref}?${params}`;
+    return newUrl;
   };
 
   const totalPages = Array.from({ length: pageCount }, (_item, index) => index + 1);
 
-  const prevUrl = currentPage <= 2 ? url.toString() : getUrlWithPage(currentPage - 1);
-  const nextUrl = currentPage >= pageCount ? url.toString() : getUrlWithPage(currentPage + 1);
+  const prevUrl = currentPage <= 2 ? currentHref : getUrlWithPage(currentPage - 1);
+  const nextUrl = currentPage >= pageCount ? currentHref : getUrlWithPage(currentPage + 1);
 
   return (
     <motion.nav className="flex items-center justify-between text-primary" layoutId="pagination-nav">
@@ -42,7 +46,7 @@ export const Pagination = ({
       </MaybeDisabledLink>
       <div className="flex gap-x-1">
         {totalPages.map((page) =>
-          renderPaginationLink({ page, href: page === 1 ? url.toString() : getUrlWithPage(page) })
+          renderPaginationLink({ page, href: page === 1 ? currentHref : getUrlWithPage(page) })
         )}
       </div>
       <MaybeDisabledLink