🔧 Refactored the T2Table component with the new pagination controls
This commit is contained in:
@@ -3,22 +3,11 @@ 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 SearchBar from "./SearchBar";
|
import T2Table from "../shared/T2Table";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { searchIssue } from "../../actions/fileops.actions";
|
import { searchIssue } from "../../actions/fileops.actions";
|
||||||
import ellipsize from "ellipsize";
|
import ellipsize from "ellipsize";
|
||||||
|
|
||||||
import {
|
|
||||||
ColumnDef,
|
|
||||||
flexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
|
||||||
useReactTable,
|
|
||||||
PaginationState,
|
|
||||||
} from "@tanstack/react-table";
|
|
||||||
|
|
||||||
|
|
||||||
export const Library = (): ReactElement => {
|
export const Library = (): ReactElement => {
|
||||||
const searchResults = useSelector(
|
const searchResults = useSelector(
|
||||||
(state: RootState) => state.fileOps.libraryComics,
|
(state: RootState) => state.fileOps.libraryComics,
|
||||||
@@ -45,173 +34,6 @@ export const Library = (): ReactElement => {
|
|||||||
);
|
);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const [{ pageIndex, pageSize }, setPagination] =
|
|
||||||
React.useState<PaginationState>({
|
|
||||||
pageIndex: 1,
|
|
||||||
pageSize: 15,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const pagination = React.useMemo(
|
|
||||||
() => ({
|
|
||||||
pageIndex,
|
|
||||||
pageSize,
|
|
||||||
}),
|
|
||||||
[pageIndex, pageSize]
|
|
||||||
);
|
|
||||||
|
|
||||||
const T2Table = (tableOptions): ReactElement => {
|
|
||||||
const { columns, totalPages, rowClickHandler } =
|
|
||||||
tableOptions;
|
|
||||||
|
|
||||||
// pagination methods
|
|
||||||
const goToNextPage = useCallback(() => {
|
|
||||||
setPagination({
|
|
||||||
pageIndex: pageIndex + 1,
|
|
||||||
pageSize,
|
|
||||||
});
|
|
||||||
dispatch(
|
|
||||||
searchIssue(
|
|
||||||
{
|
|
||||||
query: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pagination: {
|
|
||||||
size: pageSize,
|
|
||||||
from: pageSize * pageIndex + 1,
|
|
||||||
},
|
|
||||||
type: "all",
|
|
||||||
trigger: "libraryPage",
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
|
||||||
const goToPreviousPage = useCallback(() => {
|
|
||||||
setPagination({
|
|
||||||
pageIndex: pageIndex - 1,
|
|
||||||
pageSize,
|
|
||||||
});
|
|
||||||
let from = 0;
|
|
||||||
if (pageIndex === 2) {
|
|
||||||
from = (pageIndex - 1) * pageSize + 2 - 17;
|
|
||||||
} else {
|
|
||||||
from = (pageIndex - 1) * pageSize + 2 - 16;
|
|
||||||
}
|
|
||||||
dispatch(
|
|
||||||
searchIssue(
|
|
||||||
{
|
|
||||||
query: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pagination: {
|
|
||||||
size: pageSize,
|
|
||||||
from,
|
|
||||||
},
|
|
||||||
type: "all",
|
|
||||||
trigger: "libraryPage"
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
data: searchResults.hits.hits,
|
|
||||||
columns,
|
|
||||||
manualPagination: true,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
pageCount: searchResults?.hits?.hits?.length ?? -1,
|
|
||||||
state: {
|
|
||||||
pagination,
|
|
||||||
},
|
|
||||||
onPaginationChange: setPagination,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="columns table-controls">
|
|
||||||
{/* Search bar */}
|
|
||||||
<div className="column is-half">
|
|
||||||
<SearchBar />
|
|
||||||
</div>
|
|
||||||
{/* pagination controls */}
|
|
||||||
<nav className="pagination columns">
|
|
||||||
<div className="mr-4 has-text-weight-semibold has-text-left">
|
|
||||||
<p className="is-size-5">Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
|
|
||||||
{/* <p>{totalPages} comics in all</p> */}
|
|
||||||
</div>
|
|
||||||
<div className="field has-addons">
|
|
||||||
<p className="control">
|
|
||||||
<div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
|
|
||||||
</p>
|
|
||||||
<p className="control">
|
|
||||||
<div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="field has-addons ml-5">
|
|
||||||
<p className="control">
|
|
||||||
<button className="button">
|
|
||||||
<span className="icon is-small">
|
|
||||||
<i className="fa-solid fa-list"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
<p className="control">
|
|
||||||
<button className="button">
|
|
||||||
<Link to="/library-grid">
|
|
||||||
<span className="icon is-small">
|
|
||||||
<i className="fa-solid fa-image"></i>
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<table className="table is-hoverable">
|
|
||||||
<thead>
|
|
||||||
{table.getHeaderGroups().map((headerGroup, idx) => (
|
|
||||||
<tr key={headerGroup.id}>
|
|
||||||
{headerGroup.headers.map((header, idx) => (
|
|
||||||
<th
|
|
||||||
key={header.id}
|
|
||||||
colSpan={header.colSpan}
|
|
||||||
>
|
|
||||||
{header.isPlaceholder
|
|
||||||
? null
|
|
||||||
: flexRender(
|
|
||||||
header.column.columnDef.header,
|
|
||||||
header.getContext()
|
|
||||||
)}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
{table.getRowModel().rows.map((row, idx) => {
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
key={row.id}
|
|
||||||
onClick={() => rowClickHandler(row)}
|
|
||||||
>
|
|
||||||
{row.getVisibleCells().map(cell => (
|
|
||||||
<td key={cell.id}>
|
|
||||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// programatically navigate to comic detail
|
// programatically navigate to comic detail
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const navigateToComicDetail = (row) => {
|
const navigateToComicDetail = (row) => {
|
||||||
@@ -316,11 +138,69 @@ export const Library = (): ReactElement => {
|
|||||||
}
|
}
|
||||||
], []);
|
], []);
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination control that fetches the next x (pageSize) items
|
||||||
|
* based on the y (pageIndex) offset from the Elasticsearch index
|
||||||
|
* @param {number} pageIndex
|
||||||
|
* @param {number} pageSize
|
||||||
|
* @returns void
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
const nextPage = useCallback((pageIndex: number, pageSize: number) => {
|
||||||
|
dispatch(
|
||||||
|
searchIssue(
|
||||||
|
{
|
||||||
|
query: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pagination: {
|
||||||
|
size: pageSize,
|
||||||
|
from: pageSize * pageIndex + 1,
|
||||||
|
},
|
||||||
|
type: "all",
|
||||||
|
trigger: "libraryPage",
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination control that fetches the previous x (pageSize) items
|
||||||
|
* based on the y (pageIndex) offset from the Elasticsearch index
|
||||||
|
* @param {number} pageIndex
|
||||||
|
* @param {number} pageSize
|
||||||
|
* @returns void
|
||||||
|
**/
|
||||||
|
const previousPage = useCallback((pageIndex: number, pageSize: number) => {
|
||||||
|
let from = 0;
|
||||||
|
if (pageIndex === 2) {
|
||||||
|
from = (pageIndex - 1) * pageSize + 2 - 17;
|
||||||
|
} else {
|
||||||
|
from = (pageIndex - 1) * pageSize + 2 - 16;
|
||||||
|
}
|
||||||
|
dispatch(
|
||||||
|
searchIssue(
|
||||||
|
{
|
||||||
|
query: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pagination: {
|
||||||
|
size: pageSize,
|
||||||
|
from,
|
||||||
|
},
|
||||||
|
type: "all",
|
||||||
|
trigger: "libraryPage"
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
// ImportStatus.propTypes = {
|
// ImportStatus.propTypes = {
|
||||||
// value: PropTypes.bool.isRequired,
|
// value: PropTypes.bool.isRequired,
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="container">
|
<section className="container">
|
||||||
<div className="section">
|
<div className="section">
|
||||||
@@ -333,10 +213,13 @@ export const Library = (): ReactElement => {
|
|||||||
<T2Table
|
<T2Table
|
||||||
totalPages={searchResults.hits.total.value}
|
totalPages={searchResults.hits.total.value}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
|
sourceData={searchResults?.hits?.hits}
|
||||||
rowClickHandler={navigateToComicDetail}
|
rowClickHandler={navigateToComicDetail}
|
||||||
|
paginationHandlers={{
|
||||||
|
nextPage,
|
||||||
|
previousPage,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
{/* pagination controls */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import React, { ReactElement, useState } from "react";
|
import React, { ReactElement, useMemo, useState } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
|
import SearchBar from "../Library/SearchBar";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
flexRender,
|
flexRender,
|
||||||
@@ -10,35 +12,102 @@ import {
|
|||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
|
|
||||||
export const T2Table = (tableOptions): ReactElement => {
|
export const T2Table = (tableOptions): ReactElement => {
|
||||||
const { rowData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
|
const { sourceData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
|
||||||
tableOptions;
|
tableOptions;
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
data: rowData,
|
|
||||||
columns,
|
|
||||||
manualPagination: true,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
getFilteredRowModel: getFilteredRowModel(),
|
|
||||||
pageCount: totalPages,
|
|
||||||
// getPaginationRowModel: getPaginationRowModel(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const [{ pageIndex, pageSize }, setPagination] =
|
const [{ pageIndex, pageSize }, setPagination] =
|
||||||
React.useState<PaginationState>({
|
useState<PaginationState>({
|
||||||
pageIndex: 0,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 15,
|
||||||
})
|
});
|
||||||
|
|
||||||
const pagination = React.useMemo(
|
|
||||||
|
const pagination = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
pageIndex,
|
pageIndex,
|
||||||
pageSize,
|
pageSize,
|
||||||
}),
|
}),
|
||||||
[pageIndex, pageSize]
|
[pageIndex, pageSize]
|
||||||
)
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination control to move forward one page
|
||||||
|
* @returns void
|
||||||
|
*/
|
||||||
|
const goToNextPage = () => {
|
||||||
|
setPagination({
|
||||||
|
pageIndex: pageIndex + 1,
|
||||||
|
pageSize,
|
||||||
|
});
|
||||||
|
nextPage(pageIndex, pageSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination control to move backward one page
|
||||||
|
* @returns void
|
||||||
|
**/
|
||||||
|
const goToPreviousPage = () => {
|
||||||
|
setPagination({
|
||||||
|
pageIndex: pageIndex - 1,
|
||||||
|
pageSize,
|
||||||
|
});
|
||||||
|
previousPage(pageIndex, pageSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: sourceData,
|
||||||
|
columns,
|
||||||
|
manualPagination: true,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
pageCount: sourceData.length ?? -1,
|
||||||
|
state: {
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<div className="columns table-controls">
|
||||||
|
{/* Search bar */}
|
||||||
|
<div className="column is-half">
|
||||||
|
<SearchBar />
|
||||||
|
</div>
|
||||||
|
{/* pagination controls */}
|
||||||
|
<nav className="pagination columns">
|
||||||
|
<div className="mr-4 has-text-weight-semibold has-text-left">
|
||||||
|
<p className="is-size-5">Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
|
||||||
|
{/* <p>{totalPages} comics in all</p> */}
|
||||||
|
</div>
|
||||||
|
<div className="field has-addons">
|
||||||
|
<p className="control">
|
||||||
|
<div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
|
||||||
|
</p>
|
||||||
|
<p className="control">
|
||||||
|
<div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="field has-addons ml-5">
|
||||||
|
<p className="control">
|
||||||
|
<button className="button">
|
||||||
|
<span className="icon is-small">
|
||||||
|
<i className="fa-solid fa-list"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
<p className="control">
|
||||||
|
<button className="button">
|
||||||
|
<Link to="/library-grid">
|
||||||
|
<span className="icon is-small">
|
||||||
|
<i className="fa-solid fa-image"></i>
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
<table className="table is-hoverable">
|
<table className="table is-hoverable">
|
||||||
<thead>
|
<thead>
|
||||||
{table.getHeaderGroups().map((headerGroup, idx) => (
|
{table.getHeaderGroups().map((headerGroup, idx) => (
|
||||||
@@ -77,21 +146,12 @@ export const T2Table = (tableOptions): ReactElement => {
|
|||||||
})}
|
})}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{/* pagination control */}
|
|
||||||
<nav className="pagination">
|
|
||||||
{table.getState().pagination.pageIndex + 1}
|
|
||||||
|
|
||||||
<div className="button" onClick={() => table.nextPage()}> Next Page </div>
|
|
||||||
<div className="button" onClick={previousPage}> Previous Page</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
T2Table.propTypes = {
|
T2Table.propTypes = {
|
||||||
rowData: PropTypes.array,
|
sourceData: PropTypes.array,
|
||||||
totalPages: PropTypes.number,
|
totalPages: PropTypes.number,
|
||||||
columns: PropTypes.array,
|
columns: PropTypes.array,
|
||||||
paginationHandlers: PropTypes.shape({
|
paginationHandlers: PropTypes.shape({
|
||||||
|
|||||||
Reference in New Issue
Block a user