122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
import React, { ReactElement, useEffect, useState } from "react";
|
|
import { getTransfers } from "../../actions/airdcpp.actions";
|
|
import { isEmpty, isNil, isUndefined } from "lodash";
|
|
import { determineCoverFile } from "../../shared/utils/metadata.utils";
|
|
import MetadataPanel from "../shared/MetadataPanel";
|
|
|
|
interface IDownloadsProps {
|
|
data: any;
|
|
}
|
|
|
|
export const Downloads = (props: IDownloadsProps): ReactElement => {
|
|
// const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
|
const {
|
|
airDCPPState: { settings, socket },
|
|
} = airDCPPConfiguration;
|
|
// const dispatch = useDispatch();
|
|
|
|
// const airDCPPTransfers = useSelector(
|
|
// (state: RootState) => state.airdcpp.transfers,
|
|
// );
|
|
// const issueBundles = useSelector(
|
|
// (state: RootState) => state.airdcpp.issue_bundles,
|
|
// );
|
|
const [bundles, setBundles] = useState([]);
|
|
// Make the call to get all transfers from AirDC++
|
|
useEffect(() => {
|
|
if (!isUndefined(socket) && !isEmpty(settings)) {
|
|
dispatch(
|
|
getTransfers(socket, {
|
|
username: `${settings.directConnect.client.host.username}`,
|
|
password: `${settings.directConnect.client.host.password}`,
|
|
}),
|
|
);
|
|
}
|
|
}, [socket]);
|
|
|
|
useEffect(() => {
|
|
if (!isUndefined(issueBundles)) {
|
|
const foo = issueBundles.data.map((bundle) => {
|
|
const {
|
|
rawFileDetails,
|
|
inferredMetadata,
|
|
acquisition: {
|
|
directconnect: { downloads },
|
|
},
|
|
sourcedMetadata: { locg, comicvine },
|
|
} = bundle;
|
|
const { issueName, url } = determineCoverFile({
|
|
rawFileDetails,
|
|
comicvine,
|
|
locg,
|
|
});
|
|
return { ...bundle, issueName, url };
|
|
});
|
|
setBundles(foo);
|
|
}
|
|
}, [issueBundles]);
|
|
|
|
return !isNil(bundles) ? (
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<section className="section">
|
|
<h1 className="title">Downloads</h1>
|
|
<div className="columns">
|
|
<div className="column is-half">
|
|
{bundles.map((bundle, idx) => {
|
|
return (
|
|
<div key={idx}>
|
|
<MetadataPanel
|
|
data={bundle}
|
|
imageStyle={{ maxWidth: 80 }}
|
|
titleStyle={{ fontSize: "0.8rem" }}
|
|
tagsStyle={{ fontSize: "0.7rem" }}
|
|
containerStyle={{
|
|
maxWidth: 400,
|
|
padding: 0,
|
|
margin: "0 0 8px 0",
|
|
}}
|
|
/>
|
|
|
|
<table className="table is-size-7">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Size</th>
|
|
<th>Type</th>
|
|
<th>Bundle ID</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{bundle.acquisition.directconnect.downloads.map(
|
|
(bundle, idx) => {
|
|
return (
|
|
<tr key={idx}>
|
|
<td>{bundle.name}</td>
|
|
<td>{bundle.size}</td>
|
|
<td>{bundle.type.str}</td>
|
|
<td>
|
|
<span className="tag is-warning">
|
|
{bundle.bundleId}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
},
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
{/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
) : (
|
|
<div>There are no downloads.</div>
|
|
);
|
|
};
|
|
|
|
export default Downloads;
|