🤐 Added a uncompress indicator

package.json

@@ -62,7 +62,6 @@
     "react-select": "^5.8.0",
     "react-select-async-paginate": "^0.7.2",
     "react-sliding-pane": "^7.1.0",
-    "react-stickynode": "^4.1.0",
     "react-textarea-autosize": "^8.3.4",
     "reapop": "^4.2.1",
     "slick-carousel": "^1.8.1",

src/client/components/ComicDetail/ComicDetail.tsx

@@ -63,19 +63,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const [modalIsOpen, setIsOpen] = useState(false);
   const [comicVineMatches, setComicVineMatches] = useState([]);
 
-  //   const comicVineSearchResults = useSelector(
-  //     (state: RootState) => state.comicInfo.searchResults,
-  //   );
-  //   const comicVineSearchQueryObject = useSelector(
-  //     (state: RootState) => state.comicInfo.searchQuery,
-  //   );
-  //   const comicVineAPICallProgress = useSelector(
-  //     (state: RootState) => state.comicInfo.inProgress,
-  //   );
-  //
-  //   const extractedComicBook = useSelector(
-  //     (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
-  //   );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
   // const dispatch = useDispatch();
@@ -288,7 +275,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   // check for the availability of rawFileDetails
   const areRawFileDetailsAvailable =
-    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails);
 
   const { issueName, url } = determineCoverFile({
     rawFileDetails,

src/client/components/ComicDetail/TabControls.tsx

@@ -9,7 +9,7 @@ export const TabControls = (props): ReactElement => {
   const [active, setActive] = useState(filteredTabs[0].id);
   useEffect(() => {
     setActive(filteredTabs[0].id);
-  }, []);
+  }, [filteredTabs]);
 
   return (
     <>

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

@@ -1,51 +1,112 @@
-import React, { ReactElement, useCallback, useState } from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { DnD } from "../../shared/Draggable/DnD";
-import { isEmpty } from "lodash";
+import { isEmpty, isUndefined } from "lodash";
-import Sticky from "react-stickynode";
 import SlidingPane from "react-sliding-pane";
-import { analyzeImage } from "../../../actions/fileops.actions";
 import { Canvas } from "../../shared/Canvas";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { LIBRARY_SERVICE_HOST } from "../../../constants/endpoints";
+import {
+  IMAGETRANSFORMATION_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_HOST,
+} from "../../../constants/endpoints";
+import { useStore } from "../../../store";
+import { useShallow } from "zustand/react/shallow";
 
 export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
-  //   const isComicBookExtractionInProgress = useSelector(
+  const queryClient = useQueryClient();
-  //     (state: RootState) => state.fileOps.comicBookExtractionInProgress,
+  const { socketIOInstance } = useStore(
-  //   );
+    useShallow((state) => ({
-  //   const extractedComicBookArchive = useSelector(
+      socketIOInstance: state.socketIOInstance,
-  //     (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
+    })),
-  //   );
+  );
-  //
-  //   const imageAnalysisResult = useSelector((state: RootState) => {
-  //     return state.fileOps.imageAnalysisResults;
-  //   });
-
   // sliding panel config
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   // current image
   const [currentImage, setCurrentImage] = useState([]);
-
+  const [uncompressedArchive, setUncompressedArchive] = useState([]);
+  const [imageAnalysisResult, setImageAnalysisResult] = useState({});
   const constructImagePaths = (data): Array<string> => {
-    return data?.data.map((path: string) => `${LIBRARY_SERVICE_HOST}/${path}`);
+    return data?.map((path: string) =>
+      encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`),
+    );
+  };
+
+  // Listen to the uncompression complete event and orchestrate the final payload
+  socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
+    setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
+  });
+
+  useEffect(() => {
+    let isMounted = true;
+
+    if (data.rawFileDetails?.archive?.uncompressed) {
+      const fetchUncompressedArchive = async () => {
+        try {
+          const response = await axios({
+            url: `${LIBRARY_SERVICE_BASE_URI}/walkFolders`,
+            method: "POST",
+            data: {
+              basePathToWalk: data?.rawFileDetails?.archive?.expandedPath,
+              extensions: [".jpg", ".jpeg", ".png", ".bmp", "gif"],
+            },
+            transformResponse: async (responseData) => {
+              const parsedData = JSON.parse(responseData);
+              const paths = parsedData.map((pathObject) => {
+                return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
+              });
+              const uncompressedArchive = constructImagePaths(paths);
+
+              if (isMounted) {
+                setUncompressedArchive(uncompressedArchive);
+              }
+            },
+          });
+        } catch (error) {
+          console.error("Error fetching uncompressed archive:", error);
+          // Handle error if necessary
+        }
+      };
+
+      fetchUncompressedArchive();
+    }
+
+    // Cleanup function
+    return () => {
+      isMounted = false;
+      setUncompressedArchive([]);
+    };
+  }, [data]);
+
+  const analyzeImage = async (imageFilePath: string) => {
+    const response = await axios({
+      url: `${IMAGETRANSFORMATION_SERVICE_BASE_URI}/analyze`,
+      method: "POST",
+      data: {
+        imageFilePath,
+      },
+    });
+    setImageAnalysisResult(response?.data);
+    queryClient.invalidateQueries({ queryKey: ["uncompressedArchive"] });
   };
 
   const {
-    data: uncompressedArchive,
+    data: uncompressionResult,
     refetch,
     isLoading,
   } = useQuery({
     queryFn: async () =>
       await axios({
         method: "POST",
-        url: `http://localhost:3000/api/jobqueue/uncompressFullArchive`,
+        url: `http://localhost:3000/api/library/uncompressFullArchive`,
         headers: {
           "Content-Type": "application/json; charset=utf-8",
         },
         data: {
           filePath: data.rawFileDetails.filePath,
+          comicObjectId: data._id,
           options: {
             type: "full",
             purpose: "analysis",
@@ -55,39 +116,40 @@ export const ArchiveOperations = (props): ReactElement => {
           },
         },
       }),
-    queryKey: [""],
+    queryKey: ["uncompressedArchive"],
-    select: constructImagePaths,
     enabled: false,
   });
+
   // sliding panel init
   const contentForSlidingPanel = {
-    // imageAnalysis: {
+    imageAnalysis: {
-    //   content: () => {
+      content: () => {
-    //     return (
+        return (
-    //       <div>
+          <div>
-    //         <pre className="is-size-7">{currentImage}</pre>
+            <pre className="text-sm">{currentImage}</pre>
-    //         {!isEmpty(imageAnalysisResult) ? (
+            {!isEmpty(imageAnalysisResult) ? (
-    //           <pre className="is-size-7 p-2 mt-3">
+              <pre className="p-2 mt-3">
-    //             <Canvas data={imageAnalysisResult} />
+                <Canvas data={imageAnalysisResult} />
-    //           </pre>
+              </pre>
-    //         ) : null}
+            ) : null}
-    //         <pre className="is-size-7 mt-3">
+            <pre className="font-hasklig mt-3 text-sm">
-    //           {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
+              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
-    //         </pre>
+            </pre>
-    //       </div>
+          </div>
-    //     );
+        );
-    //   },
+      },
-    // },
+    },
   };
 
   // sliding panel handlers
   const openImageAnalysisPanel = useCallback((imageFilePath) => {
     setSlidingPanelContentId("imageAnalysis");
-    // dispatch(analyzeImage(imageFilePath));
+    analyzeImage(imageFilePath);
     setCurrentImage(imageFilePath);
     setVisible(true);
   }, []);
 
+  console.log(uncompressedArchive);
   return (
     <div key={2}>
       <article
@@ -104,41 +166,61 @@ export const ArchiveOperations = (props): ReactElement => {
         </div>
       </article>
       <div className="mt-5">
-        <button
+        {data.rawFileDetails.archive?.uncompressed ? (
-          className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+          <article
-          onClick={() => refetch()}
+            role="alert"
-        >
+            className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
-          <span className="text-md">Unpack Comic Archive</span>
+          >
-          <span className="w-6 h-6">
+            This issue is already uncompressed at:
-            <i className="h-6 w-6 icon-[solar--box-bold-duotone]"></i>
+            <p>
-          </span>
+              <code className="font-hasklig text-sm">
-        </button>
+                {data.rawFileDetails.archive.expandedPath}
+              </code>
+              <div className="">It has {uncompressedArchive?.length} pages</div>
+            </p>
+          </article>
+        ) : null}
+
+        <div className="flex flex-row gap-2 mt-4">
+          <button
+            className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+            onClick={() => refetch()}
+          >
+            <span className="text-md">Unpack Comic Archive</span>
+            <span className="w-6 h-6">
+              <i className="h-6 w-6 icon-[solar--box-bold-duotone]"></i>
+            </span>
+          </button>
+
+          {!isEmpty(uncompressedArchive) ? (
+            <div>
+              <button
+                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                onClick={() => refetch()}
+              >
+                <span className="text-md">Convert to .cbz</span>
+                <span className="w-6 h-6">
+                  <i className="h-6 w-6 icon-[solar--zip-file-bold-duotone]"></i>
+                </span>
+              </button>
+            </div>
+          ) : null}
+        </div>
       </div>
 
-      <div className="columns">
+      <div>
         <div className="mt-5">
           {!isEmpty(uncompressedArchive) ? (
             <DnD
               data={uncompressedArchive}
               onClickHandler={openImageAnalysisPanel}
             />
-          ) : null}
+          ) : (
+            "asdas"
+          )}
         </div>
-        {!isEmpty(uncompressedArchive) ? (
-          <div>
-            <span className="has-text-size-4">
-              {uncompressedArchive?.length} pages
-            </span>
-            <button className="button is-small is-light is-primary is-outlined">
-              <span className="icon is-small">
-                <i className="fa-solid fa-compress"></i>
-              </span>
-              <span>Convert to CBZ</span>
-            </button>
-          </div>
-        ) : null}
       </div>
-      {/* <SlidingPane
+      <SlidingPane
         isOpen={visible}
         onRequestClose={() => setVisible(false)}
         title={"Image Analysis"}
@@ -146,7 +228,7 @@ export const ArchiveOperations = (props): ReactElement => {
       >
         {slidingPanelContentId !== "" &&
           contentForSlidingPanel[slidingPanelContentId].content()}
-      </SlidingPane> */}
+      </SlidingPane>
     </div>
   );
 };

src/client/components/Dashboard/Dashboard.tsx

@@ -150,6 +150,14 @@ export const Dashboard = (): ReactElement => {
                           {rawFileDetails.extension}
                         </span>
                       </span>
+                      {/* Uncompressed status  */}
+                      {rawFileDetails.archive.uncompressed ? (
+                        <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">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--bookmark-bold-duotone] w-4 h-4"></i>
+                          </span>
+                        </span>
+                      ) : null}
                     </dd>
                   </div>
 

src/client/components/shared/Canvas.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef } from "react";
 
-export const Canvas = (data) => {
+export const Canvas = ({ data }) => {
-  const { colorHistogramData } = data.data;
+  const { colorHistogramData } = data;
-  console.log(data);
   const width = 559;
   const height = 200;
   const pixelRatio = window.devicePixelRatio;
@@ -10,7 +9,11 @@ export const Canvas = (data) => {
   const canvas = useRef(null);
 
   useEffect(() => {
-    const context = canvas.current.getContext("2d");
+    const context = canvas.current?.getContext("2d");
+    if (!context) {
+      return;
+    }
+
     context.scale(pixelRatio, pixelRatio);
     const guideHeight = 8;
     const startY = height - guideHeight;
@@ -46,18 +49,24 @@ export const Canvas = (data) => {
       context.stroke();
 
       // Guide
-      context.strokeStyle = "rgb(" + i + ", " + i + ", " + i + ")";
+      context.strokeStyle = `rgb(${i}, ${i}, ${i})`;
       context.beginPath();
       context.moveTo(x, startY);
       context.lineTo(x, height);
       context.closePath();
       context.stroke();
     }
-  });
+
+    // Cleanup function
+    return () => {
+      // Perform cleanup actions here
+    };
+  }, [colorHistogramData, pixelRatio]);
 
   const dw = Math.floor(pixelRatio * width);
   const dh = Math.floor(pixelRatio * height);
   const style = { width, height };
+
   return <canvas ref={canvas} width={dw} height={dh} style={style} />;
 };
 

src/client/components/shared/Draggable/DnD.tsx

@@ -21,6 +21,7 @@ import { Cover } from "./Cover";
 import { map } from "lodash";
 
 export const DnD = (data) => {
+  console.log(data.data);
   const [items, setItems] = useState(data.data);
   const [activeId, setActiveId] = useState(null);
   const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));