🔧 Refactoring uncompression methods on client-side

src/client/actions/fileops.actions.tsx

@@ -259,8 +259,10 @@ export const fetchComicVineMatches =
  * @param {any} options Options object
  * @returns {any}
  */
-export const extractComicArchive = (path: string, options: any) => async (dispatch) => {
+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,
     });
@@ -272,6 +274,7 @@ export const extractComicArchive = (path: string, options: any) => async (dispat
       },
       data: {
         filePath: path,
+        ...options,
       },
     });
     map(extractedComicBookArchive.data, (page) => {
@@ -284,7 +287,7 @@ export const extractComicArchive = (path: string, options: any) => async (dispat
       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>