🔧 Added caching to pull list call to CV
This commit is contained in:
84
src/client/components/Dashboard/Dashboard.tsx
Normal file
84
src/client/components/Dashboard/Dashboard.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { ReactElement, useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import ZeroState from "./ZeroState";
|
||||
import { RecentlyImported } from "./RecentlyImported";
|
||||
import { VolumeGroups } from "./VolumeGroups";
|
||||
import { PullList } from "./PullList";
|
||||
import { getComicBooks } from "../../actions/fileops.actions";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
|
||||
export const Dashboard = (): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(
|
||||
getComicBooks({
|
||||
paginationOptions: {
|
||||
page: 0,
|
||||
limit: 5,
|
||||
sort: { updatedAt: "-1" },
|
||||
},
|
||||
}),
|
||||
);
|
||||
}, [dispatch]);
|
||||
const recentComics = useSelector(
|
||||
(state: RootState) => state.fileOps.recentComics,
|
||||
);
|
||||
const volumeGroups = useSelector(
|
||||
(state: RootState) => state.fileOps.comicVolumeGroups,
|
||||
);
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="section">
|
||||
<h1 className="title">Dashboard</h1>
|
||||
|
||||
{!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
|
||||
<>
|
||||
{/* Pull List */}
|
||||
<PullList issues={recentComics} />
|
||||
|
||||
{/* stats */}
|
||||
<div>
|
||||
<div className="box stats-palette p-3 column is-one-quarter">
|
||||
<dl>
|
||||
<dd className="is-size-4">
|
||||
<span className="has-text-weight-bold">113123</span> files
|
||||
</dd>
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">140</span> tagged
|
||||
with ComicVine
|
||||
</dd>
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">1304</span> with
|
||||
custom metadata
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="box stats-palette p-3 column ml-5">
|
||||
<dl>
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">1320</span> Issues
|
||||
</dd>
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">304</span> Volumes
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<RecentlyImported comicBookCovers={recentComics} />
|
||||
{!isNil(volumeGroups) ? <VolumeGroups /> : null}
|
||||
</>
|
||||
) : (
|
||||
<ZeroState
|
||||
header={"Set the source directory"}
|
||||
message={
|
||||
"No comics were found! Please point ThreeTwo! to a directory..."
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
75
src/client/components/Dashboard/PullList.tsx
Normal file
75
src/client/components/Dashboard/PullList.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { isNil, map } from "lodash";
|
||||
import React, { ReactElement, useEffect } from "react";
|
||||
import Card from "../Carda";
|
||||
import Masonry from "react-masonry-css";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { getWeeklyPullList } from "../../actions/comicinfo.actions";
|
||||
|
||||
type PullListProps = {
|
||||
issues: any;
|
||||
};
|
||||
|
||||
export const PullList = ({ issues }: PullListProps): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(getWeeklyPullList(issues));
|
||||
}, []);
|
||||
|
||||
const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
|
||||
|
||||
const breakpointColumnsObj = {
|
||||
default: 5,
|
||||
1100: 4,
|
||||
700: 2,
|
||||
600: 2,
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="content">
|
||||
<h4 className="title is-4">Discover</h4>
|
||||
<p className="subtitle is-7">
|
||||
Pull List aggregated for the week from ComicVine
|
||||
</p>
|
||||
{/* select week */}
|
||||
<div className="select is-small">
|
||||
<select>
|
||||
<option>Select Week</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* See all pull list issues */}
|
||||
<button className="button is-small">View all issues</button>
|
||||
</div>
|
||||
<Masonry
|
||||
breakpointCols={breakpointColumnsObj}
|
||||
className="recent-comics-container"
|
||||
columnClassName="recent-comics-column"
|
||||
>
|
||||
{!isNil(pullList) &&
|
||||
pullList &&
|
||||
map(pullList, (issue) => {
|
||||
return (
|
||||
<Card
|
||||
key={issue.id}
|
||||
orientation={"vertical"}
|
||||
imageUrl={issue.image.small_url}
|
||||
hasDetails
|
||||
title={issue.name}
|
||||
>
|
||||
<div className="content">
|
||||
<div className="control">
|
||||
<span className="tags has-addons">
|
||||
<span className="tag is-primary is-light">Date</span>
|
||||
<span className="tag">{issue.store_date}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</Masonry>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PullList;
|
||||
98
src/client/components/Dashboard/RecentlyImported.tsx
Normal file
98
src/client/components/Dashboard/RecentlyImported.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import Card from "../Carda";
|
||||
import { Link } from "react-router-dom";
|
||||
import ellipsize from "ellipsize";
|
||||
import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
|
||||
import { isNil, isUndefined, map } from "lodash";
|
||||
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
|
||||
import Masonry from "react-masonry-css";
|
||||
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
|
||||
|
||||
type RecentlyImportedProps = {
|
||||
comicBookCovers: any;
|
||||
};
|
||||
|
||||
export const RecentlyImported = ({
|
||||
comicBookCovers,
|
||||
}: RecentlyImportedProps): ReactElement => {
|
||||
const breakpointColumnsObj = {
|
||||
default: 5,
|
||||
1100: 4,
|
||||
700: 2,
|
||||
600: 2,
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="content">
|
||||
<h4 className="title is-4">Recently Imported</h4>
|
||||
</div>
|
||||
<Masonry
|
||||
breakpointCols={breakpointColumnsObj}
|
||||
className="recent-comics-container"
|
||||
columnClassName="recent-comics-column"
|
||||
>
|
||||
{map(
|
||||
comicBookCovers.docs,
|
||||
({ _id, rawFileDetails, sourcedMetadata }) => {
|
||||
let imagePath = "";
|
||||
let comicName = "";
|
||||
if (!isNil(rawFileDetails)) {
|
||||
const encodedFilePath = encodeURI(
|
||||
`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
|
||||
);
|
||||
imagePath = escapePoundSymbol(encodedFilePath);
|
||||
comicName = rawFileDetails.name;
|
||||
} else if (!isNil(sourcedMetadata.comicvine)) {
|
||||
imagePath = sourcedMetadata.comicvine.image.small_url;
|
||||
comicName = sourcedMetadata.comicvine.name;
|
||||
}
|
||||
const titleElement = (
|
||||
<Link to={"/comic/details/" + _id}>
|
||||
{ellipsize(comicName, 20)}
|
||||
</Link>
|
||||
);
|
||||
return (
|
||||
<Card
|
||||
key={_id}
|
||||
orientation={"vertical"}
|
||||
imageUrl={imagePath}
|
||||
hasDetails
|
||||
title={comicName ? titleElement : null}
|
||||
>
|
||||
<div className="content is-flex is-flex-direction-row">
|
||||
{!isNil(sourcedMetadata.comicvine) && (
|
||||
<span className="icon custom-icon is-small">
|
||||
<img src="/img/cvlogo.svg" />
|
||||
</span>
|
||||
)}
|
||||
{/* Raw file presence */}
|
||||
{isNil(rawFileDetails) && (
|
||||
<span className="icon custom-icon is-small has-text-danger mr-2">
|
||||
<img src="/img/missing-file.svg" />
|
||||
</span>
|
||||
)}
|
||||
{/* Issue type */}
|
||||
{!isUndefined(sourcedMetadata.comicvine) &&
|
||||
!isNil(
|
||||
detectIssueTypes(
|
||||
sourcedMetadata.comicvine.volumeInformation.description,
|
||||
),
|
||||
) ? (
|
||||
<span className="tag is-warning">
|
||||
{
|
||||
detectIssueTypes(
|
||||
sourcedMetadata.comicvine.volumeInformation
|
||||
.description,
|
||||
).displayName
|
||||
}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</Masonry>
|
||||
</>
|
||||
);
|
||||
};
|
||||
65
src/client/components/Dashboard/VolumeGroups.tsx
Normal file
65
src/client/components/Dashboard/VolumeGroups.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { isNil, map } from "lodash";
|
||||
import React, { ReactElement, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import ellipsize from "ellipsize";
|
||||
import { Link } from "react-router-dom";
|
||||
import { fetchVolumeGroups } from "../../actions/fileops.actions";
|
||||
import Masonry from "react-masonry-css";
|
||||
|
||||
export const VolumeGroups = (): ReactElement => {
|
||||
const breakpointColumnsObj = {
|
||||
default: 5,
|
||||
1100: 4,
|
||||
700: 2,
|
||||
500: 1,
|
||||
};
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(fetchVolumeGroups());
|
||||
}, [dispatch]);
|
||||
const volumeGroups = useSelector(
|
||||
(state: RootState) => state.fileOps.comicVolumeGroups,
|
||||
);
|
||||
return (
|
||||
<section className="volumes-container mt-4">
|
||||
<div className="content">
|
||||
<p className="title is-4">Volumes</p>
|
||||
<p className="subtitle is-7">Based on ComicVine Volume information</p>
|
||||
</div>
|
||||
<Masonry
|
||||
breakpointCols={breakpointColumnsObj}
|
||||
className="volumes-grid"
|
||||
columnClassName="volumes-grid-column"
|
||||
>
|
||||
{!isNil(volumeGroups) &&
|
||||
volumeGroups &&
|
||||
map(volumeGroups, (group) => {
|
||||
if (!isNil(group._id)) {
|
||||
return (
|
||||
<div className="stack" key={group._id.id}>
|
||||
<img src={group.data[0].image.small_url} />
|
||||
<div className="content">
|
||||
<div className="stack-title is-size-8">
|
||||
<Link to={`/volume/details/${group.comicBookObjectId}`}>
|
||||
{ellipsize(group.data[0].name, 18)}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="control">
|
||||
<span className="tags has-addons">
|
||||
<span className="tag is-primary is-light">Issues</span>
|
||||
<span className="tag">
|
||||
{group.data[0].count_of_issues}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</Masonry>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default VolumeGroups;
|
||||
18
src/client/components/Dashboard/ZeroState.tsx
Normal file
18
src/client/components/Dashboard/ZeroState.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import * as React from "react";
|
||||
|
||||
interface ZeroStateProps {
|
||||
header: string;
|
||||
message: string;
|
||||
}
|
||||
const ZeroState: React.FunctionComponent<ZeroStateProps> = (props) => {
|
||||
return (
|
||||
<article className="message is-info">
|
||||
<div className="message-body">
|
||||
<p>{props.header}</p>
|
||||
{props.message}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZeroState;
|
||||
Reference in New Issue
Block a user