🔧 Refactoring uncompression methods on client-side

src/client/actions/fileops.actions.tsx

@@ -256,35 +256,38 @@ export const fetchComicVineMatches =
 /**
  * This method is a proxy to `uncompressFullArchive` which uncompresses complete `rar` or `zip` archives
  * @param {string} path The path to the compressed archive
- * @param {any} options Options object 
+ * @param {any} options Options object
  * @returns {any}
  */
-export const extractComicArchive = (path: string, options: any) => async (dispatch) => {
+export const extractComicArchive =
-  const comicBookPages: string[] = [];
+  (path: string, options: any): any => async (dispatch) => {
-  dispatch({
+    const comicBookPages: string[] = [];
-    type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+    console.log(options);
-  });
+    dispatch({
-  const extractedComicBookArchive = await axios({
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
-    method: "POST",
+    });
-    url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+    const extractedComicBookArchive = await axios({
-    headers: {
+      method: "POST",
-      "Content-Type": "application/json; charset=utf-8",
+      url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
-    },
+      headers: {
-    data: {
+        "Content-Type": "application/json; charset=utf-8",
-      filePath: path,
+      },
-    },
+      data: {
-  });
+        filePath: path,
-  map(extractedComicBookArchive.data, (page) => {
+        ...options,
-    console.log(page);
+      },
-    const pageFilePath = removeLeadingPeriod(page);
+    });
-    const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
+    map(extractedComicBookArchive.data, (page) => {
-    comicBookPages.push(imagePath);
+      console.log(page);
-  });
+      const pageFilePath = removeLeadingPeriod(page);
-  dispatch({
+      const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
-    type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
+      comicBookPages.push(imagePath);
-    extractedComicBookArchive: comicBookPages,
+    });
-  });
+    dispatch({
-};
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
+      extractedComicBookArchive: comicBookPages,
+    });
+  };
 
 export const searchIssue = (query, options) => async (dispatch) => {
   dispatch({

src/client/components/ComicDetail/ComicDetail.tsx

@@ -74,7 +74,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   const openModal = useCallback((filePath) => {
     setIsOpen(true);
-    dispatch(extractComicArchive(filePath));
+    dispatch(extractComicArchive(filePath, {
+      type: "full",
+      purpose: "readComicBook",
+      imageResizeOptions: {
+        baseWidth: 275,
+      }
+    }));
   }, []);
 
   const afterOpenModal = useCallback((things) => {
@@ -249,7 +255,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 </div>
               </div>
               {/* raw file details */}
-              <div className="column is-three-fifths">
+              <div className="column">
                 {!isUndefined(rawFileDetails) &&
                   !isEmpty(rawFileDetails.cover) && (
                     <>

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -7,7 +7,7 @@ import Card from "../Carda";
 export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (
-    <div className="column is-two-thirds">
+    <div className="column is-half">
       <div className="comic-detail comicvine-metadata">
         <dl>
           <dt>ComicVine Metadata</dt>

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -7,7 +7,7 @@ export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata } = props.data;
   return (
     <>
-      <div className="comic-detail raw-file-details">
+      <div className="comic-detail raw-file-details column is-three-fifths">
         <dl>
           <dt>Raw File Details</dt>
           <dd className="is-size-7">
@@ -38,7 +38,7 @@ export const RawFileDetails = (props): ReactElement => {
           </dd>
         </dl>
       </div>
-      <div className="content comic-detail raw-file-details mt-3">
+      <div className="content comic-detail raw-file-details mt-3 column is-one-third">
         <dl>
           {/* inferred metadata */}
           <dt>Inferred Issue Metadata</dt>