179 lines
4.4 KiB
TypeScript
179 lines
4.4 KiB
TypeScript
import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
|
|
import { searchIssue } from "../../actions/fileops.actions";
|
|
import SearchBar from "../Library/SearchBar";
|
|
import T2Table from "../shared/T2Table";
|
|
import { isEmpty, isUndefined } from "lodash";
|
|
import MetadataPanel from "../shared/MetadataPanel";
|
|
|
|
export const WantedComics = (props): ReactElement => {
|
|
// const wantedComics = useSelector(
|
|
// (state: RootState) => state.fileOps.wantedComics,
|
|
// );
|
|
useEffect(() => {
|
|
// dispatch(
|
|
// searchIssue(
|
|
// {
|
|
// query: {},
|
|
// },
|
|
// {
|
|
// pagination: {
|
|
// size: 25,
|
|
// from: 0,
|
|
// },
|
|
// type: "wanted",
|
|
// trigger: "wantedComicsPage"
|
|
// },
|
|
// ),
|
|
// );
|
|
}, []);
|
|
|
|
const columnData = [
|
|
{
|
|
header: "Comic Information",
|
|
columns: [
|
|
{
|
|
header: "Details",
|
|
id: "comicDetails",
|
|
minWidth: 350,
|
|
accessorFn: (data) => data,
|
|
cell: (value) => <MetadataPanel data={value.getValue()} />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
header: "Download Status",
|
|
columns: [
|
|
{
|
|
header: "Files",
|
|
accessorKey: "acquisition",
|
|
align: "right",
|
|
cell: (props) => {
|
|
const {
|
|
directconnect: { downloads },
|
|
} = props.getValue();
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
// flexDirection: "column",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{downloads.length > 0 ? (
|
|
<span className="tag is-warning">{downloads.length}</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
header: "Download Details",
|
|
id: "downloadDetails",
|
|
accessorKey: "acquisition",
|
|
cell: (data) => (
|
|
<ol>
|
|
{data.getValue().directconnect.downloads.map((download, idx) => {
|
|
return (
|
|
<li className="is-size-7" key={idx}>
|
|
{download.name}
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
),
|
|
},
|
|
{
|
|
header: "Type",
|
|
id: "dcc",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
/**
|
|
* 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: "wanted",
|
|
trigger: "wantedComicsPage",
|
|
},
|
|
),
|
|
);
|
|
}, []);
|
|
|
|
/**
|
|
* 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: "wanted",
|
|
trigger: "wantedComicsPage",
|
|
},
|
|
),
|
|
);
|
|
}, []);
|
|
|
|
return (
|
|
<section className="container">
|
|
<div className="section">
|
|
<div className="header-area">
|
|
<h1 className="title">Wanted Comics</h1>
|
|
</div>
|
|
{!isEmpty(wantedComics) && (
|
|
<div>
|
|
<div className="library">
|
|
<T2Table
|
|
sourceData={wantedComics}
|
|
totalPages={wantedComics.length}
|
|
columns={columnData}
|
|
paginationHandlers={{
|
|
nextPage: nextPage,
|
|
previousPage: previousPage,
|
|
}}
|
|
// rowClickHandler={navigateToComicDetail}
|
|
/>
|
|
{/* pagination controls */}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WantedComics;
|