✏️ Changed page to offset
To better reflect what we are doing with the pagination controls
This commit is contained in:
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user