🔎 Scaffold for ES-powered issue matching in library first draft

src/client/actions/comicinfo.actions.tsx

@@ -12,8 +12,8 @@ import {
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
   CV_ISSUES_METADATA_CALL_IN_PROGRESS,
-  CV_ISSUES_METADATA_FETCH_SUCCESS,
   CV_CLEANUP,
+  IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED,
 } from "../constants/action-types";
 import {
   COMICBOOKINFO_SERVICE_URI,
@@ -103,6 +103,25 @@ export const getComicBookDetailById =
     });
   };
 
+export const getComicBooksDetailsByIds =
+  (comicBookObjectIds: Array<string>) => async (dispatch) => {
+    dispatch({
+      type: IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
+      IMS_inProgress: true,
+    });
+    const result = await axios.request({
+      url: `${IMPORT_SERVICE_BASE_URI}/getComicBooksByIds`,
+      method: "POST",
+      data: {
+        ids: comicBookObjectIds,
+      },
+    });
+    dispatch({
+      type: IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED,
+      comicBooks: result.data,
+    });
+  };
+
 export const applyComicVineMatch =
   (match, comicObjectId) => async (dispatch) => {
     dispatch({

src/client/assets/scss/App.scss

@@ -5,6 +5,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
 $bg-color: yellow;
 $border-color: red;
+
+$volume-color: #f2f1f9;
 $size-8: 0.9rem;
 
 .is-size-8 {
@@ -129,7 +131,7 @@ $size-8: 0.9rem;
   box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
 
   .green-border {
-    border:2px dotted #999;
+    border:2px dotted #168B64;
     border-radius: 0.3rem;
   }
 
@@ -346,13 +348,18 @@ $size-8: 0.9rem;
 
 // Volume detail
 .volume-details {
+  .is-volume-related {
+    $tag-background-color: $volume-color;
+  }
   .issues-container {
     display: -webkit-box; /* Not needed if autoprefixing */
     display: -ms-flexbox; /* Not needed if autoprefixing */
     display: flex;
+    // margin-left: -30px; /* gutter size offset */
     width: auto;
     .issues-column {
-      padding: 10px;
+      max-width:102px;
+      margin: 10px;
       background-clip: padding-box;
       & > div {
         /* change div to reference your elements you put in <Masonry> */
@@ -362,6 +369,12 @@ $size-8: 0.9rem;
     
   }
 }
+// Potential issue matches in library slideout panel
+.potential-matches-container {
+  .generic-card {
+      max-width: 90px;
+  }
+}
 
 // comicvine search results
 .search-results-container {

src/client/components/ComicDetail.tsx

@@ -41,6 +41,7 @@ type ComicDetailProps = {};
  */
 
 export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
+  const [active, setActive] = useState(1);
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
@@ -116,8 +117,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     },
   };
 
-  const [active, setActive] = useState(1);
-
   const isComicBookMetadataAvailable =
     comicBookDetailData.sourcedMetadata &&
     !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) &&

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -24,7 +24,7 @@ export const AcquisitionPanel = (
 ): ReactElement => {
   const volumeName =
     props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name;
-  const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, "");
+  const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, " ");
   const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
 
   // Selectors for picking state

src/client/components/MatchResult.tsx

@@ -15,7 +15,6 @@ const handleBrokenImage = (e) => {
 };
 
 export const MatchResult = (props: MatchResultProps) => {
-  console.log(props);
   const dispatch = useDispatch();
   const applyCVMatch = useCallback(
     (match, comicObjectId) => {

src/client/components/VolumeDetail/PotentialLibraryMatches.tsx

@@ -0,0 +1,77 @@
+import { isArray, map } from "lodash";
+import React, { useEffect, ReactElement } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getComicBooksDetailsByIds } from "../../actions/comicinfo.actions";
+import { Card } from "../Carda";
+import ellipsize from "ellipsize";
+import { IMPORT_SERVICE_HOST } from "../../constants/endpoints";
+import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
+
+const PotentialLibraryMatches = (props): ReactElement => {
+  const dispatch = useDispatch();
+  const comicBooks = useSelector(
+    (state: RootState) => state.comicInfo.comicBooksDetails,
+  );
+  useEffect(() => {
+    dispatch(getComicBooksDetailsByIds(props.matches));
+  }, []);
+  return (
+    <div className="potential-matches-container mt-10">
+      {isArray(comicBooks) ? (
+        map(comicBooks, (match) => {
+          const encodedFilePath = encodeURI(
+            `${IMPORT_SERVICE_HOST}/${match.rawFileDetails.cover.filePath}`,
+          );
+          const filePath = escapePoundSymbol(encodedFilePath);
+          return (
+            <>
+              {/* <pre>{JSON.stringify(match, undefined, 2)}</pre> */}
+
+              <div className="columns">
+                <div className="column is-one-fifth">
+                  <Card
+                    imageUrl={filePath}
+                    orientation={"vertical"}
+                    hasDetails={false}
+                  />
+                </div>
+
+                <div className="search-result-details column">
+                  <div className="is-size-5">{match.rawFileDetails.name}</div>
+                  <span className="subtitle is-size-7">
+                    {match.rawFileDetails.cover.filePath}
+                  </span>
+                  <div className="field is-grouped is-grouped-multiline mt-4">
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">File Type</span>
+                        <span className="tag is-primary">
+                          {match.rawFileDetails.extension}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">File Size</span>
+                        <span className="tag is-warning">
+                          {match.rawFileDetails.fileSize}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  {/* <div className="is-size-7">
+                  {ellipsize(issueDescription, 300)}
+                </div> */}
+                </div>
+              </div>
+            </>
+          );
+        })
+      ) : (
+        <div>asdasd</div>
+      )}
+    </div>
+  );
+};
+
+export default PotentialLibraryMatches;

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -1,4 +1,4 @@
-import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { isEmpty, isUndefined, map, partialRight, pick } from "lodash";
 import React, { useEffect, ReactElement, useState, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router";
@@ -6,35 +6,33 @@ import {
   getComicBookDetailById,
   findIssuesForSeriesInLibrary,
 } from "../../actions/comicinfo.actions";
+import PotentialLibraryMatches from "./PotentialLibraryMatches";
 import Masonry from "react-masonry-css";
 import { Card } from "../Carda";
 import SlidingPane from "react-sliding-pane";
+import { convert } from "html-to-text";
+import ellipsize from "ellipsize";
 
 const VolumeDetails = (props): ReactElement => {
   const breakpointColumnsObj = {
-    default: 5,
+    default: 6,
     1100: 4,
-    700: 2,
+    700: 3,
-    600: 1,
+    600: 2,
   };
   // sliding panel config
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   const [matches, setMatches] = useState([]);
+  const [active, setActive] = useState(1);
 
   // sliding panel init
   const contentForSlidingPanel = {
     potentialMatchesInLibrary: {
       content: () => {
-        console.log(matches);
+        const ids = map(matches, partialRight(pick, "_id"));
-
+        const matchIds = ids.map((id:any) => id._id);
-        return (
+        return <PotentialLibraryMatches matches={matchIds} />;
-          <div className="mt-10">
-            {map(matches, (match) => (
-              <pre>{JSON.stringify(match, undefined, 2)}</pre>
-            ))}
-          </div>
-        );
       },
     },
   };
@@ -61,6 +59,90 @@ const VolumeDetails = (props): ReactElement => {
 
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
+  const IssuesInVolume = () => (
+    <Masonry
+      breakpointCols={breakpointColumnsObj}
+      className="issues-container"
+      columnClassName="issues-column"
+    >
+      {!isUndefined(issuesForVolume) && !isEmpty(issuesForVolume)
+        ? issuesForVolume.map((issue) => {
+            return (
+              <Card
+                key={issue.issue.id}
+                imageUrl={issue.issue.image.thumb_url}
+                orientation={"vertical"}
+                hasDetails={!isEmpty(issue.matches) ? true : false}
+                borderColorClass={!isEmpty(issue.matches) ? "green-border" : ""}
+                backgroundColor={!isEmpty(issue.matches) ? "#e0f5d0" : ""}
+                onClick={() => openPotentialLibraryMatchesPanel(issue.matches)}
+              >
+                {!isEmpty(issue.matches) ? (
+                  <>
+                    <span className="icon has-text-success">
+                      <i className="fa-regular fa-clone"></i>
+                    </span>
+                    <span className="is-primary is-size-7">
+                      {issue.issue.issue_number}
+                    </span>
+                  </>
+                ) : null}
+              </Card>
+            );
+          })
+        : "loading"}
+    </Masonry>
+  );
+
+  // Tab content and header details
+  const tabGroup = [
+    {
+      id: 1,
+      name: "Issues in Volume",
+      icon: <i className="fa-solid fa-layer-group"></i>,
+      content: <IssuesInVolume key={1} />,
+    },
+    {
+      id: 2,
+      icon: <i className="fa-regular fa-mask"></i>,
+      name: "Characters",
+      content: <div key={2}>asdasd</div>,
+    },
+    {
+      id: 3,
+      icon: <i className="fa-solid fa-scroll"></i>,
+      name: "Arcs",
+      content: <div key={3}>asdasd</div>,
+    },
+  ];
+
+  // Tabs
+  const MetadataTabGroup = () => {
+    return (
+      <>
+        <div className="tabs">
+          <ul>
+            {tabGroup.map(({ id, name, icon }) => (
+              <li
+                key={id}
+                className={id === active ? "is-active" : ""}
+                onClick={() => setActive(id)}
+              >
+                <a>
+                  <span className="icon is-small">{icon}</span>
+                  {name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {tabGroup.map(({ id, content }) => {
+          return active === id ? content : null;
+        })}
+      </>
+    );
+  };
+
   if (
     !isUndefined(comicBookDetails.sourcedMetadata) &&
     !isUndefined(comicBookDetails.sourcedMetadata.comicvine)
@@ -68,11 +150,13 @@ const VolumeDetails = (props): ReactElement => {
     return (
       <div className="container volume-details">
         <div className="section">
+          {/* Title */}
           <h1 className="title">
             {comicBookDetails.sourcedMetadata.comicvine.volumeInformation.name}
           </h1>
           <div className="columns is-multiline">
-            <div className="column is-narrow is-full">
+            {/* Volume cover */}
+            <div className="column is-narrow">
               <Card
                 imageUrl={
                   comicBookDetails.sourcedMetadata.comicvine.volumeInformation
@@ -82,44 +166,60 @@ const VolumeDetails = (props): ReactElement => {
                 hasDetails={false}
               />
             </div>
-            <Masonry
+
-              breakpointCols={breakpointColumnsObj}
+            <div className="column is-three-fifths">
-              className="issues-container"
+              <div className="field is-grouped mt-2">
-              columnClassName="issues-column"
+                {/* Comicvine Id */}
-            >
+                <div className="control">
-              {!isUndefined(issuesForVolume) && !isEmpty(issuesForVolume)
+                  <div className="tags has-addons">
-                ? issuesForVolume.map((issue) => {
+                    <span className="tag">ComicVine Id</span>
-                    return (
+                    <span className="tag is-info is-light">
-                      <>
+                      {
-                        <Card
+                        comicBookDetails.sourcedMetadata.comicvine
-                          key={issue.issue.id}
+                          .volumeInformation.id
-                          imageUrl={issue.issue.image.thumb_url}
+                      }
-                          orientation={"vertical"}
+                    </span>
-                          hasDetails={!isEmpty(issue.matches) ? true : false}
+                  </div>
-                          borderColorClass={
+                </div>
-                            !isEmpty(issue.matches) ? "green-border" : ""
+                {/* Publisher */}
-                          }
+                <div className="control">
-                          backgroundColor={
+                  <div className="tags has-addons">
-                            !isEmpty(issue.matches) ? "#e0f5d0" : ""
+                    <span className="tag is-warning is-light">Publisher</span>
-                          }
+                    <span className="tag is-volume-related">
-                          onClick={() =>
+                      {
-                            openPotentialLibraryMatchesPanel(issue.matches)
+                        comicBookDetails.sourcedMetadata.comicvine
-                          }
+                          .volumeInformation.publisher.name
-                        >
+                      }
-                          {!isEmpty(issue.matches) ? (
+                    </span>
-                            <span className="icon is-success">
+                  </div>
-                              <i className="fa-solid fa-hands-asl-interpreting"></i>
+                </div>
-                            </span>
+              </div>
-                          ) : null}
+
-                        </Card>
+              {/* Deck */}
-                        {/* { JSON.stringify(issue, undefined, 2)} */}
+              <div>
-                      </>
+                {!isEmpty(
-                    );
+                  comicBookDetails.sourcedMetadata.comicvine.volumeInformation
-                  })
+                    .description,
-                : "loading"}
+                )
-            </Masonry>
+                  ? ellipsize(
+                      convert(
+                        comicBookDetails.sourcedMetadata.comicvine
+                          .volumeInformation.description,
+                        {
+                          baseElements: {
+                            selectors: ["p"],
+                          },
+                        },
+                      ),
+                      300,
+                    )
+                  : null}
+              </div>
+            </div>
+
             {/* <pre>{JSON.stringify(issuesForVolume, undefined, 2)}</pre> */}
           </div>
+          <MetadataTabGroup />
         </div>
 
         <SlidingPane

src/client/constants/action-types.ts

@@ -25,8 +25,10 @@ export const IMS_CV_METADATA_IMPORT_FAILED = "IMS_CV_METADATA_IMPORT_FAILED";
 export const IMS_RECENT_COMICS_FETCHED = "IMS_RECENT_COMICS_FETCHED";
 export const IMS_DATA_FETCH_ERROR = "IMS_DATA_FETCH_ERROR";
 
+// Single or multiple comic book mongo objects
 export const IMS_COMIC_BOOK_DB_OBJECT_FETCHED =
   "IMS_COMIC_BOOK_DB_OBJECT_FETCHED";
+export const IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED = "IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED";
 export const IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS =
   "IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS";
 export const IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED =

src/client/reducers/comicinfo.reducer.js

@@ -3,6 +3,7 @@ import {
   CV_SEARCH_SUCCESS,
   CV_CLEANUP,
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+  IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED,
   IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
   CV_ISSUES_METADATA_CALL_IN_PROGRESS,
   CV_ISSUES_METADATA_FETCH_SUCCESS,
@@ -14,6 +15,7 @@ const initialState = {
   searchQuery: {},
   inProgress: false,
   comicBookDetail: {},
+  comicBooksDetails: [],
   issuesForVolume: [],
   IMS_inProgress: false,
 };
@@ -44,6 +46,13 @@ function comicinfoReducer(state = initialState, action) {
         comicBookDetail: action.comicBookDetail,
         IMS_inProgress: false,
       };
+    case IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED:
+      console.log(action);
+      return {
+        ...state,
+        comicBooksDetails: action.comicBooks,
+        IMS_inProgress: false,
+      };
     case CV_CLEANUP:
       return {
         ...state,