DIGG-167: Pagination fix

diggsweden · Jan 18, 2024 · dbee740 · dbee740
1 parent cbca0da
commit dbee740
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 63 deletions.
diff --git a/components/content/ListPage/index.tsx b/components/content/ListPage/index.tsx
@@ -6,27 +6,29 @@ import { Heading } from "@/components/global/Typography/Heading";
 import { PublicationList } from "@/components/content/Publication/PublicationList";
 import { PublicationListResponse } from "@/utilities";
 import { Pagination } from "@/components/global/Pagination";
-import { useRouter } from "next/router";
+import { useRouter, NextRouter } from "next/router";
 
 export const ListPage: FC<PublicationListResponse> = ({
   publications,
   heading,
 }) => {
   const { trackPageView } = useMatomo();
   const pathname = usePathname();
-  const router = useRouter();
-  const page: any = router.query.page || 1;
+  const router: NextRouter | any = useRouter();
   const publicationsPerPage = 12;
-  const articlesVisited = (page - 1) * publicationsPerPage;
-  const publicationsOnPage = publications.slice(
-    articlesVisited,
-    articlesVisited + publicationsPerPage,
-  );
+  const page = parseInt(router.query.page) || 1;
+  const startIndex = (page - 1) * publicationsPerPage;
+  const endIndex = startIndex + publicationsPerPage;
+  const publicationsOnPage = publications.slice(startIndex, endIndex);
 
   useEffect(() => {
     trackPageView({ documentTitle: heading });
   }, [pathname]);
 
+  const changePage = (page: number) => {
+    page !== 1 ? router.push(`?page=${page}`) : router.push("");
+  };
+
   return (
     <div id="news-list" className="my-xl">
       <Container>
@@ -38,14 +40,18 @@ export const ListPage: FC<PublicationListResponse> = ({
       <Container>
         <PublicationList
           publications={publicationsOnPage}
-          heading={`${publicationsOnPage.length} ${heading}`}
+          heading={`${publications.length} ${heading}`}
         />
 
         <div className="flex justify-center">
-          <Pagination
-            searchResult={publications.length}
-            itemsPerPage={publicationsPerPage}
-          />
+          {router.isReady && (
+            <Pagination
+              totalResults={publications.length || 0}
+              itemsPerPage={publicationsPerPage}
+              pageNumber={parseInt(router.query.page)}
+              changePage={changePage}
+            />
+          )}
         </div>
       </Container>
     </div>

diff --git a/components/content/Publication/PublicationTeaser/index.tsx b/components/content/Publication/PublicationTeaser/index.tsx
@@ -43,7 +43,7 @@ export const PublicationTeaser: FC<PublicationTeaserProps> = ({
           image={image}
           className="h-[184px] w-full object-cover md:h-[240px] lg:h-[184px]"
         />
-        <div className="text-textPrimary px-md pt-lg text-sm">
+        <div className="px-md pt-lg text-sm text-textPrimary">
           <span className="text-textSecondary">
             {tag ? tag : t("pages|listpage$fallback-tag")} |{" "}
             {formatDate(lang, createdAt)}

diff --git a/components/content/Search/SearchPage/SearchContentPage/index.tsx b/components/content/Search/SearchPage/SearchContentPage/index.tsx
@@ -23,12 +23,9 @@ export const SearchContentPage: FC<SearchProps> = () => {
   const { t, lang } = useTranslation("common");
   const [query, setQuery] = useState((routerQuery?.q as string) || "");
   const [trackedQuery, setTrackedQuery] = useState("");
-  const [pageNumber, setPageNumber] = useState(
-    parseInt(routerQuery?.p as string) || 1,
-  );
   const { trackEvent } = useMatomo();
   const { trackPageView } = useMatomo();
-
+  const pageNumber = parseInt(routerQuery?.p as string) || 1;
   const [searchResult, setSearchResult] = useState<SearchResult>();
   const [searchRequest, setSearchRequest] = useState<SearchRequest>({
     page: parseInt(routerQuery?.p as string),
@@ -133,6 +130,16 @@ export const SearchContentPage: FC<SearchProps> = () => {
     });
   }, [pageNumber]);
 
+  const changePage = (page: number) => {
+    router.query.p = page.toString();
+    router.push(router);
+    clearCurrentScrollPos();
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
   useEffect(() => {
     doSearch();
   }, [searchRequest]);
@@ -259,9 +266,10 @@ export const SearchContentPage: FC<SearchProps> = () => {
         </div>
         {searchResult?.hits && (
           <Pagination
-            searchResult={searchResult?.count}
-            setPageNumber={setPageNumber}
+            totalResults={searchResult?.count || 0}
             itemsPerPage={PER_PAGE}
+            pageNumber={pageNumber}
+            changePage={changePage}
           />
         )}
       </Container>

diff --git a/components/content/Search/SearchResults/index.tsx b/components/content/Search/SearchResults/index.tsx
@@ -92,7 +92,6 @@ const SortingOptions: React.FC<{
       <Select
         id="sort"
         label={t("pages|search$sort")}
-        value={search.request.sortOrder}
         onChange={(event) => {
           event.preventDefault();
           clearCurrentScrollPos();
@@ -124,7 +123,6 @@ const SortingOptions: React.FC<{
       <Select
         id="hits"
         label={t("pages|search$numberofhits")}
-        value={search.request.take}
         onChange={(event) => {
           event?.preventDefault();
           clearCurrentScrollPos();
@@ -159,7 +157,6 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
   search,
   searchMode,
 }) => {
-  const [pageNumber, setPageNumber] = useState<number>(0);
   const [isCompact, setCompact] = useState(false);
   const { trackEvent } = useMatomo();
   const { t } = useTranslation();
@@ -189,12 +186,12 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
     else setCompact(true);
   });
 
-  useEffect(() => {
-    if (search.result.pages) {
+  const changePage = (page: number) => {
+    if (search.result.pages || 0 > 1) {
       clearCurrentScrollPos();
       search
         .set({
-          page: pageNumber - 1,
+          page: page - 1,
         })
         .then(() => search.doSearch());
       window.scrollTo({
@@ -203,8 +200,7 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
       });
       searchFocus();
     }
-  }, [pageNumber]);
-
+  };
   return (
     <div id="search-result" className="my-xl">
       <div className="mb-lg flex flex-col-reverse justify-between md:flex-row">
@@ -300,21 +296,22 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
                             ),
                           )}
                       </div>
-                    </Link>
-                  </li>
-                ))}
-            </ul>
-          </div>
-        )}
-      </div>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+          </ul>
+        </div>
+      )}
       {(search.result.pages || 0) > 1 && (
         <Pagination
-          searchResult={search.result.count}
-          setPageNumber={setPageNumber}
+          totalResults={search.result.count || 0}
           itemsPerPage={search.request.take ? search.request.take : 20}
+          pageNumber={search?.request.page && search?.request.page + 1}
+          changePage={changePage}
         />
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/components/global/Pagination/index.tsx b/components/global/Pagination/index.tsx
@@ -1,45 +1,40 @@
 import Arrow from "@/assets/icons/chevronRight.svg";
 import useTranslation from "next-translate/useTranslation";
-import { useState, useEffect, Dispatch, SetStateAction, FC } from "react";
-import { useRouter } from "next/router";
-import { usePathname } from "next/navigation";
-
+import { useState, useEffect, Dispatch, FC } from "react";
 type Pagination = {
-  searchResult: number | any;
+  totalResults: number;
   itemsPerPage: number;
-  setPageNumber?: Dispatch<SetStateAction<number>>;
+  pageNumber: number | undefined;
+  changePage: Dispatch<number>;
 };
 
 export const Pagination: FC<Pagination> = ({
-  searchResult,
+  totalResults,
   itemsPerPage,
-  setPageNumber,
+  pageNumber,
+  changePage,
 }) => {
   const [screenSize, setScreenSize] = useState(false);
-  const totalPages: number = Math.ceil(searchResult / itemsPerPage);
+  const totalPages: number = Math.ceil(totalResults / itemsPerPage);
   const { t } = useTranslation();
-  const router = useRouter();
-  const { page, p }: any = router.query;
-  const onPage = parseInt(page) || parseInt(p) || 1;
-  const [currentPage, setCurrentPage] = useState(onPage);
+  const [currentPage, setCurrentPage] = useState(pageNumber ? pageNumber : 1);
   const firstOnCurrentPage =
     currentPage === 1 ? 1 : (currentPage - 1) * itemsPerPage + 1;
   const lastOnCurrentPage =
-    currentPage === currentPage ? searchResult : itemsPerPage * currentPage;
-  const pathname = usePathname();
+    currentPage === currentPage ? totalResults : itemsPerPage * currentPage;
   const pageSpace: string = "...";
   const numbersArray: number[] = Array.from(
     { length: totalPages },
     (_, index) => index + 1,
   );
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       window.addEventListener("resize", () =>
         setScreenSize(window.innerWidth > 600 ? false : true),
       );
     }
-    setCurrentPage(onPage);
-  }, [parseInt(page)]);
+  }, []);
 
   const pagination = () => {
     if (screenSize) {
@@ -81,11 +76,8 @@ export const Pagination: FC<Pagination> = ({
     } else return numbersArray;
   };
 
-  const changePage = (page: number) => {
-    if (pathname === ("/nyheter" || "/goda-exempel")) {
-      page !== 1 ? router.push(`?page=${page}`) : router.push("");
-    }
-    setPageNumber && setPageNumber(page);
+  const changePageNumber = (page: number) => {
+    changePage(page);
     setCurrentPage(page);
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
@@ -101,7 +93,7 @@ export const Pagination: FC<Pagination> = ({
         <span className="font-strong"> {firstOnCurrentPage} </span>
         {t("common|to")}
         <span className="font-strong"> {lastOnCurrentPage} </span>
-        {t("common|of")} <span className="font-strong"> {searchResult} </span>
+        {t("common|of")} <span className="font-strong"> {totalResults} </span>
         {t("pages|search$results")}
       </span>
       <div className="flex items-center">
@@ -122,7 +114,7 @@ export const Pagination: FC<Pagination> = ({
             onClick={
               value === "..." || value === currentPage
                 ? () => null
-                : () => changePage(value)
+                : () => changePageNumber(value)
             }
             tabIndex={value === "..." || value === currentPage ? -1 : 0}
             key={idx}

diff --git a/components/navigation/MainNav/index.tsx b/components/navigation/MainNav/index.tsx
@@ -55,7 +55,7 @@ const MainNav: FC<MainNavProps> = ({ setOpenSideBar, openSideBar }) => {
           viewBox="0 0 228 44"
           className={`${
             openSearch
-              ? "2xl:w-[228px] hidden lg:block xl:w-[150px]"
+              ? "hidden lg:block xl:w-[150px] 2xl:w-[228px]"
               : "h-[32px] w-[160px] md:h-[44px] md:w-[228px] "
           } `}
         />