⤵️ Downloads page WIP

src/client/actions/airdcpp.actions.tsx

@@ -130,7 +130,7 @@ export const downloadAirDCPPItem =
           true,
         );
       }
-      console.log(comicObject)
+      console.log(comicObject);
       let bundleDBImportResult = {};
       const downloadResult = await ADCPPSocket.post(
         `search/${instanceId}/results/${resultId}/download`,
@@ -162,7 +162,6 @@ export const downloadAirDCPPItem =
           (item) => item.id,
         );
       }
-      console.log(comicObjectId)
       if (!isNil(downloadResult)) {
         bundleDBImportResult = await axios({
           method: "POST",
@@ -255,3 +254,21 @@ export const getBundlesForComic =
       throw error;
     }
   };
+
+export const getTransfers =
+  (ADCPPSocket: any, credentials: any) => async (dispatch) => {
+    try {
+      if (!ADCPPSocket.isConnected()) {
+        await ADCPPSocket.connect(
+          `${credentials.username}`,
+          `${credentials.password}`,
+          true,
+        );
+      }
+      console.log(ADCPPSocket);
+    const foo =  await ADCPPSocket.get('queue/bundles/1/50', {});
+    console.log(foo);
+    } catch (err) {
+      throw err;
+    }
+  };

src/client/components/App.tsx

@@ -12,6 +12,7 @@ import VolumeDetail from "./VolumeDetail/VolumeDetail";
 import PullList from "./PullList/PullList";
 import WantedComics from "./WantedComics/WantedComics";
 import Volumes from "./Volumes/Volumes";
+import Downloads from "./Downloads/Downloads";
 
 import { Routes, Route } from "react-router-dom";
 import Navbar from "./Navbar";
@@ -82,6 +83,7 @@ export const App = (): ReactElement => {
           <Route path="/import" element={<Import path={"./comics"} />} />
           <Route path="/library" element={<LibraryContainer />} />
           <Route path="/library-grid" element={<LibraryGrid />} />
+          <Route path="/downloads" element={<Downloads />} />
           <Route path="/search" element={<Search />} />
           <Route
             path={"/comic/details/:comicObjectId"}

src/client/components/ComicDetail/ComicDetail.tsx

@@ -1,10 +1,4 @@
-import React, {
+import React, { useState, ReactElement, useCallback } from "react";
-  useState,
-  useEffect,
-  ReactElement,
-  useContext,
-  useCallback,
-} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import Card from "../Carda";
@@ -125,7 +119,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       rawFileDetails,
       inferredMetadata,
       sourcedMetadata: { comicvine, locg, comicInfo },
-    }, userSettings,
+    },
+    userSettings,
   } = data;
 
   // check for the availability of CV metadata

src/client/components/Dashboard/LibraryStatistics.tsx

@@ -7,8 +7,8 @@ export const LibraryStatistics = (
 ): ReactElement => {
   // const { stats } = props;
   return (
-    <>
+    <div className="mt-5">
-      <h4 className="title is-4 mt-2">
+      <h4 className="title is-4">
         <i className="fa-solid fa-chart-simple"></i> Statistics
       </h4>
       <p className="subtitle is-7">A brief snapshot of your library.</p>
@@ -110,7 +110,7 @@ export const LibraryStatistics = (
           </dl>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

src/client/components/Dashboard/WantedComicsList.tsx

@@ -27,10 +27,10 @@ export const WantedComicsList = ({
   };
   return (
     <>
-      <div className="content">
+      <div className="content mt-6">
         <a className="mb-1" onClick={navigateToWantedComics}>
           <span className="is-size-4 has-text-weight-semibold">
-          <i className="fa-solid fa-asterisk"></i> Wanted Comics
+            <i className="fa-solid fa-asterisk"></i> Wanted Comics
           </span>
           <span className="icon mt-1">
             <i className="fa-solid fa-angle-right"></i>

src/client/components/Downloads/Downloads.tsx

@@ -0,0 +1,51 @@
+import React, { ReactElement, useCallback, useContext, useEffect } from "react";
+import { getSettings } from "../../actions/settings.actions";
+import { getTransfers } from "../../actions/airdcpp.actions";
+import { useDispatch, useSelector } from "react-redux";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import AirDCPPSocket from "../../services/DcppSearchService";
+import { isEmpty, isUndefined } from "lodash";
+
+interface IDownloadsProps {
+  data: any;
+}
+
+export const Downloads = (props: IDownloadsProps): ReactElement => {
+  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
+  const dispatch = useDispatch();
+  const airDCPPClientSettings = useSelector(
+    (state: RootState) => state.settings.data,
+  );
+  useEffect(() => {
+    dispatch(getSettings());
+  }, []);
+
+  useEffect(() => {
+    if (!isEmpty(airDCPPClientSettings)) {
+      setADCPPSocket(
+        new AirDCPPSocket({
+          hostname: `${airDCPPClientSettings.directConnect.client.host.hostname}`,
+          protocol: `${airDCPPClientSettings.directConnect.client.host.protocol}`,
+        }),
+      );
+    }
+  }, [airDCPPClientSettings]);
+
+  console.log(airDCPPClientSettings);
+  // Make the call to get all transfers from AirDC++
+  useEffect(() => {
+    if (!isUndefined(ADCPPSocket) && !isEmpty(airDCPPClientSettings)) {
+      dispatch(
+        getTransfers(ADCPPSocket, {
+          username: `${airDCPPClientSettings.directConnect.client.host.username}`,
+          password: `${airDCPPClientSettings.directConnect.client.host.password}`,
+        }),
+      );
+    }
+  }, [ADCPPSocket]);
+  //   const getAllDownloads = useCallback(() => {});
+
+  return <></>;
+};
+
+export default Downloads;

src/client/components/Navbar.tsx

@@ -1,11 +1,8 @@
-import { debounce } from "lodash";
+import React from "react";
-import React, { ReactElement, useCallback } from "react";
 import { SearchBar } from "./GlobalSearchBar/SearchBar";
-import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
 const Navbar: React.FunctionComponent = (props) => {
-  
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -51,11 +48,12 @@ const Navbar: React.FunctionComponent = (props) => {
             Library
           </Link>
 
-          <Link to="/library" className="navbar-item">
+          <Link to="/downloads" className="navbar-item">
             Downloads
           </Link>
 
-          <SearchBar/>
+          <SearchBar />
+
           <Link to="/search" className="navbar-item">
             Search ComicVine
           </Link>

src/client/components/Settings.tsx

@@ -1,15 +1,9 @@
-import React, {
+import React, { useState, useEffect, ReactElement, useContext } from "react";
-  useState,
-  useEffect,
-  useCallback,
-  ReactElement,
-  useContext,
-} from "react";
 import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
 import settingsObject from "../constants/settings/settingsMenu.json";
-import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { isEmpty, isUndefined, map } from "lodash";
 import { useDispatch, useSelector } from "react-redux";
 import { getSettings } from "../actions/settings.actions";
 import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
@@ -30,7 +24,6 @@ export const Settings = (props: ISettingsProps): ReactElement => {
 
   useEffect(() => {
     if (!isEmpty(airDCPPClientSettings)) {
-      console.log(airDCPPClientSettings);
       setADCPPSocket(
         new AirDCPPSocket({
           hostname: `${airDCPPClientSettings.directConnect.client.host.hostname}`,