🏗️ Continued refactoring of PullList, Volumes etc.
This commit is contained in:
@@ -6,14 +6,9 @@ import { VolumeGroups } from "./VolumeGroups";
|
||||
import { LibraryStatistics } from "./LibraryStatistics";
|
||||
import { PullList } from "./PullList";
|
||||
import { getLibraryStatistics } from "../../actions/comicinfo.actions";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
import Header from "../shared/Header";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import {
|
||||
LIBRARY_SERVICE_BASE_URI,
|
||||
LIBRARY_SERVICE_HOST,
|
||||
} from "../../constants/endpoints";
|
||||
import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
|
||||
|
||||
export const Dashboard = (): ReactElement => {
|
||||
const { data: recentComics } = useQuery({
|
||||
@@ -65,9 +60,7 @@ export const Dashboard = (): ReactElement => {
|
||||
// );
|
||||
return (
|
||||
<div className="container mx-auto max-w-full">
|
||||
<h1>Dashboard</h1>
|
||||
<PullList />
|
||||
|
||||
{recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
|
||||
{/* Wanted comics */}
|
||||
<WantedComicsList comics={wantedComics?.data?.docs} />
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import React, { ReactElement, useState } from "react";
|
||||
import { map } from "lodash";
|
||||
import Card from "../shared/Carda";
|
||||
import Header from "../shared/Header";
|
||||
import { importToDB } from "../../actions/fileops.actions";
|
||||
import ellipsize from "ellipsize";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import axios from "axios";
|
||||
import rateLimiter from "axios-rate-limit";
|
||||
import { setupCache } from "axios-cache-interceptor";
|
||||
@@ -12,6 +13,8 @@ import { useQuery } from "@tanstack/react-query";
|
||||
import "keen-slider/keen-slider.min.css";
|
||||
import { useKeenSlider } from "keen-slider/react";
|
||||
import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
|
||||
import { Field, Form } from "react-final-form";
|
||||
import DatePickerDialog from "../shared/DatePicker";
|
||||
|
||||
type PullListProps = {
|
||||
issues: any;
|
||||
@@ -24,6 +27,13 @@ const http = rateLimiter(axios.create(), {
|
||||
});
|
||||
const cachedAxios = setupCache(axios);
|
||||
export const PullList = (): ReactElement => {
|
||||
// datepicker
|
||||
const [selected, setSelected] = useState<Date>();
|
||||
let footer = <p>Please pick a day.</p>;
|
||||
if (selected) {
|
||||
footer = <p>You picked {format(selected, "PP")}.</p>;
|
||||
}
|
||||
|
||||
// keen slider
|
||||
const [sliderRef, instanceRef] = useKeenSlider(
|
||||
{
|
||||
@@ -47,15 +57,15 @@ export const PullList = (): ReactElement => {
|
||||
data: pullList,
|
||||
isSuccess,
|
||||
isLoading,
|
||||
isError,
|
||||
} = useQuery({
|
||||
queryFn: async () =>
|
||||
queryFn: async (): any =>
|
||||
await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
|
||||
method: "get",
|
||||
params: { startDate: "2024-2-15", pageSize: "15", currentPage: "1" },
|
||||
params: { startDate: "2024-2-20", pageSize: "15", currentPage: "1" },
|
||||
}),
|
||||
queryKey: ["pullList"],
|
||||
});
|
||||
console.log(pullList?.data.result);
|
||||
const addToLibrary = (sourceName: string, locgMetadata) =>
|
||||
importToDB(sourceName, { locg: locgMetadata });
|
||||
|
||||
@@ -65,6 +75,7 @@ export const PullList = (): ReactElement => {
|
||||
const previous = () => {
|
||||
// sliderRef.slickPrev();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="content">
|
||||
@@ -73,22 +84,28 @@ export const PullList = (): ReactElement => {
|
||||
subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
|
||||
iconClassNames="fa-solid fa-binoculars mr-2"
|
||||
/>
|
||||
<div className="field is-grouped">
|
||||
<div className="flex flex-row gap-5 mb-5">
|
||||
{/* select week */}
|
||||
<div className="control">
|
||||
<div className="select is-small">
|
||||
<select>
|
||||
<option>Select Week</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
<div className="flex flex-row gap-4 my-3">
|
||||
<Form
|
||||
onSubmit={() => {}}
|
||||
render={({ handleSubmit }) => (
|
||||
<form>
|
||||
{/* week selection for pull list */}
|
||||
|
||||
<DatePickerDialog />
|
||||
</form>
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
{/* See all pull list issues */}
|
||||
<Link to={"/pull-list/all/"}>
|
||||
<button className="flex space-x-1 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500">
|
||||
View all issues
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* See all pull list issues */}
|
||||
<div className="control">
|
||||
<Link to={"/pull-list/all/"}>
|
||||
<button className="button is-small">View all issues</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -103,14 +120,19 @@ export const PullList = (): ReactElement => {
|
||||
hasDetails
|
||||
title={ellipsize(issue.name, 25)}
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<span className="text-xs ">{issue.publisher}</span>
|
||||
<button
|
||||
className=""
|
||||
onClick={() => addToLibrary("locg", issue)}
|
||||
>
|
||||
Want
|
||||
</button>
|
||||
<div className="px-1">
|
||||
<span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
{issue.publisher}
|
||||
</span>
|
||||
<div className="flex flex-row justify-end">
|
||||
<button
|
||||
className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
onClick={() => addToLibrary("locg", issue)}
|
||||
>
|
||||
<i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
|
||||
Want
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -118,6 +140,10 @@ export const PullList = (): ReactElement => {
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{isLoading ? <div>Loading...</div> : null}
|
||||
{isError ? (
|
||||
<div>An error occurred while retrieving the pull list.</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -19,6 +19,7 @@ export const VolumeGroups = (props): ReactElement => {
|
||||
headerContent="Volumes"
|
||||
subHeaderContent="Based on ComicVine Volume information"
|
||||
iconClassNames="fa-solid fa-binoculars mr-2"
|
||||
link={"/volumes"}
|
||||
/>
|
||||
<div className="grid grid-cols-5 gap-6 mt-3">
|
||||
{map(deduplicatedGroups, (data) => {
|
||||
@@ -36,7 +37,7 @@ export const VolumeGroups = (props): ReactElement => {
|
||||
{ellipsize(data.volumes.name, 48)}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* issue count */}
|
||||
<span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
|
||||
|
||||
@@ -15,15 +15,14 @@ export const WantedComicsList = ({
|
||||
comics,
|
||||
}: WantedComicsListProps): ReactElement => {
|
||||
const navigate = useNavigate();
|
||||
const navigateToWantedComics = (row) => {
|
||||
navigate(`/wanted/all`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
headerContent="Wanted Comics"
|
||||
subHeaderContent="Comics marked as wanted from various sources"
|
||||
iconClassNames="fa-solid fa-binoculars mr-2"
|
||||
link={"/wanted"}
|
||||
/>
|
||||
<div className="grid grid-cols-5 gap-6 mt-3">
|
||||
{map(
|
||||
|
||||
@@ -248,7 +248,7 @@ export const Library = (): ReactElement => {
|
||||
<div>
|
||||
<section>
|
||||
<header className="bg-slate-200 dark:bg-slate-500">
|
||||
<div className="px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
|
||||
|
||||
@@ -26,7 +26,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [comicVineMetadata, setComicVineMetadata] = useState({});
|
||||
const getCVSearchResults = (searchQuery) => {
|
||||
console.log(searchQuery);
|
||||
setSearchQuery(searchQuery.search);
|
||||
// queryClient.invalidateQueries({ queryKey: ["comicvineSearchResults"] });
|
||||
};
|
||||
@@ -84,7 +83,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
|
||||
enabled: !isNil(comicVineMetadata.comicData),
|
||||
});
|
||||
|
||||
console.log(comicVineMetadata);
|
||||
const addToLibrary = (sourceName: string, comicData) =>
|
||||
setComicVineMetadata({ sourceName, comicData });
|
||||
|
||||
@@ -93,11 +91,24 @@ export const Search = ({}: ISearchProps): ReactElement => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="container">
|
||||
<div className="">
|
||||
<h1 className="">Search</h1>
|
||||
<div>
|
||||
<section>
|
||||
<header className="bg-slate-200 dark:bg-slate-500">
|
||||
<div className="px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
|
||||
Search
|
||||
</h1>
|
||||
|
||||
<p className="mt-1.5 text-sm text-gray-500 dark:text-white">
|
||||
Browse your comic book collection.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="mx-auto max-w-screen-sm px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
|
||||
<Form
|
||||
onSubmit={getCVSearchResults}
|
||||
initialValues={{
|
||||
@@ -105,116 +116,129 @@ export const Search = ({}: ISearchProps): ReactElement => {
|
||||
}}
|
||||
render={({ handleSubmit, form, submitting, pristine, values }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<Field name="search">
|
||||
{({ input, meta }) => {
|
||||
return (
|
||||
<input
|
||||
{...input}
|
||||
className="input main-search-bar is-large"
|
||||
placeholder="Type an issue/volume name"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="column">
|
||||
<button type="submit" className="button is-medium">
|
||||
<div className="flex flex-row w-full">
|
||||
<div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
|
||||
<div className="w-10 text-gray-400">
|
||||
<i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
|
||||
</div>
|
||||
|
||||
<Field name="search">
|
||||
{({ input, meta }) => {
|
||||
return (
|
||||
<input
|
||||
{...input}
|
||||
className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
|
||||
placeholder="Type an issue/volume name"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="sm:mt-0 rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
type="submit"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
/>
|
||||
{!isNil(comicVineSearchResults?.data.results) &&
|
||||
!isEmpty(comicVineSearchResults?.data.results) ? (
|
||||
<div className="">
|
||||
{comicVineSearchResults.data.results.map((result) => {
|
||||
return isSuccess ? (
|
||||
<div key={result.id} className="mb-5">
|
||||
<div className="flex flex-row">
|
||||
<div className="mr-5">
|
||||
<Card
|
||||
key={result.id}
|
||||
orientation={"cover-only"}
|
||||
imageUrl={result.image.small_url}
|
||||
hasDetails={false}
|
||||
/>
|
||||
</div>
|
||||
{!isNil(comicVineSearchResults?.data.results) &&
|
||||
!isEmpty(comicVineSearchResults?.data.results) ? (
|
||||
<div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
|
||||
{comicVineSearchResults.data.results.map((result) => {
|
||||
return isSuccess ? (
|
||||
<div key={result.id} className="mb-5">
|
||||
<div className="flex flex-row">
|
||||
<div className="mr-5">
|
||||
<Card
|
||||
key={result.id}
|
||||
orientation={"cover-only"}
|
||||
imageUrl={result.image.small_url}
|
||||
hasDetails={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="text-xl">
|
||||
{!isEmpty(result.volume.name) ? (
|
||||
result.volume.name
|
||||
) : (
|
||||
<span className="is-size-3">No Name</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="text-xl">
|
||||
{!isEmpty(result.volume.name) ? (
|
||||
result.volume.name
|
||||
) : (
|
||||
<span className="is-size-3">No Name</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="field is-grouped mt-1">
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light">Cover date</span>
|
||||
<span className="tag is-info is-light">
|
||||
{dayjs(result.cover_date).format("MMM D, YYYY")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-warning">
|
||||
{result.id}
|
||||
</span>
|
||||
</div>
|
||||
<div className="field is-grouped mt-1">
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light">Cover date</span>
|
||||
<span className="tag is-info is-light">
|
||||
{dayjs(result.cover_date).format("MMM D, YYYY")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href={result.api_detail_url}>
|
||||
{result.api_detail_url}
|
||||
</a>
|
||||
<p>
|
||||
{ellipsize(
|
||||
convert(result.description, {
|
||||
baseElements: {
|
||||
selectors: ["p", "div"],
|
||||
},
|
||||
}),
|
||||
320,
|
||||
)}
|
||||
</p>
|
||||
<div className="mt-2">
|
||||
<button
|
||||
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
onClick={() => addToLibrary("comicvine", result)}
|
||||
>
|
||||
<i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
|
||||
Mark as Wanted
|
||||
</button>
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-warning">{result.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href={result.api_detail_url}>
|
||||
{result.api_detail_url}
|
||||
</a>
|
||||
<p>
|
||||
{ellipsize(
|
||||
convert(result.description, {
|
||||
baseElements: {
|
||||
selectors: ["p", "div"],
|
||||
},
|
||||
}),
|
||||
320,
|
||||
)}
|
||||
</p>
|
||||
<div className="mt-2">
|
||||
<button
|
||||
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
onClick={() => addToLibrary("comicvine", result)}
|
||||
>
|
||||
<i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
|
||||
Mark as Wanted
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>Loading</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<article className="message is-dark is-half">
|
||||
<div className="message-body">
|
||||
<p className="mb-2">
|
||||
<span className="tag is-medium is-info is-light">
|
||||
Search the ComicVine database
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div>Loading</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-auto mx-auto max-w-screen-md px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
|
||||
<article
|
||||
role="alert"
|
||||
className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
|
||||
>
|
||||
<div>
|
||||
<p> Search the ComicVine database</p>
|
||||
<p>
|
||||
Note that you need an instance of AirDC++ already running to
|
||||
use this form to connect to it.
|
||||
</p>
|
||||
<p>
|
||||
Search and add issues, series and trade paperbacks to your
|
||||
library. Then, download them using the configured AirDC++ or
|
||||
torrent clients.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -4,124 +4,82 @@ import Card from "../shared/Carda";
|
||||
import T2Table from "../shared/T2Table";
|
||||
import ellipsize from "ellipsize";
|
||||
import { convert } from "html-to-text";
|
||||
import { isUndefined } from "lodash";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
|
||||
|
||||
export const Volumes = (props): ReactElement => {
|
||||
// const volumes = useSelector((state: RootState) => state.fileOps.volumes);
|
||||
useEffect(() => {
|
||||
// dispatch(
|
||||
// searchIssue(
|
||||
// {
|
||||
// query: {},
|
||||
// },
|
||||
// {
|
||||
// pagination: {
|
||||
// size: 25,
|
||||
// from: 0,
|
||||
// },
|
||||
// type: "volumes",
|
||||
// trigger: "volumesPage",
|
||||
// },
|
||||
// ),
|
||||
// );
|
||||
}, []);
|
||||
const {
|
||||
data: volumes,
|
||||
isSuccess,
|
||||
isError,
|
||||
isLoading,
|
||||
} = useQuery({
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
|
||||
method: "POST",
|
||||
data: {
|
||||
query: {},
|
||||
pagination: {
|
||||
size: 25,
|
||||
from: 0,
|
||||
},
|
||||
type: "volumes",
|
||||
trigger: "volumesPage",
|
||||
},
|
||||
}),
|
||||
queryKey: ["volumes"],
|
||||
});
|
||||
console.log(volumes);
|
||||
const columnData = useMemo(
|
||||
() => [
|
||||
(): any => [
|
||||
{
|
||||
header: "Volume Details",
|
||||
id: "volumeDetails",
|
||||
minWidth: 450,
|
||||
accessorKey: "_source",
|
||||
cell: (row) => {
|
||||
cell: (row): any => {
|
||||
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 className="flex flex-row gap-3 mt-5">
|
||||
<Card
|
||||
imageUrl={
|
||||
foo.sourcedMetadata.comicvine.volumeInformation.image
|
||||
.small_url
|
||||
}
|
||||
orientation={"cover-only"}
|
||||
hasDetails={false}
|
||||
/>
|
||||
<div className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg h-fit">
|
||||
<span className="text-xl mb-1">
|
||||
{foo.sourcedMetadata.comicvine.volumeInformation.name}
|
||||
</span>
|
||||
<p>
|
||||
{ellipsize(
|
||||
convert(
|
||||
foo.sourcedMetadata.comicvine.volumeInformation
|
||||
.description,
|
||||
{
|
||||
baseElements: {
|
||||
selectors: ["p"],
|
||||
},
|
||||
},
|
||||
),
|
||||
120,
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "Download Status",
|
||||
header: "Other Details",
|
||||
columns: [
|
||||
{
|
||||
header: "Files",
|
||||
header: "Downloads",
|
||||
accessorKey: "_source.acquisition.directconnect",
|
||||
align: "right",
|
||||
cell: (props) => {
|
||||
@@ -142,12 +100,34 @@ export const Volumes = (props): ReactElement => {
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "Type",
|
||||
id: "Air",
|
||||
header: "Publisher",
|
||||
accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
|
||||
cell: (props): any => {
|
||||
const row = props.getValue();
|
||||
return <div className="mt-5 text-md">{row.publisher.name}</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "Type",
|
||||
id: "dcc",
|
||||
header: "Issue Count",
|
||||
accessorKey:
|
||||
"_source.sourcedMetadata.comicvine.volumeInformation.count_of_issues",
|
||||
cell: (props): any => {
|
||||
const row = props.getValue();
|
||||
return (
|
||||
<div className="mt-5">
|
||||
{/* issue count */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--documents-minimalistic-bold-duotone] w-6 h-6"></i>
|
||||
</span>
|
||||
|
||||
<span className="text-lg text-slate-500 dark:text-slate-900">
|
||||
{row}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -155,17 +135,29 @@ export const Volumes = (props): ReactElement => {
|
||||
[],
|
||||
);
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="section">
|
||||
<div className="header-area">
|
||||
<h1 className="title">Volumes</h1>
|
||||
</div>
|
||||
{!isUndefined(volumes.hits) && (
|
||||
<div>
|
||||
<section className="">
|
||||
<header className="bg-slate-200 dark:bg-slate-500">
|
||||
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
|
||||
Volumes
|
||||
</h1>
|
||||
|
||||
<p className="mt-1.5 text-sm text-gray-500 dark:text-white">
|
||||
Browse your collection of volumes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{isSuccess ? (
|
||||
<div>
|
||||
<div className="library">
|
||||
<T2Table
|
||||
sourceData={volumes?.hits}
|
||||
totalPages={volumes.hits.length}
|
||||
sourceData={volumes?.data.hits.hits}
|
||||
totalPages={volumes?.data.hits.hits.length}
|
||||
paginationHandlers={{
|
||||
nextPage: () => {},
|
||||
previousPage: () => {},
|
||||
@@ -174,9 +166,13 @@ export const Volumes = (props): ReactElement => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
{isError ? (
|
||||
<div>An error was encountered while retrieving volumes</div>
|
||||
) : null}
|
||||
{isLoading ? <>Loading...</> : null}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,32 +1,36 @@
|
||||
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";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
|
||||
|
||||
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 {
|
||||
data: wantedComics,
|
||||
isSuccess,
|
||||
isError,
|
||||
isLoading,
|
||||
} = useQuery({
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
|
||||
method: "POST",
|
||||
data: {
|
||||
query: {},
|
||||
|
||||
pagination: {
|
||||
size: 25,
|
||||
from: 0,
|
||||
},
|
||||
type: "wanted",
|
||||
trigger: "wantedComicsPage",
|
||||
},
|
||||
}),
|
||||
queryKey: ["wantedComics"],
|
||||
enabled: true,
|
||||
});
|
||||
const columnData = [
|
||||
{
|
||||
header: "Comic Information",
|
||||
@@ -36,7 +40,10 @@ export const WantedComics = (props): ReactElement => {
|
||||
id: "comicDetails",
|
||||
minWidth: 350,
|
||||
accessorFn: (data) => data,
|
||||
cell: (value) => <MetadataPanel data={value.getValue()} />,
|
||||
cell: (value) => {
|
||||
const row = value.getValue()._source;
|
||||
return row && <MetadataPanel data={row} />;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -45,8 +52,8 @@ export const WantedComics = (props): ReactElement => {
|
||||
columns: [
|
||||
{
|
||||
header: "Files",
|
||||
accessorKey: "acquisition",
|
||||
align: "right",
|
||||
accessorKey: "_source.acquisition",
|
||||
cell: (props) => {
|
||||
const {
|
||||
directconnect: { downloads },
|
||||
@@ -69,7 +76,7 @@ export const WantedComics = (props): ReactElement => {
|
||||
{
|
||||
header: "Download Details",
|
||||
id: "downloadDetails",
|
||||
accessorKey: "acquisition",
|
||||
accessorKey: "_source.acquisition",
|
||||
cell: (data) => (
|
||||
<ol>
|
||||
{data.getValue().directconnect.downloads.map((download, idx) => {
|
||||
@@ -98,23 +105,23 @@ export const WantedComics = (props): ReactElement => {
|
||||
* @returns void
|
||||
*
|
||||
**/
|
||||
const nextPage = useCallback((pageIndex: number, pageSize: number) => {
|
||||
dispatch(
|
||||
searchIssue(
|
||||
{
|
||||
query: {},
|
||||
},
|
||||
{
|
||||
pagination: {
|
||||
size: pageSize,
|
||||
from: pageSize * pageIndex + 1,
|
||||
},
|
||||
type: "wanted",
|
||||
trigger: "wantedComicsPage",
|
||||
},
|
||||
),
|
||||
);
|
||||
}, []);
|
||||
// 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
|
||||
@@ -123,55 +130,71 @@ export const WantedComics = (props): ReactElement => {
|
||||
* @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",
|
||||
},
|
||||
),
|
||||
);
|
||||
}, []);
|
||||
// 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 className="">
|
||||
<section className="">
|
||||
<header className="bg-slate-200 dark:bg-slate-500">
|
||||
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
|
||||
Wanted Comics
|
||||
</h1>
|
||||
|
||||
<p className="mt-1.5 text-sm text-gray-500 dark:text-white">
|
||||
Browse through comics you marked as "wanted."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{isSuccess ? (
|
||||
<div>
|
||||
<div className="library">
|
||||
<T2Table
|
||||
sourceData={wantedComics}
|
||||
totalPages={wantedComics.length}
|
||||
sourceData={wantedComics?.data.hits.hits}
|
||||
totalPages={wantedComics?.data.hits.hits.length}
|
||||
columns={columnData}
|
||||
paginationHandlers={{
|
||||
nextPage: nextPage,
|
||||
previousPage: previousPage,
|
||||
nextPage: () => {},
|
||||
previousPage: () => {},
|
||||
}}
|
||||
// rowClickHandler={navigateToComicDetail}
|
||||
/>
|
||||
{/* pagination controls */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
{isLoading ? <div>Loading...</div> : null}
|
||||
{isError ? (
|
||||
<div>An error occurred while retrieving the pull list.</div>
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
103
src/client/components/shared/DatePicker.tsx
Normal file
103
src/client/components/shared/DatePicker.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import React, { ChangeEventHandler, useRef, useState } from "react";
|
||||
|
||||
import { format, isValid, parse } from "date-fns";
|
||||
import FocusTrap from "focus-trap-react";
|
||||
import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
|
||||
import { usePopper } from "react-popper";
|
||||
|
||||
export default function DatePickerDialog() {
|
||||
const [selected, setSelected] = useState<Date>();
|
||||
const [inputValue, setInputValue] = useState<string>("");
|
||||
const [isPopperOpen, setIsPopperOpen] = useState(false);
|
||||
|
||||
const popperRef = useRef<HTMLDivElement>(null);
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const popper = usePopper(popperRef.current, popperElement, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
|
||||
const closePopper = () => {
|
||||
setIsPopperOpen(false);
|
||||
buttonRef?.current?.focus();
|
||||
};
|
||||
|
||||
const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
setInputValue(e.currentTarget.value);
|
||||
const date = parse(e.currentTarget.value, "y-MM-dd", new Date());
|
||||
if (isValid(date)) {
|
||||
setSelected(date);
|
||||
} else {
|
||||
setSelected(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const handleButtonClick = () => {
|
||||
setIsPopperOpen(true);
|
||||
};
|
||||
|
||||
const handleDaySelect: SelectSingleEventHandler = (date) => {
|
||||
setSelected(date);
|
||||
if (date) {
|
||||
setInputValue(format(date, "y-MM-dd"));
|
||||
closePopper();
|
||||
} else {
|
||||
setInputValue("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div ref={popperRef}>
|
||||
<input
|
||||
size={12}
|
||||
type="text"
|
||||
placeholder={format(new Date(), "y-MM-dd")}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
aria-label="Pick a date"
|
||||
onClick={handleButtonClick}
|
||||
>
|
||||
Pick a date
|
||||
</button>
|
||||
</div>
|
||||
{isPopperOpen && (
|
||||
<FocusTrap
|
||||
active
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
allowOutsideClick: true,
|
||||
clickOutsideDeactivates: true,
|
||||
onDeactivate: closePopper,
|
||||
fallbackFocus: buttonRef.current || undefined,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
tabIndex={-1}
|
||||
style={popper.styles.popper}
|
||||
className="bg-slate-200 p-2 rounded-lg z-50"
|
||||
{...popper.attributes.popper}
|
||||
ref={setPopperElement}
|
||||
role="dialog"
|
||||
aria-label="DayPicker calendar"
|
||||
>
|
||||
<DayPicker
|
||||
initialFocus={isPopperOpen}
|
||||
mode="single"
|
||||
defaultMonth={selected}
|
||||
selected={selected}
|
||||
onSelect={handleDaySelect}
|
||||
/>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,29 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
type IHeaderProps = {
|
||||
headerContent: string;
|
||||
subHeaderContent: string;
|
||||
iconClassNames: string;
|
||||
link?: string;
|
||||
};
|
||||
|
||||
export const Header = (props: IHeaderProps): ReactElement => {
|
||||
return (
|
||||
<div className="mt-7">
|
||||
<div className="">
|
||||
<a className="" onClick={() => {}}>
|
||||
<span className="text-xl">
|
||||
<i className=""></i> {props.headerContent}
|
||||
</span>
|
||||
</a>
|
||||
{props.link ? (
|
||||
<Link to={props.link}>
|
||||
<span className="text-xl">
|
||||
<span className="underline">
|
||||
{props.headerContent}{" "}
|
||||
<i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="text-xl">{props.headerContent}</div>
|
||||
)}
|
||||
<p className="">{props.subHeaderContent}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@ interface IMetadatPanelProps {
|
||||
containerStyle: any;
|
||||
}
|
||||
export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
||||
console.log(props);
|
||||
const {
|
||||
rawFileDetails,
|
||||
inferredMetadata,
|
||||
@@ -114,7 +115,6 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
<dd className="is-size-7">
|
||||
<span>
|
||||
{ellipsize(
|
||||
@@ -127,42 +127,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
||||
)}
|
||||
</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"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{comicvine.volumeInformation.start_year}
|
||||
</span>
|
||||
<span
|
||||
className="tag is-success is-light"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{comicvine.volumeInformation.count_of_issues}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span
|
||||
className="tag is-primary is-light"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
ComicVine ID
|
||||
</span>
|
||||
<span
|
||||
className="tag is-info is-light"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{comicvine.id}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="my-3 mx-2">
|
||||
{comicvine.volumeInformation.start_year}
|
||||
</span>
|
||||
{comicvine.volumeInformation.count_of_issues}
|
||||
ComicVine ID
|
||||
{comicvine.id}
|
||||
</dd>
|
||||
</dl>
|
||||
),
|
||||
|
||||
@@ -52,12 +52,12 @@ export const Navbar2 = (): ReactElement => {
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
<Link
|
||||
to="/volumes"
|
||||
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
href="/"
|
||||
>
|
||||
Volumes
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
@@ -69,12 +69,12 @@ export const Navbar2 = (): ReactElement => {
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
<Link
|
||||
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
href="/search"
|
||||
to="/search"
|
||||
>
|
||||
Comicvine Search
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user