186 lines
6.1 KiB
TypeScript
186 lines
6.1 KiB
TypeScript
import React, { ReactElement, useEffect, useMemo } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { searchIssue } from "../../actions/fileops.actions";
|
|
import Card from "../shared/Carda";
|
|
import T2Table from "../shared/T2Table";
|
|
import ellipsize from "ellipsize";
|
|
import { convert } from "html-to-text";
|
|
import { isUndefined } from "lodash";
|
|
|
|
export const Volumes = (props): ReactElement => {
|
|
const volumes = useSelector((state: RootState) => state.fileOps.volumes);
|
|
const dispatch = useDispatch();
|
|
useEffect(() => {
|
|
dispatch(
|
|
searchIssue(
|
|
{
|
|
query: {},
|
|
},
|
|
{
|
|
pagination: {
|
|
size: 25,
|
|
from: 0,
|
|
},
|
|
type: "volumes",
|
|
trigger: "volumesPage",
|
|
},
|
|
),
|
|
);
|
|
}, []);
|
|
const columnData = useMemo(
|
|
() => [
|
|
{
|
|
header: "Volume Details",
|
|
id: "volumeDetails",
|
|
minWidth: 450,
|
|
accessorKey: "_source",
|
|
cell: (row) => {
|
|
const foo = row.getValue();
|
|
return (
|
|
<div className="columns">
|
|
<div className="column">
|
|
<div className="comic-detail issue-metadata">
|
|
<dl>
|
|
<dd>
|
|
<div className="columns mt-2">
|
|
<div className="">
|
|
<Card
|
|
imageUrl={
|
|
foo.sourcedMetadata.comicvine.volumeInformation
|
|
.image.thumb_url
|
|
}
|
|
orientation={"vertical"}
|
|
hasDetails={false}
|
|
// cardContainerStyle={{ maxWidth: 200 }}
|
|
/>
|
|
</div>
|
|
<div className="column">
|
|
<dl>
|
|
<dt>
|
|
<h6 className="name has-text-weight-medium mb-1">
|
|
{
|
|
foo.sourcedMetadata.comicvine
|
|
.volumeInformation.name
|
|
}
|
|
</h6>
|
|
</dt>
|
|
<dd className="is-size-7">
|
|
published by{" "}
|
|
<span className="has-text-weight-semibold">
|
|
{
|
|
foo.sourcedMetadata.comicvine
|
|
.volumeInformation.publisher.name
|
|
}
|
|
</span>
|
|
</dd>
|
|
|
|
<dd className="is-size-7">
|
|
<span>
|
|
{ellipsize(
|
|
convert(
|
|
foo.sourcedMetadata.comicvine
|
|
.volumeInformation.description,
|
|
{
|
|
baseElements: {
|
|
selectors: ["p"],
|
|
},
|
|
},
|
|
),
|
|
120,
|
|
)}
|
|
</span>
|
|
</dd>
|
|
|
|
<dd className="is-size-7 mt-2">
|
|
<div className="field is-grouped is-grouped-multiline">
|
|
<div className="control">
|
|
<span className="tags">
|
|
<span className="tag is-success is-light has-text-weight-semibold">
|
|
Total Issues
|
|
</span>
|
|
<span className="tag is-success is-light">
|
|
{
|
|
foo.sourcedMetadata.comicvine
|
|
.volumeInformation.count_of_issues
|
|
}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
header: "Download Status",
|
|
columns: [
|
|
{
|
|
header: "Files",
|
|
accessorKey: "_source.acquisition.directconnect",
|
|
align: "right",
|
|
cell: (props) => {
|
|
const row = props.getValue();
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{row.length > 0 ? (
|
|
<span className="tag is-warning">{row.length}</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
header: "Type",
|
|
id: "Air",
|
|
},
|
|
{
|
|
header: "Type",
|
|
id: "dcc",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
return (
|
|
<section className="container">
|
|
<div className="section">
|
|
<div className="header-area">
|
|
<h1 className="title">Volumes</h1>
|
|
</div>
|
|
{!isUndefined(volumes.hits) && (
|
|
<div>
|
|
<div className="library">
|
|
<T2Table
|
|
sourceData={volumes?.hits}
|
|
totalPages={volumes.hits.length}
|
|
paginationHandlers={{
|
|
nextPage: () => {},
|
|
previousPage: () => {},
|
|
}}
|
|
columns={columnData}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Volumes;
|