🏗️ Applying the refactor patc

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -16,6 +16,7 @@ import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
 import { isEmpty, isNil, map } from "lodash";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+
 interface IAcquisitionPanelProps {
   query: any;
   comicObjectId: any;
@@ -96,9 +97,12 @@ export const AcquisitionPanel = (
     (searchInstanceId, resultId, name, size, type) => {
       dispatch(
         downloadAirDCPPItem(
-          searchInstanceId, resultId,
+          searchInstanceId,
+          resultId,
           props.comicObjectId,
-          name, size, type,
+          name,
+          size,
+          type,
           airDCPPConfiguration.airDCPPState.socket,
           {
             username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
@@ -332,4 +336,4 @@ export const AcquisitionPanel = (
   );
 };
 
-export default AcquisitionPanel;
+export default AcquisitionPanel;

src/client/components/ComicDetail/ComicDetail.tsx

@@ -66,7 +66,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   );
 
   const extractedComicBook = useSelector(
-    (state: RootState) => state.fileOps.extractedComicBookArchive,
+    (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
   );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
@@ -77,7 +77,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     dispatch(
       extractComicArchive(filePath, {
         type: "full",
-        purpose: "readComicBook",
+        purpose: "reading",
         imageResizeOptions: {
           baseWidth: 1024,
         },
@@ -317,4 +317,4 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   );
 };
 
-export default ComicDetail;
+export default ComicDetail;

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -38,7 +38,8 @@ export const RawFileDetails = (props): ReactElement => {
           </dd>
         </dl>
       </div>
-      <div className="content comic-detail raw-file-details mt-3 column is-one-third">
+
+      <div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
         <dl>
           {/* inferred metadata */}
           <dt>Inferred Issue Metadata</dt>
@@ -93,4 +94,4 @@ RawFileDetails.propTypes = {
       }),
     }),
   }),
-};
+};

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

@@ -14,7 +14,7 @@ export const ArchiveOperations = (props): ReactElement => {
     (state: RootState) => state.fileOps.comicBookExtractionInProgress,
   );
   const extractedComicBookArchive = useSelector(
-    (state: RootState) => state.fileOps.extractedComicBookArchive,
+    (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
   );
 
   const imageAnalysisResult = useSelector((state: RootState) => {
@@ -23,7 +23,15 @@ export const ArchiveOperations = (props): ReactElement => {
 
   const dispatch = useDispatch();
   const unpackComicArchive = useCallback(() => {
-    dispatch(extractComicArchive(data.rawFileDetails.filePath));
+    dispatch(
+      extractComicArchive(data.rawFileDetails.filePath, {
+        type: "full",
+        purpose: "analysis",
+        imageResizeOptions: {
+          baseWidth: 275,
+        },
+      }),
+    );
   }, []);
 
   // sliding panel config
@@ -118,4 +126,4 @@ export const ArchiveOperations = (props): ReactElement => {
   );
 };
 
-export default ArchiveOperations;
+export default ArchiveOperations;