2024-02-06 10:58:56 +00:00
5 changed files with 106 additions and 77 deletions
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -44,6 +44,22 @@ export const Dashboard = (): ReactElement => {
    queryKey: ["recentComics"],
  });

+  const { data: wantedComics } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
+        method: "POST",
+        data: {
+          paginationOptions: {
+            page: 0,
+            limit: 5,
+            sort: { updatedAt: "-1" },
+          },
+          predicate: { "acquisition.source.wanted": true },
+        },
+      }),
+    queryKey: ["wantedComics"],
+  });
  const { data: volumeGroups } = useQuery({
    queryFn: async () =>
      await axios({
@@ -201,9 +217,9 @@ export const Dashboard = (): ReactElement => {
          )}
        </div>
      </section>
-
+      {/* Wanted comics */}
+      <WantedComicsList comics={wantedComics?.data?.docs} />
      {/* Volume groups */}
-
      <VolumeGroups volumeGroups={volumeGroups?.data} />
    </div>
  );
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -5,12 +5,6 @@ import { Link, useNavigate } from "react-router-dom";
 import Card from "../shared/Carda";

 export const VolumeGroups = (props): ReactElement => {
-  const breakpointColumnsObj = {
-    default: 5,
-    1100: 4,
-    700: 2,
-    500: 1,
-  };
  // Till mongo gives us back the deduplicated results with the ObjectId
  const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
  const navigate = useNavigate();
@@ -19,29 +13,29 @@ export const VolumeGroups = (props): ReactElement => {
  };

  return (
-    <section className="volumes-container mt-4">
-      <div className="content">
-        <a className="mb-1" onClick={navigateToVolumes}>
-          <span className="is-size-4 has-text-weight-semibold">
+    <section className="mt-7">
+      <div className="">
+        <a className="" onClick={navigateToVolumes}>
+          <span className="text-xl">
            <i className="fa-solid fa-layer-group"></i> Volumes
          </span>
          <span className="icon mt-1">
            <i className="fa-solid fa-angle-right"></i>
          </span>
        </a>
-        <p className="subtitle is-7">Based on ComicVine Volume information</p>
+        <p className="">Based on ComicVine Volume information</p>
      </div>
-      <div className="grid grid-cols-5 gap-6">
+      <div className="grid grid-cols-5 gap-6 mt-3">
        {map(deduplicatedGroups, (data) => {
          return (
-            <div className="max-w-sm py-8 mx-auto" key={data._id}>
+            <div className="max-w-sm mx-auto" key={data._id}>
              <Card
                orientation="vertical-2"
                key={data._id}
                imageUrl={data.volumes.image.small_url}
                hasDetails
              >
-                <div className="py-2">
+                <div className="py-3">
                  <div className="text-sm">
                    <Link to={`/volume/details/${data._id}`}>
                      {ellipsize(data.volumes.name, 48)}
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -4,7 +4,6 @@ import { Link, useNavigate } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
-import Masonry from "react-masonry-css";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";

 type WantedComicsListProps = {
@@ -14,37 +13,25 @@ type WantedComicsListProps = {
 export const WantedComicsList = ({
  comics,
 }: WantedComicsListProps): ReactElement => {
-  const breakpointColumnsObj = {
-    default: 5,
-    1100: 4,
-    700: 2,
-    500: 1,
-  };
-
+  console.log("yolo", comics);
  const navigate = useNavigate();
  const navigateToWantedComics = (row) => {
    navigate(`/wanted/all`);
  };
  return (
    <>
-      <div className="content mt-6">
-        <a className="mb-1" onClick={navigateToWantedComics}>
-          <span className="is-size-4 has-text-weight-semibold">
-            <i className="fa-solid fa-asterisk"></i> Wanted Comics
+      <div className="mt-7">
+        <a className="" onClick={navigateToWantedComics}>
+          <span className="text-xl">
+            <i className=""></i> Wanted Comics
          </span>
-          <span className="icon mt-1">
-            <i className="fa-solid fa-angle-right"></i>
+          <span className="">
+            <i className=""></i>
          </span>
        </a>
-        <p className="subtitle is-7">
-          Comics marked as wanted from various sources.
-        </p>
+        <p className="">Comics marked as wanted from various sources.</p>
      </div>
-      <Masonry
-        breakpointCols={breakpointColumnsObj}
-        className="recent-comics-container"
-        columnClassName="recent-comics-column"
-      >
+      <div className="grid grid-cols-5 gap-6 mt-3">
        {map(
          comics,
          ({
@@ -73,29 +60,32 @@ export const WantedComicsList = ({
            return (
              <Card
                key={_id}
-                orientation={"vertical"}
+                orientation={"vertical-2"}
                imageUrl={url}
                hasDetails
                title={issueName ? titleElement : <span>No Name</span>}
              >
-                <div className="content is-flex is-flex-direction-row">
+                <div className="pb-1">
                  {/* comicVine metadata presence */}
                  {isComicBookMetadataAvailable && (
-                    <span className="icon custom-icon">
-                      <img src="/src/client/assets/img/cvlogo.svg" />
-                    </span>
+                    <img
+                      src="/src/client/assets/img/cvlogo.svg"
+                      alt={"ComicVine metadata detected."}
+                      className="w-7 h-7"
+                    />
                  )}
                  {!isEmpty(locg) && (
-                    <span className="icon custom-icon">
-                      <img src="/src/client/assets/img/locglogo.svg" />
-                    </span>
+                    <img
+                      src="/src/client/assets/img/locglogo.svg"
+                      className="w-7 h-7"
+                    />
                  )}
                  {/* Issue type */}
                  {isComicBookMetadataAvailable &&
                  !isNil(
                    detectIssueTypes(comicvine.volumeInformation.description),
                  ) ? (
-                    <span className="tag is-warning">
+                    <span className="">
                      {
                        detectIssueTypes(
                          comicvine.volumeInformation.description,
@@ -108,7 +98,7 @@ export const WantedComicsList = ({
            );
          },
        )}
-      </Masonry>
+      </div>
    </>
  );
 };
--- a/src/client/components/Search/Search.tsx
+++ b/src/client/components/Search/Search.tsx
@@ -10,7 +10,10 @@ import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
 import dayjs from "dayjs";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
+import {
+  COMICVINE_SERVICE_URI,
+  LIBRARY_SERVICE_BASE_URI,
+} from "../../constants/endpoints";
 import axios from "axios";

 interface ISearchProps {}
@@ -21,6 +24,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
  };
  const queryClient = useQueryClient();
  const [searchQuery, setSearchQuery] = useState("");
+  const [comicVineMetadata, setComicVineMetadata] = useState({});
  const getCVSearchResults = (searchQuery) => {
    console.log(searchQuery);
    setSearchQuery(searchQuery.search);
@@ -50,16 +54,40 @@ export const Search = ({}: ISearchProps): ReactElement => {
    queryKey: ["comicvineSearchResults", searchQuery],
    enabled: !isNil(searchQuery),
  });
-  console.log(comicVineSearchResults);
-  const addToLibrary = useCallback(
-    (sourceName: string, comicData) =>
-      importToDB(sourceName, { comicvine: comicData }),
-    [],
-  );

-  // const comicVineSearchResults = useSelector(
-  //   (state: RootState) => state.comicInfo.searchResults,
-  // );
+  // add to library
+  const { data: additionResult } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
+        method: "POST",
+        data: {
+          importType: "new",
+          payload: {
+            rawFileDetails: {
+              name: "",
+            },
+            importStatus: {
+              isImported: true,
+              tagged: false,
+              matchedResult: {
+                score: "0",
+              },
+            },
+            sourcedMetadata:
+              { comicvine: comicVineMetadata?.comicData } || null,
+            acquisition: { source: { wanted: true, name: "comicvine" } },
+          },
+        },
+      }),
+    queryKey: ["additionResult"],
+    enabled: !isNil(comicVineMetadata.comicData),
+  });
+
+  console.log(comicVineMetadata);
+  const addToLibrary = (sourceName: string, comicData) =>
+    setComicVineMetadata({ sourceName, comicData });
+
  const createDescriptionMarkup = (html) => {
    return { __html: html };
  };
@@ -67,8 +95,8 @@ export const Search = ({}: ISearchProps): ReactElement => {
  return (
    <>
      <section className="container">
-        <div className="section search">
-          <h1 className="title">Search</h1>
+        <div className="">
+          <h1 className="">Search</h1>

          <Form
            onSubmit={getCVSearchResults}
@@ -76,8 +104,8 @@ export const Search = ({}: ISearchProps): ReactElement => {
              ...formData,
            }}
            render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form onSubmit={handleSubmit} className="form columns search">
-                <div className="column is-three-quarters search">
+              <form onSubmit={handleSubmit}>
+                <div>
                  <Field name="search">
                    {({ input, meta }) => {
                      return (
@@ -103,16 +131,15 @@ export const Search = ({}: ISearchProps): ReactElement => {
            <div className="">
              {comicVineSearchResults.data.results.map((result) => {
                return isSuccess ? (
-                  <div key={result.id} className="">
+                  <div key={result.id} className="mb-5">
                    <div className="flex flex-row">
-                      <div className="max-w-150 mr-5">
+                      <div className="mr-5">
                        <Card
                          key={result.id}
-                          orientation={"vertical-2"}
+                          orientation={"cover-only"}
                          imageUrl={result.image.small_url}
-                          title={result.name}
                          hasDetails={false}
-                        ></Card>
+                        />
                      </div>
                      <div className="column">
                        <div className="text-xl">
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -90,17 +90,19 @@ const renderCard = (props: ICardProps): ReactElement => {
            className="rounded-t-md object-cover"
          />

-          <div className="mt-2 px-2">
-            <dl>
-              <div>
-                <dd className="text-sm text-slate-500 dark:text-black">
-                  {props.title}
-                </dd>
-              </div>
-            </dl>
+          {props.title ? (
+            <div className="px-3 pt-3 mb-2">
+              <dd className="text-sm text-slate-500 dark:text-black">
+                {props.title}
+              </dd>
+            </div>
+          ) : null}

-            {props.hasDetails && <>{props.children}</>}
-          </div>
+          {props.hasDetails ? (
+            <div className="px-2">
+              <>{props.children}</>
+            </div>
+          ) : null}
        </div>
      );