🔍 Fixing CV search page

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -134,7 +134,6 @@ export const AcquisitionPanel = (
           );
           setAirDCPPSearchInstance(currentInstance);
           setAirDCPPSearchInfo(searchInfo);
-          console.log("Asdas", airDCPPSearchInfo);
           if (currentInstance.result_count === 0) {
             // ...nothing was received, show an informative message to the user
             console.log("No more search results.");
@@ -231,38 +230,6 @@ export const AcquisitionPanel = (
     search(manualQuery, airDCPPSocketInstance);
   };
 
-  // download via AirDC++
-  const downloadDCPPResult = useCallback(
-    (searchInstanceId, resultId, name, size, type) => {
-      // dispatch(
-      //   downloadAirDCPPItem(
-      //     searchInstanceId,
-      //     resultId,
-      //     props.comicObjectId,
-      //     name,
-      //     size,
-      //     type,
-      //     airDCPPConfiguration.airDCPPState.socket,
-      //     {
-      //       username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
-      //       password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-      //     },
-      //   ),
-      // );
-      // this is to update the download count badge on the downloads tab
-      // dispatch(
-      //   getBundlesForComic(
-      //     props.comicObjectId,
-      //     airDCPPConfiguration.airDCPPState.socket,
-      //     {
-      //       username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
-      //       password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-      //     },
-      //   ),
-      // );
-    },
-    [],
-  );
   return (
     <>
       <div className="mt-5">

src/client/components/Dashboard/Dashboard.tsx

@@ -170,11 +170,13 @@ export const Dashboard = (): ReactElement => {
                     </dd>
                   </div>
 
-                  <div className="flex flex-row items-center gap-1 my-1">
+                  <div className="flex flex-row items-center gap-1 mt-2 pb-1">
                     <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
                       {/* ComicInfo.xml presence */}
                       {!isNil(comicInfo) && !isEmpty(comicInfo) && (
-                        <i className="h-7 w-7 my-1 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
+                        <div mt-1>
+                          <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
+                        </div>
                       )}
                       {/* ComicVine metadata presence */}
                       {isComicVineMetadataAvailable && (

src/client/components/Dashboard/VolumeGroups.tsx

@@ -41,25 +41,27 @@ export const VolumeGroups = (props): ReactElement => {
                 imageUrl={data.volumes.image.small_url}
                 hasDetails
               >
-                <div className="content">
-                  <div className="stack-title is-size-8">
+                <div className="py-2">
+                  <div className="text-sm">
                     <Link to={`/volume/details/${data._id}`}>
-                      {ellipsize(data.volumes.name, 18)}
+                      {ellipsize(data.volumes.name, 48)}
                     </Link>
                   </div>
-                  <div className="control">
-                    <span className="tags has-addons">
-                      <span className="tag is-primary is-light">Issues</span>
-                      <span className="tag">
-                        {data.volumes.count_of_issues}
-                      </span>
+
+                  <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
                     </span>
-                  </div>
+
+                    <span className="text-md text-slate-500 dark:text-slate-900">
+                      {data.volumes.count_of_issues} issues
+                    </span>
+                  </span>
                 </div>
               </Card>
-              <div className="w-11/12 h-2 mx-auto bg-gray-900 rounded-b opacity-75"></div>
-              <div className="w-10/12 h-2 mx-auto bg-gray-900 rounded-b opacity-50"></div>
-              <div className="w-9/12 h-2 mx-auto bg-gray-900 rounded-b opacity-25"></div>
+              <div className="w-11/12 h-2 mx-auto bg-slate-900 rounded-b opacity-75"></div>
+              <div className="w-10/12 h-2 mx-auto bg-slate-900 rounded-b opacity-50"></div>
+              <div className="w-9/12 h-2 mx-auto bg-slate-900 rounded-b opacity-25"></div>
             </div>
           );
         })}

src/client/components/Search/Search.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, ReactElement } from "react";
+import React, { useCallback, ReactElement, useState } from "react";
 import { isNil, isEmpty } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { importToDB } from "../../actions/fileops.actions";
-import { useSelector, useDispatch } from "react-redux";
 import { comicinfoAPICall } from "../../actions/comicinfo.actions";
 import { search } from "../../services/api/SearchApi";
 import { Form, Field } from "react-final-form";
@@ -10,6 +9,9 @@ import Card from "../shared/Carda";
 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 axios from "axios";
 
 interface ISearchProps {}
 
@@ -17,38 +19,47 @@ export const Search = ({}: ISearchProps): ReactElement => {
   const formData = {
     search: "",
   };
-  const dispatch = useDispatch();
-  const getCVSearchResults = useCallback(
-    (searchQuery) => {
-      dispatch(
-        comicinfoAPICall({
-          callURIAction: "search",
-          callMethod: "GET",
-          callParams: {
-            api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
-            query: searchQuery.search,
-            format: "json",
-            limit: "10",
-            offset: "0",
-            field_list:
-              "id,name,deck,api_detail_url,image,description,volume,cover_date",
-            resources: "issue",
-          },
-        }),
-      );
-    },
-    [dispatch],
-  );
+  const queryClient = useQueryClient();
+  const [searchQuery, setSearchQuery] = useState("");
+  const getCVSearchResults = (searchQuery) => {
+    console.log(searchQuery);
+    setSearchQuery(searchQuery.search);
+    // queryClient.invalidateQueries({ queryKey: ["comicvineSearchResults"] });
+  };
 
+  const {
+    data: comicVineSearchResults,
+    isLoading,
+    isSuccess,
+  } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${COMICVINE_SERVICE_URI}/search`,
+        method: "GET",
+        params: {
+          api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
+          query: searchQuery,
+          format: "json",
+          limit: "10",
+          offset: "0",
+          field_list:
+            "id,name,deck,api_detail_url,image,description,volume,cover_date",
+          resources: "issue",
+        },
+      }),
+    queryKey: ["comicvineSearchResults", searchQuery],
+    enabled: !isNil(searchQuery),
+  });
+  console.log(comicVineSearchResults);
   const addToLibrary = useCallback(
     (sourceName: string, comicData) =>
-      dispatch(importToDB(sourceName, { comicvine: comicData })),
+      importToDB(sourceName, { comicvine: comicData }),
     [],
   );
 
-  const comicVineSearchResults = useSelector(
-    (state: RootState) => state.comicInfo.searchResults,
-  );
+  // const comicVineSearchResults = useSelector(
+  //   (state: RootState) => state.comicInfo.searchResults,
+  // );
   const createDescriptionMarkup = (html) => {
     return { __html: html };
   };
@@ -87,29 +98,26 @@ export const Search = ({}: ISearchProps): ReactElement => {
               </form>
             )}
           />
-          {!isNil(comicVineSearchResults.results) &&
-          !isEmpty(comicVineSearchResults.results) ? (
-            <div className="columns is-multiline">
-              {comicVineSearchResults.results.map((result) => {
-                return (
-                  <div
-                    key={result.id}
-                    className="comicvine-metadata column is-10 mb-3"
-                  >
-                    <div className="columns">
-                      <div className="column is-one-quarter">
+          {!isNil(comicVineSearchResults?.data.results) &&
+          !isEmpty(comicVineSearchResults?.data.results) ? (
+            <div className="">
+              {comicVineSearchResults.data.results.map((result) => {
+                return isSuccess ? (
+                  <div key={result.id} className="">
+                    <div className="flex flex-row">
+                      <div className="max-w-150 mr-5">
                         <Card
                           key={result.id}
-                          orientation={"vertical"}
+                          orientation={"vertical-2"}
                           imageUrl={result.image.small_url}
                           title={result.name}
                           hasDetails={false}
                         ></Card>
                       </div>
                       <div className="column">
-                        <div className="is-size-3">
-                          {!isEmpty(result.name) ? (
-                            result.name
+                        <div className="text-xl">
+                          {!isEmpty(result.volume.name) ? (
+                            result.volume.name
                           ) : (
                             <span className="is-size-3">No Name</span>
                           )}
@@ -140,21 +148,26 @@ export const Search = ({}: ISearchProps): ReactElement => {
                           {ellipsize(
                             convert(result.description, {
                               baseElements: {
-                                selectors: ["p"],
+                                selectors: ["p", "div"],
                               },
                             }),
                             320,
                           )}
                         </p>
-                        <button
-                          className="button is-success is-light is-outlined mt-2"
-                          onClick={() => addToLibrary("comicvine", result)}
-                        >
-                          <i className="fa-solid fa-plus mr-2"></i> Want 
-                        </button>
+                        <div className="mt-2">
+                          <button
+                            className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                            onClick={() => addToLibrary("comicvine", result)}
+                          >
+                            <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
+                            Mark as Wanted
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
+                ) : (
+                  <div>Loading</div>
                 );
               })}
             </div>

src/client/components/shared/Navbar2.tsx

@@ -68,6 +68,14 @@ export const Navbar2 = (): ReactElement => {
                   Downloads
                 </a>
               </li>
+              <li>
+                <a
+                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
+                  href="/search"
+                >
+                  Comicvine Search
+                </a>
+              </li>
             </ul>
           </nav>
 

src/client/index.tsx

@@ -11,6 +11,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import Import from "./components/Import/Import";
 import Dashboard from "./components/Dashboard/Dashboard";
+import Search from "./components/Search/Search";
 import TabulatedContentContainer from "./components/Library/TabulatedContentContainer";
 import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer";
 
@@ -33,6 +34,7 @@ const router = createBrowserRouter([
         element: <ComicDetailContainer />,
       },
       { path: "import", element: <Import path={"./comics"} /> },
+      { path: "search", element: <Search /> },
     ],
   },
 ]);