🏗 Fixed the archive ops panel

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -8,7 +8,7 @@ import { difference } from "../../shared/utils/object.utils";
 import { isEmpty, isNil, map } from "lodash";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 
 interface IAcquisitionPanelProps {
@@ -57,6 +57,7 @@ export const AcquisitionPanel = (
   const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
   const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState({});
   const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState({});
+  const queryClient = useQueryClient();
 
   // Construct a AirDC++ query based on metadata inferred, upon component mount
   // Pre-populate the search input with the search string, so that
@@ -199,6 +200,8 @@ export const AcquisitionPanel = (
           },
         });
 
+        queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
+
         //         dispatch({
         //           type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
         //           downloadResult,

src/client/components/ComicDetail/ComicDetail.tsx

@@ -230,17 +230,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 6,
-      icon: (
-        <span className="inline-flex flex-row">
-          {/* download count */}
-          <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="text-md text-slate-500 dark:text-slate-900">
-              34
-            </span>
-          </span>
-          <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
-        </span>
-      ),
       name: "Downloads",
       content:
         !isNil(data.data) && !isEmpty(data.data) ? (

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -24,7 +24,6 @@ export const ComicDetailContainer = (): ReactElement | null => {
         },
       }),
   });
-  console.log(comicBookDetailData);
 
   {
     isError && <>Error</>;

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -85,7 +85,9 @@ export const DownloadsPanel = (
               <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="is-size-7">
+                    {ellipsize(bundle.target, 68)}
+                  </span>
                 </td>
                 <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                   {prettyBytes(bundle.size)}

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -7,7 +7,7 @@ import { analyzeImage } from "../../../actions/fileops.actions";
 import { Canvas } from "../../shared/Canvas";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { LIBRARY_SERVICE_BASE_URI } from "../../../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../../../constants/endpoints";
 
 export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
@@ -28,6 +28,10 @@ export const ArchiveOperations = (props): ReactElement => {
   // current image
   const [currentImage, setCurrentImage] = useState([]);
 
+  const constructImagePaths = (data): Array<string> => {
+    return data?.data.map((path: string) => `${LIBRARY_SERVICE_HOST}/${path}`);
+  };
+
   const {
     data: uncompressedArchive,
     refetch,
@@ -36,7 +40,7 @@ export const ArchiveOperations = (props): ReactElement => {
     queryFn: async () =>
       await axios({
         method: "POST",
-        url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+        url: `http://localhost:3000/api/jobqueue/uncompressFullArchive`,
         headers: {
           "Content-Type": "application/json; charset=utf-8",
         },
@@ -52,9 +56,9 @@ export const ArchiveOperations = (props): ReactElement => {
         },
       }),
     queryKey: [""],
+    select: constructImagePaths,
     enabled: false,
   });
-  console.log(uncompressedArchive);
   // sliding panel init
   const contentForSlidingPanel = {
     // imageAnalysis: {

src/client/constants/endpoints.ts

@@ -8,7 +8,6 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
     options.apiPath
   );
 };
-console.log(import.meta);
 
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
   protocol: "http",

src/client/store/index.ts

@@ -254,5 +254,3 @@ if (!isNil(directConnectConfiguration)) {
 } else {
   console.log("problem");
 }
-
-console.log("connected?", getState());