109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import React, { useEffect, useContext, ReactElement } from "react";
|
|
import {
|
|
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 bundles = useSelector((state: RootState) => {
|
|
return state.airdcpp.bundles;
|
|
});
|
|
|
|
// AirDCPP Socket initialization
|
|
const userSettings = useSelector((state: RootState) => state.settings.data);
|
|
const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
|
|
|
const {
|
|
airDCPPState: { socket, settings },
|
|
} = airDCPPConfiguration;
|
|
|
|
const dispatch = useDispatch();
|
|
// Fetch the downloaded files and currently-downloading file(s) from AirDC++
|
|
useEffect(() => {
|
|
try {
|
|
if (!isEmpty(userSettings)) {
|
|
dispatch(
|
|
getBundlesForComic(props.comicObjectId, socket, {
|
|
username: `${settings.directConnect.client.host.username}`,
|
|
password: `${settings.directConnect.client.host.password}`,
|
|
}),
|
|
);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
}, [dispatch, airDCPPConfiguration]);
|
|
|
|
const Bundles = (props) => {
|
|
return !isEmpty(props.data) ? (
|
|
<div className="column is-full">
|
|
<table className="table is-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Filename</th>
|
|
<th>Size</th>
|
|
<th>Download Time</th>
|
|
<th>Bundle ID</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{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>
|
|
<td>
|
|
<span className="tag is-warning">{bundle.id}</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="column is-full"> {"No Downloads Found"} </div>
|
|
);
|
|
};
|
|
|
|
return !isNil(props.data) ? (
|
|
<>
|
|
<div className="columns is-multiline">
|
|
{!isEmpty(socket) ? (
|
|
<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;
|