🔧 Refactoring the uncompression methods for "Read Comic" and "Uncompress Archive" operations (#43)

* 🔧 Refactoring uncompression methods on client-side

* ✏️ Refactoring

* 👁️ Updates to the comic viewer

* 🖼️ Added screenshots from December 2022

* ✏️ Fixed typo in README

src/client/components/ComicDetail/ComicDetail.tsx

@@ -74,13 +74,21 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   const openModal = useCallback((filePath) => {
     setIsOpen(true);
-    dispatch(extractComicArchive(filePath));
+    dispatch(
+      extractComicArchive(filePath, {
+        type: "full",
+        purpose: "readComicBook",
+        imageResizeOptions: {
+          baseWidth: 1024,
+        },
+      }),
+    );
   }, []);
 
   const afterOpenModal = useCallback((things) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
-    console.log(things);
+    console.log("kolaveri", things);
   }, []);
 
   const closeModal = useCallback(() => {
@@ -94,7 +102,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
         <>
           <div className="card search-criteria-card">
             <div className="card-content">
-              <ComicVineSearchForm data={rawFileDetails}/>
+              <ComicVineSearchForm data={rawFileDetails} />
             </div>
           </div>
           <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
@@ -112,7 +120,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 comicVineSearchResults,
                 comicObjectId,
               }}
-            />) : (<div className="progress-indicator-container" >
+            />
+          ) : (
+            <div className="progress-indicator-container">
               <div className="indicator">
                 <Loader
                   type="MutatingDots"
@@ -123,16 +133,16 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                   visible={comicVineAPICallProgress}
                 />
               </div>
-            </div >)}
-        </>),
+            </div>
+          )}
+        </>
+      ),
     },
 
-
     editComicBookMetadata: {
       content: () => <EditMetadataPanel />,
     },
   };
-  
 
   // check for the availability of CV metadata
   const isComicBookMetadataAvailable =
@@ -249,7 +259,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) && (
                     <>
@@ -280,6 +290,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                           <ComicViewer
                             pages={extractedComicBook}
                             direction="ltr"
+                            className={{closeButton: "border: 1px solid red;"}}
                           />
                         )}
                       </Modal>

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>