From be384e47fd10fc392f6423ab1939e4065452c9eb Mon Sep 17 00:00:00 2001
From: Stanislav <stasn139@gmail.com>
Date: Thu, 18 Jan 2024 09:34:39 +0000
Subject: [PATCH] Feat: As a User, I want to see more than 10 items per screen
 (#535)

---
 explorer/src/assets/locales/en/en.json        |  3 +-
 .../Pagination/PerPageSelector/index.tsx      | 38 +++++++++++++++++++
 explorer/src/components/Pagination/index.tsx  | 22 +++++++++--
 explorer/src/enums/queryParams.ts             |  1 +
 explorer/src/pages/Attestations/index.tsx     | 11 +++---
 explorer/src/pages/Modules/index.tsx          | 13 ++++---
 explorer/src/pages/Schemas/index.tsx          | 15 +++++---
 explorer/src/utils/paginationUtils.ts         |  4 +-
 8 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 explorer/src/components/Pagination/PerPageSelector/index.tsx

diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json
index 431ff20c..84c29790 100644
--- a/explorer/src/assets/locales/en/en.json
+++ b/explorer/src/assets/locales/en/en.json
@@ -26,7 +26,8 @@
       "noResults": "No Results",
       "hasntBeenFound": "hasn`t been found",
       "searchNotFound": "Nothing found on <bold>“{{search}}”</bold> search request",
-      "searchFound": "<bold>{{count}}</bold> results found on <bold>“{{search}}”</bold> search request"
+      "searchFound": "<bold>{{count}}</bold> results found on <bold>“{{search}}”</bold> search request",
+      "perPage": "per page"
     },
     "routes": {
       "issuers": "Issuers",
diff --git a/explorer/src/components/Pagination/PerPageSelector/index.tsx b/explorer/src/components/Pagination/PerPageSelector/index.tsx
new file mode 100644
index 00000000..dbb634d8
--- /dev/null
+++ b/explorer/src/components/Pagination/PerPageSelector/index.tsx
@@ -0,0 +1,38 @@
+import { ChevronDown } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface PerPageSelectorProps {
+  onChange: (val: string | number) => void;
+  values: string[] | number[];
+  value: string | number;
+}
+
+export const PerPageSelector: React.FC<PerPageSelectorProps> = ({ onChange, values, value }) => {
+  return (
+    <div>
+      <DropdownMenu>
+        <DropdownMenuTrigger className="DropdownMenuTrigger flex items-center justify-center border text-xs font-semibold text-text-primary dark:text-whiteDefault outline-none w-16 h-8 px-2 rounded-md outline-none dark:border-greyDark hover:border-border-inputFocus dark:focus:border-border-inputFocus dark:hover:border-border-inputFocus rounded-lg transition">
+          {value}
+          <ChevronDown className="header-arrow ml-1 w-5 h-6 relative" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="flex flex-col-reverse gap-2 bg-surface-primary dark:bg-blackDefault dark:border-border-cardDark">
+          {values.map((number) => (
+            <DropdownMenuItem
+              key={number}
+              className="flex gap-2 focus:bg-jumbotronLight dark:focus:bg-jumbotronDark dark:text-whiteDefault cursor-pointer transition"
+              onClick={() => onChange(number)}
+            >
+              {number}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
diff --git a/explorer/src/components/Pagination/index.tsx b/explorer/src/components/Pagination/index.tsx
index ab333b02..0792c70b 100644
--- a/explorer/src/components/Pagination/index.tsx
+++ b/explorer/src/components/Pagination/index.tsx
@@ -1,6 +1,6 @@
 import { t } from "i18next";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { ITEMS_PER_PAGE_DEFAULT } from "@/constants";
@@ -9,20 +9,26 @@ import { displayAmountWithComma } from "@/utils/amountUtils";
 import { pageBySearchParams } from "@/utils/paginationUtils";
 
 import { IPaginationProps } from "./interface";
+import { PerPageSelector } from "./PerPageSelector";
 
 export const Pagination = ({ itemsCount, handlePage }: IPaginationProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const currentPage = pageBySearchParams(searchParams, itemsCount);
+  const [itemsPerPage, setItemsPerPage] = useState<string | number>(
+    Number(searchParams.get(EQueryParams.ITEMS_PER_PAGE)) || ITEMS_PER_PAGE_DEFAULT,
+  );
+  const currentPage = pageBySearchParams(searchParams, itemsCount, Number(itemsPerPage));
 
   useEffect(() => {
     handlePage(currentPage);
   }, [currentPage, handlePage, searchParams]);
 
-  const totalPages = Math.ceil(itemsCount / ITEMS_PER_PAGE_DEFAULT);
+  const totalPages = Math.ceil(itemsCount / Number(itemsPerPage));
 
   const disablePrev = currentPage === 1;
   const disableNext = currentPage === totalPages;
 
+  const itemsPerPageValues = [ITEMS_PER_PAGE_DEFAULT, 20, 50, 100];
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handlePageChange = (newPage: number) => {
@@ -33,6 +39,12 @@ export const Pagination = ({ itemsCount, handlePage }: IPaginationProps) => {
     }
   };
 
+  const handleItemsPerPage = (val: number | string) => {
+    setItemsPerPage(val);
+    searchParams.set(EQueryParams.ITEMS_PER_PAGE, String(val));
+    setSearchParams(searchParams);
+  };
+
   const handleFirstPage = () => handlePageChange(1);
   const handleLastPage = () => handlePageChange(totalPages);
   const handlePreviousPage = () => handlePageChange(currentPage - 1);
@@ -85,6 +97,10 @@ export const Pagination = ({ itemsCount, handlePage }: IPaginationProps) => {
           className="w-16 h-8 px-2 border text-xs font-semibold dark:bg-transparent text-text-primary dark:text-whiteDefault text-center outline-none border-border-table dark:border-greyDark focus:border-border-inputFocus dark:focus:border-border-inputFocus rounded-lg transition"
         />
         <span className="text-slate-500 text-xs font-normal">{`of ${displayAmountWithComma(totalPages)}`}</span>
+        <PerPageSelector onChange={handleItemsPerPage} values={itemsPerPageValues} value={itemsPerPage} />
+        <span className="hidden md:inline-block text-slate-500 text-xs font-normal">
+          {t("common.messages.perPage")}
+        </span>
       </div>
       <div className="flex gap-3">
         <button
diff --git a/explorer/src/enums/queryParams.ts b/explorer/src/enums/queryParams.ts
index 266140ac..597ed184 100644
--- a/explorer/src/enums/queryParams.ts
+++ b/explorer/src/enums/queryParams.ts
@@ -2,4 +2,5 @@ export enum EQueryParams {
   PAGE = "page",
   SORT_BY_DATE = "sort_by_date",
   SEARCH_QUERY = "search_query",
+  ITEMS_PER_PAGE = "page_size",
 }
diff --git a/explorer/src/pages/Attestations/index.tsx b/explorer/src/pages/Attestations/index.tsx
index aac0194e..ac775987 100644
--- a/explorer/src/pages/Attestations/index.tsx
+++ b/explorer/src/pages/Attestations/index.tsx
@@ -33,14 +33,15 @@ export const Attestations: React.FC = () => {
   const totalItems = attestationsCount ?? ZERO;
   const page = pageBySearchParams(searchParams, totalItems);
   const sortByDateDirection = searchParams.get(EQueryParams.SORT_BY_DATE);
+  const itemsPerPage = Number(searchParams.get(EQueryParams.ITEMS_PER_PAGE)) || ITEMS_PER_PAGE_DEFAULT;
 
-  const [skip, setSkip] = useState<number>(getItemsByPage(page));
+  const [skip, setSkip] = useState<number>(getItemsByPage(page, itemsPerPage));
 
   const { data: attestationsList, isLoading } = useSWR(
-    `${SWRKeys.GET_ATTESTATION_LIST}/${skip}/${sortByDateDirection}/${chain.id}`,
+    `${SWRKeys.GET_ATTESTATION_LIST}/${itemsPerPage}/${skip}/${sortByDateDirection}/${chain.id}`,
     () =>
       sdk.attestation.findBy(
-        ITEMS_PER_PAGE_DEFAULT,
+        itemsPerPage,
         skip,
         undefined,
         "attestedDate",
@@ -49,13 +50,13 @@ export const Attestations: React.FC = () => {
   );
 
   const handlePage = (retrievedPage: number) => {
-    setSkip(getItemsByPage(retrievedPage));
+    setSkip(getItemsByPage(retrievedPage, itemsPerPage));
   };
 
   const columnsSkeletonRef = useRef(columnsSkeleton(columns(), attestationColumnsOption));
 
   const data = isLoading
-    ? { columns: columnsSkeletonRef.current, list: skeletonAttestations() }
+    ? { columns: columnsSkeletonRef.current, list: skeletonAttestations(itemsPerPage) }
     : { columns: columns({ sdk, chainId: chain.id }), list: attestationsList || [] };
 
   return (
diff --git a/explorer/src/pages/Modules/index.tsx b/explorer/src/pages/Modules/index.tsx
index f153e366..5fdc4019 100644
--- a/explorer/src/pages/Modules/index.tsx
+++ b/explorer/src/pages/Modules/index.tsx
@@ -7,6 +7,7 @@ import { Pagination } from "@/components/Pagination";
 import { ITEMS_PER_PAGE_DEFAULT, ZERO } from "@/constants";
 import { columns, moduleColumnsOption, skeletonModules } from "@/constants/columns/module";
 import { columnsSkeleton } from "@/constants/columns/skeleton";
+import { EQueryParams } from "@/enums/queryParams";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
@@ -25,20 +26,22 @@ export const Modules: React.FC = () => {
   const totalItems = modulesCount ? Number(modulesCount) : ZERO;
   const searchParams = new URLSearchParams(window.location.search);
   const page = pageBySearchParams(searchParams, totalItems);
+  const itemsPerPage = Number(searchParams.get(EQueryParams.ITEMS_PER_PAGE)) || ITEMS_PER_PAGE_DEFAULT;
 
-  const [skip, setSkip] = useState<number>(getItemsByPage(page));
+  const [skip, setSkip] = useState<number>(getItemsByPage(page, itemsPerPage));
 
-  const { data: modulesList, isLoading } = useSWR(`${SWRKeys.GET_MODULE_LIST}/${skip}/${chain.id}`, () =>
-    sdk.module.findBy(ITEMS_PER_PAGE_DEFAULT, skip),
+  const { data: modulesList, isLoading } = useSWR(
+    `${SWRKeys.GET_MODULE_LIST}/${itemsPerPage}/${skip}/${chain.id}`,
+    () => sdk.module.findBy(itemsPerPage, skip),
   );
 
   const handlePage = (retrievedPage: number) => {
-    setSkip(getItemsByPage(retrievedPage));
+    setSkip(getItemsByPage(retrievedPage, itemsPerPage));
   };
 
   const columnsSkeletonRef = useRef(columnsSkeleton(columns(), moduleColumnsOption));
   const data = isLoading
-    ? { columns: columnsSkeletonRef.current, list: skeletonModules() }
+    ? { columns: columnsSkeletonRef.current, list: skeletonModules(itemsPerPage) }
     : { columns: columns({ chainId: chain.id }), list: modulesList || [] };
 
   return (
diff --git a/explorer/src/pages/Schemas/index.tsx b/explorer/src/pages/Schemas/index.tsx
index 3acf1d76..93bdbd07 100644
--- a/explorer/src/pages/Schemas/index.tsx
+++ b/explorer/src/pages/Schemas/index.tsx
@@ -7,6 +7,7 @@ import { Pagination } from "@/components/Pagination";
 import { ITEMS_PER_PAGE_DEFAULT, ZERO } from "@/constants";
 import { columns, schemaColumnsOption, skeletonSchemas } from "@/constants/columns/schema";
 import { columnsSkeleton } from "@/constants/columns/skeleton";
+import { EQueryParams } from "@/enums/queryParams";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
@@ -26,22 +27,26 @@ export const Schemas: React.FC = () => {
   const totalItems = schemasCount ? Number(schemasCount) : ZERO;
   const searchParams = new URLSearchParams(window.location.search);
   const page = pageBySearchParams(searchParams, totalItems);
+  const itemsPerPage = Number(searchParams.get(EQueryParams.ITEMS_PER_PAGE)) || ITEMS_PER_PAGE_DEFAULT;
 
-  const [skip, setSkip] = useState<number>(getItemsByPage(page));
+  const [skip, setSkip] = useState<number>(getItemsByPage(page, itemsPerPage));
 
-  const { data: schemasList, isLoading } = useSWR(`${SWRKeys.GET_SCHEMAS_LIST}/${skip}/${chain.id}`, () =>
-    sdk.schema.findBy(ITEMS_PER_PAGE_DEFAULT, skip),
+  const { data: schemasList, isLoading } = useSWR(
+    `${SWRKeys.GET_SCHEMAS_LIST}/${itemsPerPage}/${skip}/${chain.id}`,
+    () => sdk.schema.findBy(itemsPerPage, skip),
   );
 
   const handlePage = (retrievedPage: number) => {
-    setSkip(getItemsByPage(retrievedPage));
+    setSkip(getItemsByPage(retrievedPage, itemsPerPage));
   };
 
   const columnsSkeletonRef = useRef(columnsSkeleton(columns(), schemaColumnsOption));
   const data = isLoading
-    ? { columns: columnsSkeletonRef.current, list: skeletonSchemas() }
+    ? { columns: columnsSkeletonRef.current, list: skeletonSchemas(itemsPerPage) }
     : { columns: columns(), list: schemasList || [] };
 
+  console.log("skip: ", skip, page);
+
   return (
     <div className="container mt-5 md:mt-8">
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 md:mb-8 gap-6 md:gap-0">
diff --git a/explorer/src/utils/paginationUtils.ts b/explorer/src/utils/paginationUtils.ts
index 909af41c..0d915d38 100644
--- a/explorer/src/utils/paginationUtils.ts
+++ b/explorer/src/utils/paginationUtils.ts
@@ -1,8 +1,8 @@
 import { CURRENT_PAGE_DEFAULT, ITEMS_PER_PAGE_DEFAULT, ZERO } from "@/constants";
 import { EQueryParams } from "@/enums/queryParams";
 
-export const getItemsByPage = (page: number): number =>
-  page === CURRENT_PAGE_DEFAULT ? ZERO : (page - 1) * ITEMS_PER_PAGE_DEFAULT;
+export const getItemsByPage = (page: number, itemsPerPage: number): number =>
+  page === CURRENT_PAGE_DEFAULT ? ZERO : (page - 1) * itemsPerPage;
 
 export const pageBySearchParams = (
   searchParams: URLSearchParams,