From 592da9bd2a635f64b0d0e6c1c5eed101c3b667f9 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 1 Dec 2022 13:11:02 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactoring=20uncompression=20me?=
 =?UTF-8?q?thods=20on=20client-side?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/fileops.actions.tsx        | 57 ++++++++++---------
 .../components/ComicDetail/ComicDetail.tsx    | 10 +++-
 .../ComicDetail/ComicVineDetails.tsx          |  2 +-
 .../components/ComicDetail/RawFileDetails.tsx |  4 +-
 4 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx
index dded2b7..93f844a 100644
--- a/src/client/actions/fileops.actions.tsx
+++ b/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) => {
-  const comicBookPages: string[] = [];
-  dispatch({
-    type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
-  });
-  const extractedComicBookArchive = await axios({
-    method: "POST",
-    url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
-    headers: {
-      "Content-Type": "application/json; charset=utf-8",
-    },
-    data: {
-      filePath: path,
-    },
-  });
-  map(extractedComicBookArchive.data, (page) => {
-    console.log(page);
-    const pageFilePath = removeLeadingPeriod(page);
-    const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
-    comicBookPages.push(imagePath);
-  });
-  dispatch({
-    type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
-    extractedComicBookArchive: comicBookPages,
-  });
-};
+export const extractComicArchive =
+  (path: string, options: any): any => async (dispatch) => {
+    const comicBookPages: string[] = [];
+    console.log(options);
+    dispatch({
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+    });
+    const extractedComicBookArchive = await axios({
+      method: "POST",
+      url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      data: {
+        filePath: path,
+        ...options,
+      },
+    });
+    map(extractedComicBookArchive.data, (page) => {
+      console.log(page);
+      const pageFilePath = removeLeadingPeriod(page);
+      const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
+      comicBookPages.push(imagePath);
+    });
+    dispatch({
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
+      extractedComicBookArchive: comicBookPages,
+    });
+  };
 
 export const searchIssue = (query, options) => async (dispatch) => {
   dispatch({
diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx
index fa3ffc1..a88b575 100644
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/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) && (
                     <>
diff --git a/src/client/components/ComicDetail/ComicVineDetails.tsx b/src/client/components/ComicDetail/ComicVineDetails.tsx
index 27985c2..853157b 100644
--- a/src/client/components/ComicDetail/ComicVineDetails.tsx
+++ b/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>
diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx
index 2f086fb..7db0d4f 100644
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/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>