Digg 167 beta

components/content/ListPage/index.tsx

@@ -1,30 +1,34 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect } from "react";
 import { usePathname } from "next/navigation";
 import { useMatomo } from "@datapunt/matomo-tracker-react";
 import { Container } from "@/components/layout/Container";
 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, NextRouter } from "next/router";
 
 export const ListPage: FC<PublicationListResponse> = ({
   publications,
   heading,
 }) => {
-  const [pageNumber, setPageNumber] = useState(0);
   const { trackPageView } = useMatomo();
   const pathname = usePathname();
+  const router: NextRouter = useRouter();
   const publicationsPerPage = 12;
-  const articlesVisited = pageNumber * publicationsPerPage;
-  const publicationsOnPage = publications.slice(
-    articlesVisited,
-    articlesVisited + publicationsPerPage,
-  );
+  const page = parseInt(router.query.page as string) || 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>
@@ -36,15 +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}
-            setPageNumber={setPageNumber}
-          />
+          {router.isReady && (
+            <Pagination
+              totalResults={publications.length || 0}
+              itemsPerPage={publicationsPerPage}
+              pageNumber={parseInt(router.query.page as string)}
+              changePage={changePage}
+            />
+          )}
         </div>
       </Container>
     </div>

components/content/Search/SearchPage/SearchContentPage/index.tsx

@@ -23,10 +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(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),
@@ -122,7 +121,7 @@ export const SearchContentPage: FC<SearchProps> = () => {
   });
 
   useEffect(() => {
-    router.query.p = (1 + pageNumber).toString();
+    router.query.p = pageNumber.toString();
     router.push(router);
     clearCurrentScrollPos();
     window.scrollTo({
@@ -131,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]);
@@ -258,9 +267,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>

components/content/Search/SearchResults/index.tsx

@@ -92,6 +92,7 @@ const SortingOptions: React.FC<{
       <Select
         id="sort"
         label={t("pages|search$sort")}
+        value={search.request.sortOrder}
         onChange={(event) => {
           event.preventDefault();
           clearCurrentScrollPos();
@@ -123,6 +124,7 @@ const SortingOptions: React.FC<{
       <Select
         id="hits"
         label={t("pages|search$numberofhits")}
+        value={search.request.take}
         onChange={(event) => {
           event?.preventDefault();
           clearCurrentScrollPos();
@@ -157,7 +159,6 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
   search,
   searchMode,
 }) => {
-  const [pageNumber, setPageNumber] = useState(0);
   const [isCompact, setCompact] = useState(false);
   const { trackEvent } = useMatomo();
   const { t } = useTranslation();
@@ -187,12 +188,12 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
     else setCompact(true);
   });
 
-  useEffect(() => {
+  const changePage = (page: number) => {
     if (search.result.pages || 0 > 1) {
       clearCurrentScrollPos();
       search
         .set({
-          page: pageNumber || 0,
+          page: page - 1,
         })
         .then(() => search.doSearch());
       window.scrollTo({
@@ -201,8 +202,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">
@@ -307,9 +307,10 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
       )}
       {(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>

components/global/Pagination/index.tsx

@@ -1,30 +1,27 @@
 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/navigation";
-import { usePathname } from "next/navigation";
-
+import { useState, useEffect, Dispatch, FC } from "react";
 type Pagination = {
-  searchResult: number | any;
+  totalResults: number | any;
   itemsPerPage: number;
-  setPageNumber: Dispatch<SetStateAction<number>>;
+  pageNumber: number | undefined;
+  changePage: Dispatch<number>;
 };
 
 export const Pagination: FC<Pagination> = ({
-  searchResult,
+  totalResults,
   itemsPerPage,
-  setPageNumber,
+  pageNumber,
+  changePage,
 }) => {
-  const [currentPage, setCurrentPage] = useState(1);
   const [screenSize, setScreenSize] = useState(false);
-  const totalPages: number = Math.ceil(searchResult / itemsPerPage);
+  const totalPages: number = Math.ceil(totalResults / itemsPerPage);
+  const { t } = useTranslation();
+  const [currentPage, setCurrentPage] = useState(pageNumber ? pageNumber : 1);
   const firstOnCurrentPage =
-    currentPage === 1 ? 1 : (currentPage - 1) * itemsPerPage;
+    currentPage === 1 ? 1 : (currentPage - 1) * itemsPerPage + 1;
   const lastOnCurrentPage =
-    currentPage === totalPages ? searchResult : itemsPerPage * currentPage;
-  const { t } = useTranslation();
-  const { push } = useRouter();
-  const pathname = usePathname();
+    currentPage === currentPage ? totalResults : itemsPerPage * currentPage;
   const pageSpace: string = "...";
   const numbersArray: number[] = Array.from(
     { length: totalPages },
@@ -52,7 +49,7 @@ export const Pagination: FC<Pagination> = ({
       } else return numbersArray;
     }
     if (totalPages > 7) {
-      if (currentPage > 3 && currentPage < totalPages - 3) {
+      if (currentPage > 3 && currentPage < totalPages - 2) {
         return [
           1,
           pageSpace,
@@ -63,36 +60,40 @@ export const Pagination: FC<Pagination> = ({
           totalPages,
         ];
       }
-      if (currentPage >= totalPages - 4) {
-        return [1, pageSpace, ...numbersArray.slice(-5)];
+      if (currentPage >= totalPages - 2) {
+        return [
+          1,
+          pageSpace,
+          ...numbersArray.slice(currentPage === totalPages - 2 ? -4 : -3),
+        ];
       } else {
-        return [...numbersArray.slice(0, 5), pageSpace, totalPages];
+        return [
+          ...numbersArray.slice(0, currentPage === 3 ? 4 : 3),
+          pageSpace,
+          totalPages,
+        ];
       }
     } else return numbersArray;
   };
 
-  useEffect(() => {
-    if (pathname !== "/") {
-      setPageNumber(currentPage - 1);
-      currentPage !== 1
-        ? push(`?page=${currentPage}`, { scroll: false })
-        : push("", { scroll: false });
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    }
-  }, [currentPage]);
+  const changePageNumber = (page: number) => {
+    changePage(page);
+    setCurrentPage(page);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
 
   return (
     <div
       className={`${
         totalPages <= 1 ? "hidden" : "flex"
-      }  mt-xl w-full flex-col items-center justify-between gap-md md:flex-row md:gap-none`}
+      }  mt-xl w-full flex-col items-center justify-between gap-lg lg:flex-row lg:gap-none`}
     >
       <span>
         {t("pages|search$showing")}
         <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">
@@ -110,8 +111,12 @@ export const Pagination: FC<Pagination> = ({
         </button>
         {pagination().map((value: any, idx: number) => (
           <button
+            onClick={
+              value === "..." || value === currentPage
+                ? () => null
+                : () => changePageNumber(value)
+            }
             tabIndex={value === "..." || value === currentPage ? -1 : 0}
-            onClick={value === "..." ? () => null : () => setCurrentPage(value)}
             key={idx}
             className={`focus--in focus-visible:bg-brown-200 ${
               value === currentPage