From 199ddc285928afb560a1e11bc488fe74ae22c693 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 16 Nov 2023 09:00:42 -0600
Subject: [PATCH] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Changed=20page=20to=20offs?=
 =?UTF-8?q?et?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To better reflect what we are doing with the pagination controls
---
 src/client/components/Library/Library.tsx | 25 ++++++++---------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 30e948f..b81c1b1 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -1,16 +1,9 @@
-import React, {
-  useMemo,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useState,
-} from "react";
+import React, { useMemo, ReactElement, useState } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";
-import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import axios from "axios";
@@ -24,13 +17,13 @@ import axios from "axios";
  */
 export const Library = (): ReactElement => {
   // Default page state
-  // 15 issues per page, offset: 0
-  const [page, setPage] = useState(0);
+  // offset: 0
+  const [offset, setOffset] = useState(0);
   // Method to fetch paginated issues
-  const fetchIssues = async (searchQuery, page, type) => {
+  const fetchIssues = async (searchQuery, offset, type) => {
     let pagination = {
       size: 15,
-      from: page,
+      from: offset,
     };
     return await axios({
       method: "POST",
@@ -43,8 +36,8 @@ export const Library = (): ReactElement => {
     });
   };
   const { data, isLoading, isError, isPlaceholderData } = useQuery({
-    queryKey: ["comics", page],
-    queryFn: () => fetchIssues({}, page, "all"),
+    queryKey: ["comics", offset],
+    queryFn: () => fetchIssues({}, offset, "all"),
     placeholderData: keepPreviousData,
   });
 
@@ -169,7 +162,7 @@ export const Library = (): ReactElement => {
    **/
   const nextPage = (pageIndex: number, pageSize: number) => {
     if (!isPlaceholderData) {
-      setPage(pageSize * pageIndex + 1);
+      setOffset(pageSize * pageIndex + 1);
     }
   };
 
@@ -187,7 +180,7 @@ export const Library = (): ReactElement => {
     } else {
       from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
     }
-    setPage(from);
+    setOffset(from);
   };
 
   // ImportStatus.propTypes = {