🔎 Fixed search bar on Library page
This commit is contained in:
@@ -48,10 +48,15 @@ export const Library = (): ReactElement => {
|
|||||||
const T2Table = (tableOptions): ReactElement => {
|
const T2Table = (tableOptions): ReactElement => {
|
||||||
const { columns, totalPages, rowClickHandler } =
|
const { columns, totalPages, rowClickHandler } =
|
||||||
tableOptions;
|
tableOptions;
|
||||||
|
const [{ pageIndex, pageSize }, setPagination] =
|
||||||
|
React.useState<PaginationState>({
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 25,
|
||||||
|
})
|
||||||
|
|
||||||
// pagination methods
|
// pagination methods
|
||||||
const goToNextPage = useCallback((pageIndex, pageSize) => {
|
const goToNextPage = useCallback((pageIndex, pageSize) => {
|
||||||
|
table.setPageIndex(pageSize);
|
||||||
dispatch(
|
dispatch(
|
||||||
searchIssue(
|
searchIssue(
|
||||||
{
|
{
|
||||||
@@ -71,6 +76,8 @@ export const Library = (): ReactElement => {
|
|||||||
|
|
||||||
|
|
||||||
const goToPreviousPage = useCallback((pageIndex, pageSize) => {
|
const goToPreviousPage = useCallback((pageIndex, pageSize) => {
|
||||||
|
console.log("papsdas", pageIndex);
|
||||||
|
// table.setPageIndex(pageIndex + 1)
|
||||||
let from = 0;
|
let from = 0;
|
||||||
if (pageIndex === 2) {
|
if (pageIndex === 2) {
|
||||||
from = (pageIndex - 1) * pageSize + 2 - 27;
|
from = (pageIndex - 1) * pageSize + 2 - 27;
|
||||||
@@ -109,6 +116,18 @@ export const Library = (): ReactElement => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{/* pagination control */}
|
||||||
|
<nav className="pagination">
|
||||||
|
{pageIndex }
|
||||||
|
<div className="field has-addons">
|
||||||
|
<p className="control">
|
||||||
|
<div className="button" onClick={() => goToNextPage(table.getState().pagination.pageIndex + 1, 25)}> Next Page </div>
|
||||||
|
</p>
|
||||||
|
<p className="control">
|
||||||
|
<div className="button" onClick={() => goToPreviousPage(table.getState().pagination.pageIndex, 25)}> Previous Page</div>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
<table className="table is-hoverable">
|
<table className="table is-hoverable">
|
||||||
<thead>
|
<thead>
|
||||||
{table.getHeaderGroups().map((headerGroup, idx) => (
|
{table.getHeaderGroups().map((headerGroup, idx) => (
|
||||||
@@ -148,18 +167,7 @@ export const Library = (): ReactElement => {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{/* pagination control */}
|
|
||||||
<nav className="pagination">
|
|
||||||
{table.getState().pagination.pageIndex + 1}
|
|
||||||
<div className="field has-addons">
|
|
||||||
<p className="control">
|
|
||||||
<div className="button" onClick={() => goToNextPage(table.getState().pagination.pageIndex + 1, 25)}> Next Page </div>
|
|
||||||
</p>
|
|
||||||
<p className="control">
|
|
||||||
<div className="button" > Previous Page</div>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@@ -281,6 +289,7 @@ export const Library = (): ReactElement => {
|
|||||||
<h1 className="title">Library</h1>
|
<h1 className="title">Library</h1>
|
||||||
{/* Search bar */}
|
{/* Search bar */}
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{!isUndefined(searchResults.hits) && (
|
{!isUndefined(searchResults.hits) && (
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ export const SearchBar = (): ReactElement => {
|
|||||||
from: 0,
|
from: 0,
|
||||||
},
|
},
|
||||||
type: "volumeName",
|
type: "volumeName",
|
||||||
|
trigger: "libraryPage",
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user