Dark mode 2 (#100)

* 🗂️ Added tab icons and styles

* 🪑 Styled download panel table

* 🪑 Cleaned up the DC++ search results table

* 🪑 Many changes to DC++ downloads table

* 🏗️ Wired up search with RQ

* 🏗️ Changes to ComicDetail section

* 🔧 Fixing table styes

* 🏗 Fixed the archive ops panel

* 🔧 Tweaked Archive ops further

* 🃏 Styling the action menu

* 🧩 CV Match panel refactor WIP

* 🏗️ Refactored the action menu

* 🤼 Cleaning up CV match panel

* 🏗️ Refactored the scored matches

* 🤼 Revamped CV match panel UX

* 🖌️ Styling tweaks to the side panel

* 🖌️ Cleaned up the form

* 🏗️ Refactored the search form

* 🤐 Added a uncompress indicator

* 🏗️ Fix for encoding # in URIs

* 🔧 Fixed # symbol handling in URLs

* 🔧 Started work on Edit Metadata panel

* 🔎 Added a check for existing uncompressed archives

* 🏗️ Settings styling tweaks

* 🏗️ Fixed invalidation of archiveOps

* 🏗️ Fixed an invalidation query on DC++ download panel

* 🏗️ Fixed CV-sourced Volume info panel

* 🏗️ Fixed volume group card stacks on Dashboard

* 🔍 Fixing CV search page

* 🏗️ Refactoring Volume groups and wanted panel

* 🏗️ Cleaning up useless files

* 🛝 Added keen-slider for pull list

* 🏗️ Abstracted heading/subheading into Header

* 🏗️ Continued refactoring of PullList, Volumes etc.

* 📆 Wired up the datepicker to LoCG pull list

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,73 +1,103 @@
-import React, { useEffect, useContext, ReactElement } from "react";
-import { getBundlesForComic } from "../../actions/airdcpp.actions";
+import React, { useEffect, useContext, ReactElement, useState } from "react";
 import { RootState } from "threetwo-ui-typings";
-import { isEmpty, isNil, map } from "lodash";
+import { isEmpty, 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 = (
   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 { 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);
+    });
+  }, [comicObject]);
 
   const Bundles = (props) => {
-    return !isEmpty(props.data) ? (
-      <div className="column is-full">
-        <table className="table is-striped">
+    return (
+      <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
+        <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
           <thead>
             <tr>
-              <th>Filename</th>
-              <th>Size</th>
-              <th>Download Time</th>
-              <th>Bundle ID</th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Filename
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Size
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Download Time
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Bundle ID
+              </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className="divide-y divide-gray-200">
             {map(props.data, (bundle) => (
-              <tr key={bundle.id}>
-                <td>
+              <tr key={bundle.id} className="text-sm">
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                   <h5>{ellipsize(bundle.name, 58)}</h5>
-                  <span className="is-size-7">{bundle.target}</span>
+                  <span className="text-xs">
+                    {ellipsize(bundle.target, 88)}
+                  </span>
                 </td>
-                <td>{prettyBytes(bundle.size)}</td>
-                <td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                  {prettyBytes(bundle.size)}
+                </td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                   {dayjs
                     .unix(bundle.time_finished)
                     .format("h:mm on ddd, D MMM, YYYY")}
                 </td>
-                <td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                   <span className="tag is-warning">{bundle.id}</span>
                 </td>
               </tr>
@@ -75,29 +105,15 @@ export const DownloadsPanel = (
           </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;
+  return (
+    <div className="columns is-multiline">
+      {!isEmpty(airDCPPSocketInstance) && !isEmpty(bundles) && (
+        <Bundles data={bundles} />
+      )}
+    </div>
+  );
 };
-
 export default DownloadsPanel;