✏️ Changed page to offset

To better reflect what we are doing with the pagination controls
This commit is contained in:
2023-11-16 09:00:42 -06:00
parent 3699ca8b2a
commit 199ddc2859

View File

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