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

2022-02-02 18:17:52 -08:00
parent 1d317abbdb
commit bcfc174829
9 changed files with 275 additions and 57 deletions
--- a/src/client/components/ComicDetail.tsx
+++ b/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) &&
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/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
--- a/src/client/components/MatchResult.tsx
+++ b/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) => {
--- a/src/client/components/VolumeDetail/PotentialLibraryMatches.tsx
+++ b/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;
--- a/src/client/components/VolumeDetail/VolumeDetail.tsx
+++ b/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,
-    600: 1,
+    700: 3,
+    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);
-
-        return (
-          <div className="mt-10">
-            {map(matches, (match) => (
-              <pre>{JSON.stringify(match, undefined, 2)}</pre>
-            ))}
-          </div>
-        );
+        const ids = map(matches, partialRight(pick, "_id"));
+        const matchIds = ids.map((id:any) => id._id);
+        return <PotentialLibraryMatches matches={matchIds} />;
      },
    },
  };
@@ -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}
-              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 is-success">
-                              <i className="fa-solid fa-hands-asl-interpreting"></i>
-                            </span>
-                          ) : null}
-                        </Card>
-                        {/* { JSON.stringify(issue, undefined, 2)} */}
-                      </>
-                    );
-                  })
-                : "loading"}
-            </Masonry>
+
+            <div className="column is-three-fifths">
+              <div className="field is-grouped mt-2">
+                {/* Comicvine Id */}
+                <div className="control">
+                  <div className="tags has-addons">
+                    <span className="tag">ComicVine Id</span>
+                    <span className="tag is-info is-light">
+                      {
+                        comicBookDetails.sourcedMetadata.comicvine
+                          .volumeInformation.id
+                      }
+                    </span>
+                  </div>
+                </div>
+                {/* Publisher */}
+                <div className="control">
+                  <div className="tags has-addons">
+                    <span className="tag is-warning is-light">Publisher</span>
+                    <span className="tag is-volume-related">
+                      {
+                        comicBookDetails.sourcedMetadata.comicvine
+                          .volumeInformation.publisher.name
+                      }
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Deck */}
+              <div>
+                {!isEmpty(
+                  comicBookDetails.sourcedMetadata.comicvine.volumeInformation
+                    .description,
+                )
+                  ? 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