Breakout pagination index text into new component

stashapp · Apr 26, 2020 · ed7169a · ed7169a
1 parent 05812ef
commit ed7169a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/ui/v2.5/src/components/List/Pagination.tsx b/ui/v2.5/src/components/List/Pagination.tsx
@@ -9,21 +9,21 @@ interface IPaginationProps {
   onChangePage: (page: number) => void;
 }
 
+interface IPaginationIndexProps {
+  itemsPerPage: number;
+  currentPage: number;
+  totalItems: number;
+  onClick?: () => void;
+}
+
 export const Pagination: React.FC<IPaginationProps> = ({
   itemsPerPage,
   currentPage,
   totalItems,
   onChangePage,
 }) => {
-  const intl = useIntl();
-
   const totalPages = Math.ceil(totalItems / itemsPerPage);
 
-  // Build the pagination index string
-  const firstItemCount:number = Math.min((currentPage-1)*itemsPerPage+1, totalItems);
-  const lastItemCount:number = Math.min(firstItemCount+(itemsPerPage-1), totalItems);
-  const indexText:string = `${intl.formatNumber(firstItemCount)}-${intl.formatNumber(lastItemCount)} of ${intl.formatNumber(totalItems)}`;
-
   let startPage: number;
   let endPage: number;
   if (totalPages <= 10) {
@@ -104,12 +104,22 @@ export const Pagination: React.FC<IPaginationProps> = ({
         <span className="d-none d-sm-inline">Last</span>
         <span className="d-inline d-sm-none">&#x300b;</span>
       </Button>
-      <Button
-        variant="secondary"
-        disabled={true}
-      >
-        {indexText}
-      </Button>
     </ButtonGroup>
   );
 };
+
+export const PaginationIndex: React.FC<IPaginationIndexProps> = ({
+  itemsPerPage,
+  currentPage,
+  totalItems,
+  onClick
+}) => {
+  const intl = useIntl();
+
+  // Build the pagination index string
+  const firstItemCount:number = Math.min((currentPage-1)*itemsPerPage+1, totalItems);
+  const lastItemCount:number = Math.min(firstItemCount+(itemsPerPage-1), totalItems);
+  const indexText:string = `${intl.formatNumber(firstItemCount)}-${intl.formatNumber(lastItemCount)} of ${intl.formatNumber(totalItems)}`;
+
+  return <span className="filter-container paginationIndex" onClick={onClick}>{indexText}</span>
+};
diff --git a/ui/v2.5/src/hooks/ListHook.tsx b/ui/v2.5/src/hooks/ListHook.tsx
@@ -24,7 +24,7 @@ import {
 } from "src/hooks/LocalForage";
 import { LoadingIndicator } from "src/components/Shared";
 import { ListFilter } from "src/components/List/ListFilter";
-import { Pagination } from "src/components/List/Pagination";
+import { Pagination, PaginationIndex } from "src/components/List/Pagination";
 import { StashService } from "src/core/StashService";
 import { Criterion } from "src/models/list-filter/criteria/criterion";
 import { ListFilterModel } from "src/models/list-filter/filter";
@@ -357,6 +357,19 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
     }
   }
 
+  function maybeRenderPaginationIndex() {
+    if (!result.loading && !result.error) {
+      return (
+        <PaginationIndex
+          itemsPerPage={filter.itemsPerPage}
+          currentPage={filter.currentPage}
+          totalItems={totalCount}
+          onClick={() => {}}
+        />
+      );
+    }
+  }
+
   function maybeRenderPagination() {
     if (!result.loading && !result.error) {
       return (
@@ -394,6 +407,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
       {(result.loading || !forageInitialised) && <LoadingIndicator />}
       {result.error && <h1>{result.error.message}</h1>}
       {maybeRenderContent()}
+      {maybeRenderPaginationIndex()}
       {maybeRenderPagination()}
     </div>
   );