frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🖼 Building out the tabulated Wanted Comics page

Browse Source
This commit is contained in:
Rishi Ghan
2022-04-07 16:12:34 -07:00
parent c91f64239a
commit a3f076add3
3 changed files with 192 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/Library/Library.tsx
View File

@@ -8,7 +8,7 @@ import React, {
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import T2Table from "../shared/T2Table";
import { isEmpty, isNil, isNull, isUndefined } from "lodash";
import { isEmpty, isNil, isUndefined } from "lodash";
import RawFileDetails from "./RawFileDetails";
import ComicVineDetails from "./ComicVineDetails";
import SearchBar from "./SearchBar";

2
src/client/components/Library/LibraryContainer.tsx
View File

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
import { searchIssue } from "../../actions/fileops.actions";
import { Library } from "./Library";
const LibraryContainer = () => {
const LibraryContainer = (): ReactElement => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(

193
src/client/components/WantedComics/WantedComics.tsx
View File

@@ -1,8 +1,17 @@
import React, { ReactElement, useEffect } from "react";
import { useDispatch } from "react-redux";
import { isUndefined } from "lodash";
import React, { ReactElement, useEffect, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { searchIssue } from "../../actions/fileops.actions";
import Card from "../Carda";
import SearchBar from "../Library/SearchBar";
import T2Table from "../shared/T2Table";
import ellipsize from "ellipsize";
import { convert } from "html-to-text";
export const WantedComics = (props): ReactElement => {
const wantedComics = useSelector(
(state: RootState) => state.fileOps.librarySearchResults,
);
const dispatch = useDispatch();
useEffect(() => {
dispatch(
@@ -20,7 +29,185 @@ export const WantedComics = (props): ReactElement => {
),
);
}, []);
return <>Ads</>;
console.log(wantedComics);
const columnData = useMemo(
() => [
{
Header: "Comic Information",
columns: [
{
Header: "Details",
id: "comicDetails",
minWidth: 350,
accessor: (row) => {
console.log(row);
return (
<div className="columns">
<div className="column">
<div className="comic-detail issue-metadata">
<dl>
<dd>
<div className="columns mt-2">
<div className="column is-3">
{row._source.sourcedMetadata.comicvine.image
.thumb_url && (
<Card
imageUrl={
row._source.sourcedMetadata.comicvine.image
.thumb_url
}
orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
)}
</div>
<div className="column">
<dl>
<dd>
{row._source.sourcedMetadata.comicvine.name
? row._source.sourcedMetadata.comicvine.name
: "No Name"}
</dd>
<dd>
<h6 className="name has-text-weight-medium mb-1">
{
row._source.sourcedMetadata.comicvine
.volumeInformation.name
}
</h6>
</dd>
<dd className="is-size-7">
published by{" "}
<span className="has-text-weight-semibold">
{
row._source.sourcedMetadata.comicvine
.volumeInformation.publisher.name
}
</span>
</dd>
<dd className="is-size-7">
<span>
{ellipsize(
convert(
row._source.sourcedMetadata.comicvine
.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">
{
row._source.sourcedMetadata
.comicvine.volumeInformation.id
}
</span>
</span>
</div>
<div className="control">
<span className="tags has-addons">
<span className="tag">
ComicVine Id
</span>
<span className="tag is-success is-light">
{
row._source.sourcedMetadata
.comicvine.id
}
</span>
</span>
</div>
</div>
</dd>
</dl>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
);
},
},
],
},
{
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) && (
<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;