README.md

@@ -4,6 +4,16 @@ ThreeTwo! _aims to be_ a comic book curation app.
 
 [![Docker Image CI](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml/badge.svg)](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml)
 
+### Screenshots
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Dashboard.png)
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Library.png)
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/DC%2B%2B%20integration.png)
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/ComicVine%20Matching.png)
+
 
 ### 🦄 Early Development Support Channel
 

package.json

@@ -65,7 +65,7 @@
     "qs": "^6.10.5",
     "react": "^18.1.0",
     "react-collapsible": "^2.9.0",
-    "react-comic-viewer": "^0.3.5",
+    "react-comic-viewer": "^0.4.0",
     "react-day-picker": "^8.0.6",
     "react-dom": "^18.1.0",
     "react-fast-compare": "^3.2.0",

src/client/actions/fileops.actions.tsx

@@ -256,35 +256,37 @@ 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);
+      const pageFilePath = removeLeadingPeriod(page);
-  });
+      const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
-  dispatch({
+      comicBookPages.push(imagePath);
-    type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
+    });
-    extractedComicBookArchive: comicBookPages,
+    dispatch({
-  });
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
-};
+      extractedComicBookArchive: comicBookPages,
+    });
+  };
 
 export const searchIssue = (query, options) => async (dispatch) => {
   dispatch({

src/client/assets/scss/App.scss

@@ -356,6 +356,10 @@ pre {
   border-radius: 0.5rem;
 }
 
+.comic-viewer {
+  border: 1px solid red;
+}
+
 // comicvine metadata
 .comicvine-metadata {
   background-color: #f2f1f9;

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>

yarn.lock

@@ -1283,7 +1283,7 @@
   dependencies:
     tslib "^2.0.0"
 
-"@emotion/babel-plugin@^11.3.0", "@emotion/babel-plugin@^11.7.1":
+"@emotion/babel-plugin@^11.7.1":
   version "11.9.2"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
   integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
@@ -1317,28 +1317,45 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.1":
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
+"@emotion/is-prop-valid@^1.1.0":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a"
   integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==
   dependencies:
     "@emotion/memoize" "^0.7.4"
 
+"@emotion/is-prop-valid@^1.1.2":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
 "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@11.7.1":
+"@emotion/memoize@^0.8.0":
-  version "11.7.1"
+  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
-  integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@11.9.0":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8"
+  integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
     "@emotion/cache" "^11.7.1"
-    "@emotion/serialize" "^1.0.2"
+    "@emotion/serialize" "^1.0.3"
-    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.1.0"
-    "@emotion/utils" "^1.0.0"
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
@@ -1366,21 +1383,32 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
-"@emotion/sheet@^1.1.0", "@emotion/sheet@^1.1.1":
+"@emotion/serialize@^1.0.3":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787"
   integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
 
-"@emotion/styled@11.6.0":
+"@emotion/styled@11.8.1":
-  version "11.6.0"
+  version "11.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17"
-  integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==
+  integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@emotion/babel-plugin" "^11.3.0"
+    "@emotion/babel-plugin" "^11.7.1"
-    "@emotion/is-prop-valid" "^1.1.1"
+    "@emotion/is-prop-valid" "^1.1.2"
     "@emotion/serialize" "^1.0.2"
-    "@emotion/utils" "^1.0.0"
+    "@emotion/utils" "^1.1.0"
 
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
@@ -1392,11 +1420,21 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
 "@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
   integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
 
+"@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
 "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
@@ -15281,20 +15319,20 @@ react-collapsible@^2.9.0:
   resolved "https://registry.yarnpkg.com/react-collapsible/-/react-collapsible-2.10.0.tgz#57330f9f4f968a41ece49c651b56cf30f9a06d19"
   integrity sha512-kEVsmlFfXBMTCnU5gwIv19MdmPAhbIPzz5Er37TiJSzRKS0IHrqAKQyQeHEmtoGIQMTcVI46FzE4z3NlVTx77A==
 
-react-comic-viewer@^0.3.5:
+react-comic-viewer@^0.4.0:
-  version "0.3.5"
+  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/react-comic-viewer/-/react-comic-viewer-0.3.5.tgz#ab5f9ba74a4aa2e748c29d11b43e40d2a042d9ba"
+  resolved "https://registry.yarnpkg.com/react-comic-viewer/-/react-comic-viewer-0.4.0.tgz#81e170c4d3924f3312171e3fc7d5d4485466c301"
-  integrity sha512-xMjvu/JVJ821dYWOuOiZlEEMpgdmUeUtznoRjBlMaFi6WJI52V55/6E+ICg8VqROwiMwmWjp65rGhF1P8hlRLg==
+  integrity sha512-tdse0Vn6cJzEbFUZMlEBcY1LrH+LfCKodJInl5Y5lyIZyKARoejLrQNlJPnarvNcPW0qm6yQkYioaI56pq0U1w==
   dependencies:
-    "@emotion/react" "11.7.1"
+    "@emotion/react" "11.9.0"
-    "@emotion/styled" "11.6.0"
+    "@emotion/styled" "11.8.1"
     "@react-hook/window-size" "^3.0.7"
     "@rooks/use-did-update" "^4.10.0"
     "@rooks/use-outside-click-ref" "4.11.2"
     nanoid "^3.1.25"
     react-full-screen "1.1.0"
     react-icons "4.3.1"
-    react-swipeable "6.2.0"
+    react-swipeable "6.2.2"
     screenfull "^5.1.0"
 
 react-day-picker@^8.0.6:
@@ -15534,10 +15572,10 @@ react-stickynode@^4.0.0:
     shallowequal "^1.0.0"
     subscribe-ui-event "^2.0.6"
 
-react-swipeable@6.2.0:
+react-swipeable@6.2.2:
-  version "6.2.0"
+  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.0.tgz#057271cb7a6fb4af9d2a3f6d80ccdf33e2f64d47"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.2.tgz#52ba570f3a7a90db7093094ec476f3d151f727d1"
-  integrity sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==
+  integrity sha512-Oz7nSFrssvq2yvy05aNL3F+yBUqSvLsK6x1mu+rQFOpMdQVnt4izKt1vyjvvTb70q6GQOaSpaB6qniROW2MAzQ==
 
 react-syntax-highlighter@^15.4.5:
   version "15.5.0"