111 lines
2.8 KiB
TypeScript
111 lines
2.8 KiB
TypeScript
import React, { ReactElement, useEffect, useMemo } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
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.librarySearchResults,
|
|
);
|
|
const dispatch = useDispatch();
|
|
useEffect(() => {
|
|
dispatch(
|
|
searchIssue(
|
|
{
|
|
query: {},
|
|
},
|
|
{
|
|
pagination: {
|
|
size: 25,
|
|
from: 0,
|
|
},
|
|
type: "wanted",
|
|
},
|
|
),
|
|
);
|
|
}, []);
|
|
const columnData = useMemo(
|
|
() => [
|
|
{
|
|
Header: "Comic Information",
|
|
columns: [
|
|
{
|
|
Header: "Details",
|
|
id: "comicDetails",
|
|
minWidth: 350,
|
|
accessor: "_source",
|
|
Cell: ({ value }) => <MetadataPanel data={value} />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
Header: "Download Status",
|
|
columns: [
|
|
{
|
|
Header: "Files",
|
|
accessor: "_source.acquisition.directconnect",
|
|
align: "right",
|
|
Cell: (props) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
// flexDirection: "column",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{props.cell.value.length > 0 ? (
|
|
<span className="tag is-warning">
|
|
{props.cell.value.length}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
Header: "Type",
|
|
id: "Air",
|
|
},
|
|
{
|
|
Header: "Type",
|
|
id: "dcc",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
return (
|
|
<section className="container">
|
|
<div className="section">
|
|
<h1 className="title">Wanted Comics</h1>
|
|
{/* Search bar */}
|
|
<SearchBar />
|
|
{!isUndefined(wantedComics.hits) && (
|
|
<div>
|
|
<div className="library">
|
|
<T2Table
|
|
rowData={wantedComics.hits.hits}
|
|
totalPages={wantedComics.hits.total.value}
|
|
columns={columnData}
|
|
// paginationHandlers={{
|
|
// nextPage: goToNextPage,
|
|
// previousPage: goToPreviousPage,
|
|
// }}
|
|
// rowClickHandler={navigateToComicDetail}
|
|
/>
|
|
{/* pagination controls */}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WantedComics;
|