🪑 Styled download panel table

2023-12-25 00:27:35 -05:00
parent 432fe58585
commit 8f42afe560
7 changed files with 114 additions and 82 deletions
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -236,14 +236,19 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
        <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
      ),
      name: "Downloads",
-
-      content: !isNil(data.data) && !isEmpty(data.data) && (
-        <DownloadsPanel
-          data={data.data.acquisition.directconnect}
-          comicObjectId={comicObjectId}
-          key={5}
-        />
-      ),
+      content:
+        !isNil(data.data) && !isEmpty(data.data) ? (
+          <DownloadsPanel key={5} />
+        ) : (
+          <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>
+        ),
      shouldShow: true,
    },
  ];
--- 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) ? (
-      <div className="column is-full">
-        <table className="table is-striped">
+    console.log("asdas", props);
+    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>
                </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 +112,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;
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -12,17 +12,17 @@ export const RawFileDetails = (props): ReactElement => {
    <>
      <div className="max-w-2xl ml-5">
        <div className="px-4 sm:px-6">
-          <p className="text-gray-500">
+          <p className="text-gray-500 dark:text-gray-400">
            <span className="text-xl">{rawFileDetails.name}</span>
          </p>
        </div>
        <div className="px-4 py-5 sm:px-6">
          <dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                Raw File Details
              </dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                {rawFileDetails.containedIn +
                  "/" +
                  rawFileDetails.name +
@@ -30,10 +30,10 @@ export const RawFileDetails = (props): ReactElement => {
              </dd>
            </div>
            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                Inferred Issue Metadata
              </dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                Series Name: {inferredMetadata.issue.name}
                {!isEmpty(inferredMetadata.issue.number) ? (
                  <span className="tag is-primary is-light">
@@ -43,8 +43,10 @@ export const RawFileDetails = (props): ReactElement => {
              </dd>
            </div>
            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">MIMEType</dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                MIMEType
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
                {/* File extension */}
                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                  <span className="pr-1 pt-1">
@@ -56,11 +58,12 @@ export const RawFileDetails = (props): ReactElement => {
                  </span>
                </span>
              </dd>
-              <dd className="text-sm text-gray-900"></dd>
            </div>
            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">File Size</dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                File Size
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
                {/* size */}
                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                  <span className="pr-1 pt-1">
@@ -74,16 +77,18 @@ export const RawFileDetails = (props): ReactElement => {
              </dd>
            </div>
            <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                Import Details
              </dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
                {format(parseISO(created_at), "h aaaa")}
              </dd>
            </div>
            <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500">Attachments</dt>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Actions
+              </dt>
              <dd className="mt-1 text-sm text-gray-900">
                <ul
                  role="list"
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -19,7 +19,7 @@ export const TabControls = (props): ReactElement => {
            {filteredTabs.map(({ id, name, icon }) => (
              <a
                key={id}
-                className="inline-flex shrink-0 items-center gap-2 border-b border-transparent px-1 py-1 text-md font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                className="inline-flex shrink-0 items-center gap-2 border-b border-transparent px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700"
                aria-current="page"
                onClick={() => setActive(id)}
              >
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -130,7 +130,6 @@ export const Dashboard = (): ReactElement => {
                  hasDetails
                >
                  <div>
-                    <dt className="sr-only">Address</dt>
                    <dd className="text-sm my-1 flex flex-row gap-1">
                      {/* Issue number */}
                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
@@ -154,11 +153,11 @@ export const Dashboard = (): ReactElement => {
                    </dd>
                  </div>

-                  <div className="flex flex-row items-center gap-1 my-2">
+                  <div className="flex flex-row items-center gap-1 my-1">
                    <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
                      {/* ComicInfo.xml presence */}
                      {!isNil(comicInfo) && !isEmpty(comicInfo) && (
-                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300"></i>
+                        <i className="h-7 w-7 my-1 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
                      )}
                      {/* ComicVine metadata presence */}
                      {isComicVineMetadataAvailable && (
--- a/src/client/components/Import/Import.tsx
+++ b/src/client/components/Import/Import.tsx
@@ -226,7 +226,7 @@ export const Import = (props: IProps): ReactElement => {
                <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
              </span>

-              <div className="overflow-x-auto mt-4 rounded-lg border border-gray-200">
+              <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 className="ltr:text-left rtl:text-right">
                    <tr>
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -93,7 +93,7 @@ const renderCard = (props: ICardProps): ReactElement => {
          <div className="mt-2 px-2">
            <dl>
              <div>
-                <dd className="text-md text-slate-500 dark:text-black">
+                <dd className="text-sm text-slate-500 dark:text-black">
                  {props.title}
                </dd>
              </div>