diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx index 8ea2357..b313857 100644 --- a/src/client/components/ComicDetail/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -236,14 +236,19 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { ), name: "Downloads", - - content: !isNil(data.data) && !isEmpty(data.data) && ( - - ), + content: + !isNil(data.data) && !isEmpty(data.data) ? ( + + ) : ( +
+
+
+ AirDC++ is not configured. Please configure it in{" "} + Settings. +
+
+
+ ), shouldShow: true, }, ]; diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx index 1898cd7..a10bcda 100644 --- a/src/client/components/ComicDetail/DownloadsPanel.tsx +++ b/src/client/components/ComicDetail/DownloadsPanel.tsx @@ -1,14 +1,19 @@ -import React, { useEffect, useContext, ReactElement } from "react"; +import React, { useEffect, useContext, ReactElement, useState } from "react"; import { getBundlesForComic } from "../../actions/airdcpp.actions"; import { RootState } from "threetwo-ui-typings"; -import { isEmpty, isNil, map } from "lodash"; +import { isArray, isEmpty, isNil, isUndefined, map } from "lodash"; import prettyBytes from "pretty-bytes"; import dayjs from "dayjs"; import ellipsize from "ellipsize"; +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; +import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints"; +import { useStore } from "../../store"; +import { useShallow } from "zustand/react/shallow"; +import { useParams } from "react-router-dom"; interface IDownloadsPanelProps { - data: any; - comicObjectId: string; + key: number; } export const DownloadsPanel = ( @@ -21,53 +26,85 @@ export const DownloadsPanel = ( // // AirDCPP Socket initialization // const userSettings = useSelector((state: RootState) => state.settings.data); // const airDCPPConfiguration = useContext(AirDCPPSocketContext); - - const { - airDCPPState: { socket, settings }, - } = airDCPPConfiguration; + const { comicObjectId } = useParams<{ comicObjectId: string }>(); + const [bundles, setBundles] = useState([]); + const { airDCPPSocketInstance } = useStore( + useShallow((state) => ({ + airDCPPSocketInstance: state.airDCPPSocketInstance, + })), + ); // 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); + const { data: comicObject, isSuccess } = useQuery({ + queryKey: ["bundles"], + queryFn: async () => + await axios({ + url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`, + method: "POST", + headers: { + "Content-Type": "application/json; charset=utf-8", + }, + data: { + id: `${comicObjectId}`, + }, + }), + }); + + const getBundles = async (comicObject) => { + if (comicObject?.data.acquisition.directconnect) { + const filteredBundles = + comicObject.data.acquisition.directconnect.downloads.map( + async ({ bundleId }) => { + return await airDCPPSocketInstance.get(`queue/bundles/${bundleId}`); + }, + ); + return await Promise.all(filteredBundles); } - }, [airDCPPConfiguration]); + }; + + useEffect(() => { + getBundles(comicObject).then((result) => { + setBundles(result); + }); + }, [isSuccess]); const Bundles = (props) => { - return !isEmpty(props.data) ? ( -
- + console.log("asdas", props); + return ( +
+
- - - - + + + + - + {map(props.data, (bundle) => ( - - + - - + - @@ -75,29 +112,15 @@ export const DownloadsPanel = (
FilenameSizeDownload TimeBundle ID + Filename + + Size + + Download Time + + Bundle ID +
+
{ellipsize(bundle.name, 58)}
{bundle.target} 		{prettyBytes(bundle.size)} + + {prettyBytes(bundle.size)} + {dayjs .unix(bundle.time_finished) .format("h:mm on ddd, D MMM, YYYY")} + {bundle.id}
- ) : ( -
{"No Downloads Found"}
); }; - return !isNil(props.data) ? ( - <> -
- {!isEmpty(socket) ? ( - - ) : ( -
-
-
- AirDC++ is not configured. Please configure it in{" "} - Settings. -
-
-
- )} -
- - ) : null; + return ( +
+ {!isEmpty(airDCPPSocketInstance) && !isEmpty(bundles) && ( + + )} +
+ ); }; - export default DownloadsPanel; diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx index 12f3574..4ffddbe 100644 --- a/src/client/components/ComicDetail/RawFileDetails.tsx +++ b/src/client/components/ComicDetail/RawFileDetails.tsx @@ -12,17 +12,17 @@ export const RawFileDetails = (props): ReactElement => { <>
-

+

{rawFileDetails.name}

-
+
Raw File Details
-
+
{rawFileDetails.containedIn + "/" + rawFileDetails.name + @@ -30,10 +30,10 @@ export const RawFileDetails = (props): ReactElement => {
-
+
Inferred Issue Metadata
-
+
Series Name: {inferredMetadata.issue.name} {!isEmpty(inferredMetadata.issue.number) ? ( @@ -43,8 +43,10 @@ export const RawFileDetails = (props): ReactElement => {
-
MIMEType
-
+
+ MIMEType +
+
{/* File extension */} @@ -56,11 +58,12 @@ export const RawFileDetails = (props): ReactElement => {
-
-
File Size
-
+
+ File Size +
+
{/* size */} @@ -74,16 +77,18 @@ export const RawFileDetails = (props): ReactElement => {
-
+
Import Details
-
+
{format(parseISO(created_at), "dd MMMM, yyyy")},{" "} {format(parseISO(created_at), "h aaaa")}
-
Attachments
+
+ Actions +