📆 Wired up the datepicker to LoCG pull list

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -278,9 +278,9 @@ export const AcquisitionPanel = (
             )}
           />
         ) : (
-          <div className="">
+          <div className="column is-three-fifths">
-            <article className="">
+            <article className="message is-info">
-              <div className="">
+              <div className="message-body is-size-6 is-family-secondary">
                 AirDC++ is not configured. Please configure it in{" "}
                 <code>Settings &gt; AirDC++ &gt; Connection</code>.
               </div>

src/client/components/ComicDetail/ComicDetail.tsx

@@ -12,7 +12,6 @@ import { Menu } from "./ActionMenu/Menu";
 import { ArchiveOperations } from "./Tabs/ArchiveOperations";
 import { ComicInfoXML } from "./Tabs/ComicInfoXML";
 import AcquisitionPanel from "./AcquisitionPanel";
-import TorrentSearchPanel from "./TorrentSearchPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import { VolumeInformation } from "./Tabs/VolumeInformation";
 
@@ -351,7 +350,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
         </span>
       ),
       name: "Torrent Search",
-      content: <TorrentSearchPanel />,
+      content: <>Torrents</>,
       shouldShow: true,
     },
     {

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -16,7 +16,7 @@ export const ComicVineDetails = (props): ReactElement => {
             <div className="min-w-fit">
               <Card
                 imageUrl={data.volumeInformation.image.thumb_url}
-                orientation={"cover-only"}
+                orientation={"vertical-2"}
                 hasDetails={false}
                 // cardContainerStyle={{ maxWidth: 200 }}
               />

src/client/components/ComicDetail/TorrentSearchPanel.tsx

@@ -1,77 +0,0 @@
-import React, { useCallback, ReactElement, useEffect, useState } from "react";
-
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import axios from "axios";
-import { Form, Field } from "react-final-form";
-import { PROWLARR_SERVICE_BASE_URI } from "../../constants/endpoints";
-
-export const TorrentSearchPanel = (props): ReactElement => {
-  const [prowlarrSettingsData, setProwlarrSettingsData] = useState({});
-
-  const { data } = useQuery({
-    queryFn: async () =>
-      axios({
-        url: `${PROWLARR_SERVICE_BASE_URI}/search`,
-        method: "POST",
-        data: {
-          port: "9696",
-          apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
-          offset: 0,
-          categories: [7030],
-          query: "the darkness",
-          host: "localhost",
-          limit: 100,
-          type: "search",
-          indexerIds: [2],
-        },
-      }),
-    queryKey: ["prowlarrSettingsData"],
-  });
-  console.log(data?.data);
-  return (
-    <>
-      <div className="mt-5">
-        <Form
-          onSubmit={() => {}}
-          initialValues={{}}
-          render={({ handleSubmit, form, submitting, pristine, values }) => (
-            <form onSubmit={handleSubmit}>
-              <Field name="issueName">
-                {({ input, meta }) => {
-                  return (
-                    <div className="max-w-fit">
-                      <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                        <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                          <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        </div>
-                        <input
-                          {...input}
-                          className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                          placeholder="Enter a search term"
-                        />
-
-                        <button
-                          className="sm:mt-0 min-w-fit rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                          type="submit"
-                        >
-                          <div className="flex flex-row">
-                            Search Indexer
-                            <div className="h-5 w-5 ml-1">
-                              <i className="h-6 w-6 icon-[solar--magnet-bold-duotone]" />
-                            </div>
-                          </div>
-                        </button>
-                      </div>
-                    </div>
-                  );
-                }}
-              </Field>
-            </form>
-          )}
-        />
-      </div>
-    </>
-  );
-};
-
-export default TorrentSearchPanel;

src/client/components/Dashboard/Dashboard.tsx

@@ -5,6 +5,7 @@ import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
+import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
@@ -53,23 +54,16 @@ export const Dashboard = (): ReactElement => {
     queryKey: ["volumeGroups"],
   });
 
-  const { data: statistics } = useQuery({
+  //
-    queryFn: async () =>
+  //   const libraryStatistics = useSelector(
-      await axios({
+  //     (state: RootState) => state.comicInfo.libraryStatistics,
-        url: `${LIBRARY_SERVICE_BASE_URI}/libraryStatistics`,
+  //   );
-        method: "GET",
-      }),
-    queryKey: ["libraryStatistics"],
-  });
-
   return (
     <div className="container mx-auto max-w-full">
       <PullList />
       {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
       {/* Wanted comics */}
       <WantedComicsList comics={wantedComics?.data?.docs} />
-      {/* Library Statistics */}
-      {statistics && <LibraryStatistics stats={statistics?.data} />}
       {/* Volume groups */}
       <VolumeGroups volumeGroups={volumeGroups?.data} />
     </div>

src/client/components/Dashboard/LibraryStatistics.tsx

@@ -1,99 +1,113 @@
 import React, { ReactElement, useEffect } from "react";
 import prettyBytes from "pretty-bytes";
 import { isEmpty, isUndefined, map } from "lodash";
-import Header from "../shared/Header";
 
 export const LibraryStatistics = (
   props: ILibraryStatisticsProps,
 ): ReactElement => {
-  const { stats } = props;
+  // const { stats } = props;
   return (
     <div className="mt-5">
-      <Header
+      <h4 className="title is-4">
-        headerContent="Your Library In Numbers"
+        <i className="fa-solid fa-chart-simple"></i> Your Library In Numbers 
-        subHeaderContent={
+      </h4>
-          <span className="text-md">A brief snapshot of your library.</span>
+      <p className="subtitle is-7">A brief snapshot of your library.</p>
-        }
+      <div className="columns is-multiline">
-        iconClassNames="fa-solid fa-binoculars mr-2"
+        <div className="column is-narrow is-two-quarter">
-      />
+          <dl className="box">
-
+            <dd className="is-size-4">
-      <div className="mt-3">
+              <span className="has-text-weight-bold">
-        <div className="flex flex-row gap-5">
+                {props.stats.totalDocuments}
-          <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
+              </span>{" "}
-            <dt className="text-lg font-medium text-gray-500">Library size</dt>
+              files
-            <dd className="text-3xl text-green-600 md:text-5xl">
-              {props.stats.totalDocuments} files
             </dd>
-            <dd>
+            <dd className="is-size-4">
-              <span className="text-2xl text-green-600">
+              Library size
+              <span className="has-text-weight-bold">
+                {" "}
                 {props.stats.comicDirectorySize &&
                   prettyBytes(props.stats.comicDirectorySize)}
               </span>
             </dd>
-          </div>
-          {/* comicinfo and comicvine tagged issues */}
-          <div className="flex flex-col gap-4">
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(props.stats.statistics[0].issues) && (
-                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
+                <dd className="is-size-6">
-                  <span className="text-xl">
+                  <span className="has-text-weight-bold">
                     {props.stats.statistics[0].issues.length}
                   </span>{" "}
                   tagged with ComicVine
-                </div>
+                </dd>
               )}
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && (
-                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
+                <dd className="is-size-6">
-                  <span className="text-xl">
+                  <span className="has-text-weight-bold">
                     {props.stats.statistics[0].issuesWithComicInfoXML.length}
                   </span>{" "}
+                  with
                   <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
-                    with ComicInfo.xml
+                    ComicInfo.xml
                   </span>
-                </div>
+                </dd>
               )}
-          </div>
+          </dl>
+        </div>
 
-          <div className="">
+        <div className="p-3 column is-one-quarter">
-            {!isUndefined(props.stats.statistics) &&
+          <dl className="box">
-              !isEmpty(props.stats.statistics[0].fileTypes) &&
+            <dd className="is-size-6">
-              map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
+              <span className="has-text-weight-bold"></span> Issues
-                return (
+            </dd>
-                  <span
+            <dd className="is-size-6">
-                    key={idx}
+              <span className="has-text-weight-bold">304</span> Volumes
-                    className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center"
+            </dd>
-                  >
+            <dd className="is-size-6">
-                    {fileType.data.length} {fileType._id}
+              {!isUndefined(props.stats.statistics) &&
-                  </span>
+                !isEmpty(props.stats.statistics[0].fileTypes) &&
-                );
+                map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
-              })}
+                  return (
-          </div>
+                    <span key={idx}>
+                      <span className="has-text-weight-bold">
+                        {fileType.data.length}
+                      </span>
+                      <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
+                        {fileType._id}
+                      </span>
+                    </span>
+                  );
+                })}
+            </dd>
+          </dl>
+        </div>
 
-          {/* file types */}
+        {/* file types */}
-          <div className="flex flex-col h-fit text-lg rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3">
+        <div className="p-3 column is-two-fifths">
-            {/* publisher with most issues */}
+          {/* publisher with most issues */}
+          <dl className="box">
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(
                 props.stats.statistics[0].publisherWithMostComicsInLibrary[0],
               ) && (
-                <>
+                <dd className="is-size-6">
-                  <span className="">
+                  <span className="has-text-weight-bold">
                     {
                       props.stats.statistics[0]
                         .publisherWithMostComicsInLibrary[0]._id
                     }
                   </span>
                   {" has the most issues "}
-                  <span className="">
+                  <span className="has-text-weight-bold">
                     {
                       props.stats.statistics[0]
                         .publisherWithMostComicsInLibrary[0].count
                     }
                   </span>
-                </>
+                </dd>
               )}
-          </div>
+            <dd className="is-size-6">
+              <span className="has-text-weight-bold">304</span> Volumes
+            </dd>
+          </dl>
         </div>
       </div>
     </div>

src/client/components/Dashboard/PullList.tsx

@@ -82,17 +82,7 @@ export const PullList = (): ReactElement => {
       <div className="content">
         <Header
           headerContent="Discover"
-          subHeaderContent={
+          subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
-            <span className="text-md">
-              Pull List aggregated for the week from{" "}
-              <span className="underline">
-                <a href="https://leagueofcomicgeeks.com/comics/new-comics">
-                  League Of Comic Geeks
-                </a>
-                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
-              </span>
-            </span>
-          }
           iconClassNames="fa-solid fa-binoculars mr-2"
           link="/pull-list/all/"
         />
@@ -111,10 +101,7 @@ export const PullList = (): ReactElement => {
                     />
                     {inputValue && (
                       <div className="text-sm">
-                        Showing pull list for{" "}
+                        Showing pull list for <span>{inputValue}</span>
-                        <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          {inputValue}
-                        </span>
                       </div>
                     )}
                   </div>

src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Form, Field } from "react-final-form";
-import { PROWLARR_SERVICE_BASE_URI } from "../../../constants/endpoints";
-import axios from "axios";
-
-export const ProwlarrSettingsForm = (props) => {
-  const { data } = useQuery({
-    queryFn: async (): any => {
-      return await axios({
-        url: `${PROWLARR_SERVICE_BASE_URI}/getIndexers`,
-        method: "POST",
-        data: {
-          host: "localhost",
-          port: "9696",
-          apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
-        },
-      });
-    },
-    queryKey: ["prowlarrConnectionResult"],
-  });
-  console.log(data);
-  const submitHandler = () => {};
-  const initialData = {};
-  return (
-    <>
-      Prowlarr Settings.
-      <Form
-        onSubmit={submitHandler}
-        initialValues={initialData}
-        render={({ handleSubmit }) => (
-          <form>
-            <article
-              role="alert"
-              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-            >
-              <div>
-                <p>Configure Prowlarr integration here.</p>
-                <p>
-                  Note that you need a Prowlarr instance hosted and running to
-                  configure the integration.
-                </p>
-                <p>
-                  See{" "}
-                  <a
-                    className="underline"
-                    href="http://airdcpp.net/docs/installation/installation.html"
-                  >
-                    here
-                  </a>{" "}
-                  for Prowlarr installation instructions for various platforms.
-                </p>
-              </div>
-            </article>
-          </form>
-        )}
-      />
-    </>
-  );
-};
-
-export default ProwlarrSettingsForm;

src/client/components/Settings/Settings.tsx

@@ -3,7 +3,6 @@ import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { QbittorrentConnectionForm } from "./QbittorrentSettings/QbittorrentConnectionForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
-import ProwlarrSettingsForm from "./ProwlarrSettings/ProwlarrSettingsForm";
 import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
 import settingsObject from "../../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
@@ -38,14 +37,6 @@ export const Settings = (props: ISettingsProps): ReactElement => {
         </div>
       ),
     },
-    {
-      id: "prwlr-connection",
-      content: (
-        <>
-          <ProwlarrSettingsForm />
-        </>
-      ),
-    },
     {
       id: "core-service",
       content: <>a</>,

src/client/components/shared/Header.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 type IHeaderProps = {
   headerContent: string;
-  subHeaderContent: ReactElement;
+  subHeaderContent: string;
   iconClassNames: string;
   link?: string;
 };

src/client/constants/endpoints.ts

@@ -90,10 +90,3 @@ export const QBITTORRENT_SERVICE_BASE_URI = hostURIBuilder({
   port: "3060",
   apiPath: `/api/qbittorrent`,
 });
-
-export const PROWLARR_SERVICE_BASE_URI = hostURIBuilder({
-  protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
-  port: "3060",
-  apiPath: `/api/prowlarr`,
-});

src/client/constants/settings/settingsMenu.json

@@ -57,7 +57,7 @@
         "displayName": "Prowlarr",
         "children": [
           {
-            "id": "prwlr-connection",
+            "id": "prowlarr-connection",
             "displayName": "Connection"
           },
           {

src/client/index.tsx

@@ -8,6 +8,7 @@ import { ErrorPage } from "./components/shared/ErrorPage";
 const rootEl = document.getElementById("root");
 const root = createRoot(rootEl);
 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";
@@ -46,5 +47,6 @@ const router = createBrowserRouter([
 root.render(
   <QueryClientProvider client={queryClient}>
     <RouterProvider router={router} />
+    <ReactQueryDevtools initialIsOpen={true} />
   </QueryClientProvider>,
 );