🔧 Refactoring ComicDetail and re-organizing folder structure
This commit is contained in:
276
src/client/components/ComicDetail/AcquisitionPanel.tsx
Normal file
276
src/client/components/ComicDetail/AcquisitionPanel.tsx
Normal file
@@ -0,0 +1,276 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useContext,
|
||||
ReactElement,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
search,
|
||||
downloadAirDCPPItem,
|
||||
getBundlesForComic,
|
||||
} from "../../actions/airdcpp.actions";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RootState, SearchInstance } from "threetwo-ui-typings";
|
||||
import ellipsize from "ellipsize";
|
||||
import { isEmpty, isNil, map } from "lodash";
|
||||
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
|
||||
interface IAcquisitionPanelProps {
|
||||
comicBookMetadata: any;
|
||||
}
|
||||
|
||||
export const AcquisitionPanel = (
|
||||
props: IAcquisitionPanelProps,
|
||||
): ReactElement => {
|
||||
const volumeName =
|
||||
props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name;
|
||||
const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, "");
|
||||
const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
|
||||
|
||||
// Selectors for picking state
|
||||
const airDCPPSearchResults = useSelector((state: RootState) => {
|
||||
return state.airdcpp.searchResults;
|
||||
});
|
||||
const isAirDCPPSearchInProgress = useSelector(
|
||||
(state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
|
||||
);
|
||||
const searchInfo = useSelector(
|
||||
(state: RootState) => state.airdcpp.searchInfo,
|
||||
);
|
||||
const searchInstance: SearchInstance = useSelector(
|
||||
(state: RootState) => state.airdcpp.searchInstance,
|
||||
);
|
||||
|
||||
const userSettings = useSelector((state: RootState) => state.settings.data);
|
||||
const { ADCPPSocket } = useContext(AirDCPPSocketContext);
|
||||
const dispatch = useDispatch();
|
||||
const [dcppQuery, setDcppQuery] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNil(userSettings.directConnect)) {
|
||||
// AirDC++ search query
|
||||
const dcppSearchQuery = {
|
||||
query: {
|
||||
pattern: `${sanitizedVolumeName.replace(/#/g, "")}`,
|
||||
extensions: ["cbz", "cbr"],
|
||||
},
|
||||
hub_urls: map(
|
||||
userSettings.directConnect.client.hubs,
|
||||
(item) => item.value,
|
||||
),
|
||||
priority: 5,
|
||||
};
|
||||
setDcppQuery(dcppSearchQuery);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getDCPPSearchResults = useCallback(
|
||||
async (searchQuery) => {
|
||||
dispatch(
|
||||
search(searchQuery, ADCPPSocket, {
|
||||
username: `${userSettings.directConnect.client.host.username}`,
|
||||
password: `${userSettings.directConnect.client.host.password}`,
|
||||
}),
|
||||
);
|
||||
},
|
||||
[dispatch, ADCPPSocket],
|
||||
);
|
||||
|
||||
// download via AirDC++
|
||||
const downloadDCPPResult = useCallback(
|
||||
(searchInstanceId, resultId, comicBookObjectId) => {
|
||||
dispatch(
|
||||
downloadAirDCPPItem(
|
||||
searchInstanceId,
|
||||
resultId,
|
||||
comicBookObjectId,
|
||||
ADCPPSocket,
|
||||
{
|
||||
username: `${userSettings.directConnect.client.host.username}`,
|
||||
password: `${userSettings.directConnect.client.host.password}`,
|
||||
},
|
||||
),
|
||||
);
|
||||
// this is to update the download count badge on the downloads tab
|
||||
dispatch(
|
||||
getBundlesForComic(comicBookObjectId, ADCPPSocket, {
|
||||
username: `${userSettings.directConnect.client.host.username}`,
|
||||
password: `${userSettings.directConnect.client.host.password}`,
|
||||
}),
|
||||
);
|
||||
},
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="comic-detail columns">
|
||||
{!isEmpty(ADCPPSocket) ? (
|
||||
<div className="column is-one-fifth">
|
||||
<button
|
||||
className={
|
||||
isAirDCPPSearchInProgress
|
||||
? "button is-loading is-warning"
|
||||
: "button"
|
||||
}
|
||||
onClick={() => getDCPPSearchResults(dcppQuery)}
|
||||
>
|
||||
<span className="icon is-small">
|
||||
<img src="/img/airdcpp_logo.svg" />
|
||||
</span>
|
||||
<span className="airdcpp-text">Search on AirDC++</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="column is-three-fifths">
|
||||
<article className="message is-info">
|
||||
<div className="message-body is-size-6 is-family-secondary">
|
||||
AirDC++ is not configured. Please configure it in{" "}
|
||||
<code>Settings</code>.
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
)}
|
||||
{/* AirDC++ search instance details */}
|
||||
{!isNil(searchInfo) && !isNil(searchInstance) && (
|
||||
<>
|
||||
<div className="column is-one-quarter is-size-7">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<dl>
|
||||
<dt>
|
||||
<div className="tags mb-1">
|
||||
{userSettings.directConnect.client.hubs.map(
|
||||
({ value }) => (
|
||||
<span className="tag is-warning" key={value}>
|
||||
{value}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</dt>
|
||||
<dt>Query: {searchInfo.query.pattern}</dt>
|
||||
<dd>
|
||||
Extensions: {searchInfo.query.extensions.join(", ")}
|
||||
</dd>
|
||||
<dd>File type: {searchInfo.query.file_type}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column is-one-quarter is-size-7">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<dl>
|
||||
<dt>Search Instance: {searchInstance.id}</dt>
|
||||
<dt>Owned by {searchInstance.owner}</dt>
|
||||
<dd>Expires in: {searchInstance.expires_in}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* AirDC++ results */}
|
||||
<div className="columns">
|
||||
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Slots</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{map(airDCPPSearchResults, ({ result }, idx) => {
|
||||
return (
|
||||
<tr
|
||||
key={idx}
|
||||
className={!isNil(result.dupe) ? "dupe-search-result" : ""}
|
||||
>
|
||||
<td>
|
||||
<p className="mb-2">
|
||||
{result.type.id === "directory" ? (
|
||||
<i className="fas fa-folder"></i>
|
||||
) : null}{" "}
|
||||
{ellipsize(result.name, 70)}
|
||||
</p>
|
||||
|
||||
<dl>
|
||||
<dd>
|
||||
<div className="tags">
|
||||
{!isNil(result.dupe) ? (
|
||||
<span className="tag is-warning">Dupe</span>
|
||||
) : null}
|
||||
<span className="tag is-light is-info">
|
||||
{result.users.user.nicks}
|
||||
</span>
|
||||
{result.users.user.flags.map((flag, idx) => (
|
||||
<span className="tag is-light" key={idx}>
|
||||
{flag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-light is-info">
|
||||
{result.type.id === "directory"
|
||||
? "directory"
|
||||
: result.type.str}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-success">
|
||||
{result.slots.free} free
|
||||
</span>
|
||||
<span className="tag is-light">
|
||||
{result.slots.total}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
onClick={() =>
|
||||
downloadDCPPResult(
|
||||
searchInstance.id,
|
||||
result.id,
|
||||
props.comicBookMetadata._id,
|
||||
)
|
||||
}
|
||||
>
|
||||
<i className="fas fa-file-download"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div className="column is-three-fifths">
|
||||
<article className="message is-info">
|
||||
<div className="message-body is-size-6 is-family-secondary">
|
||||
Searching via <strong>AirDC++</strong> is still in{" "}
|
||||
<strong>alpha</strong>. Some searches may take arbitrarily long,
|
||||
or may not work at all. Searches from <code>ADCS</code> hubs are
|
||||
more reliable than <code>NMDCS</code> ones.
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AcquisitionPanel;
|
||||
74
src/client/components/ComicDetail/ComicVineDetails.tsx
Normal file
74
src/client/components/ComicDetail/ComicVineDetails.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
|
||||
import dayjs from "dayjs";
|
||||
import { isUndefined } from "lodash";
|
||||
|
||||
export const ComicVineDetails = (props): ReactElement => {
|
||||
const { data, updatedAt } = props;
|
||||
return (
|
||||
<div className="content comic-detail">
|
||||
<dl>
|
||||
<dt>ComicVine Metadata</dt>
|
||||
<dd className="is-size-7">
|
||||
Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
|
||||
</dd>
|
||||
<dd>
|
||||
<h6>{data.name}</h6>
|
||||
</dd>
|
||||
{data.issue_number && (
|
||||
<dd className="mb-2">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light">Issue Number</span>
|
||||
<span className="tag is-warning">{data.issue_number}</span>
|
||||
</div>
|
||||
</dd>
|
||||
)}
|
||||
<dd>
|
||||
<div className="field is-grouped is-grouped-multiline">
|
||||
{!isUndefined(
|
||||
detectIssueTypes(data.volumeInformation.description),
|
||||
) ? (
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light">Detected Type</span>
|
||||
<span className="tag is-warning">
|
||||
{
|
||||
detectIssueTypes(data.volumeInformation.description)
|
||||
.displayName
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light">Type</span>
|
||||
<span className="tag is-warning">{data.resource_type}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light">ComicVine Issue ID</span>
|
||||
<span className="tag is-success">{data.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComicVineDetails;
|
||||
|
||||
ComicVineDetails.propTypes = {
|
||||
updatedAt: PropTypes.string,
|
||||
data: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
number: PropTypes.string,
|
||||
resource_type: PropTypes.string,
|
||||
id: PropTypes.number,
|
||||
}),
|
||||
};
|
||||
144
src/client/components/ComicDetail/DownloadsPanel.tsx
Normal file
144
src/client/components/ComicDetail/DownloadsPanel.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React, { useEffect, useContext, ReactElement } from "react";
|
||||
import {
|
||||
getDownloadProgress,
|
||||
getBundlesForComic,
|
||||
} from "../../actions/airdcpp.actions";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RootState } from "threetwo-ui-typings";
|
||||
import { isEmpty, isNil, map } from "lodash";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import dayjs from "dayjs";
|
||||
import ellipsize from "ellipsize";
|
||||
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
|
||||
|
||||
interface IDownloadsPanelProps {
|
||||
data: any;
|
||||
comicObjectId: string;
|
||||
}
|
||||
|
||||
export const DownloadsPanel = (
|
||||
props: IDownloadsPanelProps,
|
||||
): ReactElement | null => {
|
||||
const downloadProgressTick = useSelector(
|
||||
(state: RootState) => state.airdcpp.downloadProgressData,
|
||||
);
|
||||
const bundles = useSelector((state: RootState) => {
|
||||
return state.airdcpp.bundles;
|
||||
});
|
||||
|
||||
// AirDCPP Socket initialization
|
||||
const userSettings = useSelector((state: RootState) => state.settings.data);
|
||||
const { ADCPPSocket } = useContext(AirDCPPSocketContext);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
// Fetch the downloaded files and currently-downloading file(s) from AirDC++
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (!isEmpty(userSettings)) {
|
||||
dispatch(
|
||||
getBundlesForComic(props.comicObjectId, ADCPPSocket, {
|
||||
username: `${userSettings.directConnect.client.username}`,
|
||||
password: `${userSettings.directConnect.client.password}`,
|
||||
}),
|
||||
);
|
||||
dispatch(
|
||||
getDownloadProgress(props.comicObjectId, ADCPPSocket, {
|
||||
username: `${userSettings.directConnect.client.username}`,
|
||||
password: `${userSettings.directConnect.client.password}`,
|
||||
}),
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
}, [dispatch]);
|
||||
|
||||
const ProgressTick = (props) => {
|
||||
console.log("tick", props);
|
||||
return (
|
||||
<div className="column is-half">
|
||||
{JSON.stringify(props.data.downloadProgressTick)}
|
||||
<progress
|
||||
className="progress is-small is-success"
|
||||
value={props.data.downloaded_bytes}
|
||||
max={props.data.size}
|
||||
>
|
||||
{(parseInt(props.data.downloaded_bytes) / parseInt(props.data.size)) *
|
||||
100}
|
||||
%
|
||||
</progress>
|
||||
<div className="card">
|
||||
<div className="card-content is-size-7">
|
||||
<dl>
|
||||
<dt>{props.data.name}</dt>
|
||||
<dd>
|
||||
{prettyBytes(props.data.downloaded_bytes)} of{" "}
|
||||
{prettyBytes(props.data.size)}
|
||||
</dd>
|
||||
<dd>{prettyBytes(props.data.speed)} per second.</dd>
|
||||
<dd>
|
||||
Time left:
|
||||
{parseInt(props.data.seconds_left) / 60}
|
||||
</dd>
|
||||
<dd>{props.data.target}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Bundles = (props) => {
|
||||
return (
|
||||
<table className="table is-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Filename</th>
|
||||
<th>Size</th>
|
||||
<th>Download Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!isNil(props.data) &&
|
||||
props.data &&
|
||||
map(props.data, (bundle) => (
|
||||
<tr key={bundle.id}>
|
||||
<td>
|
||||
<h5>{ellipsize(bundle.name, 58)}</h5>
|
||||
<span className="is-size-7">{bundle.target}</span>
|
||||
</td>
|
||||
<td>{prettyBytes(bundle.size)}</td>
|
||||
<td>
|
||||
{dayjs
|
||||
.unix(bundle.time_finished)
|
||||
.format("h:mm on ddd, D MMM, YYYY")}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
return !isNil(props.data) ? (
|
||||
<div className="columns">
|
||||
{!isNil(downloadProgressTick) ? (
|
||||
<ProgressTick data={downloadProgressTick} />
|
||||
) : null}
|
||||
{!isEmpty(ADCPPSocket) ? (
|
||||
<Bundles data={bundles} />
|
||||
) : (
|
||||
<div className="column is-three-fifths">
|
||||
<article className="message is-info">
|
||||
<div className="message-body is-size-6 is-family-secondary">
|
||||
AirDC++ is not configured. Please configure it in{" "}
|
||||
<code>Settings</code>.
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default DownloadsPanel;
|
||||
52
src/client/components/ComicDetail/RawFileDetails.tsx
Normal file
52
src/client/components/ComicDetail/RawFileDetails.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
|
||||
export const RawFileDetails = (props): ReactElement => {
|
||||
const { data } = props;
|
||||
return (
|
||||
<div className="content comic-detail">
|
||||
<dl>
|
||||
<dt>Raw File Details</dt>
|
||||
<dd className="is-size-7">
|
||||
{data.containedIn + "/" + data.name + data.extension}
|
||||
</dd>
|
||||
<dd>
|
||||
<div className="field is-grouped">
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag">Size</span>
|
||||
<span className="tag is-info is-light">
|
||||
{prettyBytes(data.fileSize)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag">Extension</span>
|
||||
<span className="tag is-primary is-light">
|
||||
{data.extension}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RawFileDetails;
|
||||
|
||||
RawFileDetails.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
containedIn: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
fileSize: PropTypes.number,
|
||||
path: PropTypes.string,
|
||||
extension: PropTypes.string,
|
||||
cover: PropTypes.shape({
|
||||
filePath: PropTypes.string,
|
||||
}),
|
||||
}),
|
||||
};
|
||||
58
src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
Normal file
58
src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React, { ReactElement } from "react";
|
||||
|
||||
export const VolumeInformation = (props): ReactElement => {
|
||||
const { data } = props;
|
||||
const createDescriptionMarkup = (html) => {
|
||||
return { __html: html };
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={1}>
|
||||
<div className="columns">
|
||||
<div className="column is-narrow">
|
||||
<figure className="card-image">
|
||||
<img
|
||||
src={
|
||||
data.sourcedMetadata.comicvine.volumeInformation.image.thumb_url
|
||||
}
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div className="column is-4">
|
||||
<dl>
|
||||
<dt>
|
||||
Is a part of{" "}
|
||||
<span className="has-text-info">
|
||||
{data.sourcedMetadata.comicvine.volumeInformation.name}
|
||||
</span>
|
||||
</dt>
|
||||
<dd>
|
||||
Published by
|
||||
<span className="has-text-weight-semibold">
|
||||
{" "}
|
||||
{
|
||||
data.sourcedMetadata.comicvine.volumeInformation.publisher
|
||||
.name
|
||||
}
|
||||
</span>
|
||||
</dd>
|
||||
<dd>
|
||||
Total issues in this volume:
|
||||
{data.sourcedMetadata.comicvine.volumeInformation.count_of_issues}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="columns">
|
||||
<div
|
||||
className="column is-three-quarters"
|
||||
dangerouslySetInnerHTML={createDescriptionMarkup(
|
||||
data.sourcedMetadata.comicvine.volumeInformation.description,
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VolumeInformation;
|
||||
Reference in New Issue
Block a user