Comicvine integration improvements (#109)

* ⚡️ Refactored VolumeDetail page to use react-query

* 🎨 Added some icons to tabs

* 📚 Wired up story arc fetching

* ✅ Added status checks

* 🍇 Added some integration for issues

* 🔍 Improvements to CV search results

* 🔍 Refining CV search UX

* 🌍 Added i18n lib

* 🔍 CV search metadata wrangling

* 🔧 Refactored Wanted component

Included # of issues in a wanted volume

* 🔧 Refactoring DC++ search/download

* 🔧 Refactored AirDC++ init in store

* 🏗️ Automatic downloads WIP

* 🏗️ Modified the Dockerfile

src/client/components/shared/Card.tsx

@@ -1,70 +0,0 @@
-import * as React from "react";
-import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
-import {
-  removeLeadingPeriod,
-  escapePoundSymbol,
-} from "../shared/utils/formatting.utils";
-import { isUndefined, isEmpty, isNil } from "lodash";
-import { Link } from "react-router-dom";
-import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
-import ellipsize from "ellipsize";
-
-interface IProps {
-  comicBookCoversMetadata?: IExtractedComicBookCoverFile;
-  mongoObjId?: number;
-  hasTitle: boolean;
-  title?: string;
-  isHorizontal: boolean;
-}
-interface IState {}
-
-class Card extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props);
-  }
-
-  public drawCoverCard = (
-    metadata: IExtractedComicBookCoverFile,
-  ): JSX.Element => {
-    const encodedFilePath = encodeURI(
-      `${LIBRARY_SERVICE_HOST}` + removeLeadingPeriod(metadata.path),
-    );
-    const filePath = escapePoundSymbol(encodedFilePath);
-    return (
-      <div>
-        <div className="card generic-card">
-          <div className={this.props.isHorizontal ? "is-horizontal" : ""}>
-            <div className="card-image">
-              <figure className="image">
-                <img src={filePath} alt="Placeholder image" />
-              </figure>
-            </div>
-            {this.props.hasTitle && (
-              <div className="card-content">
-                <ul>
-                  <Link to={"/comic/details/" + this.props.mongoObjId}>
-                    <li className="has-text-weight-semibold">
-                      {ellipsize(metadata.name, 18)}
-                    </li>
-                  </Link>
-                </ul>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  public render() {
-    return (
-      <>
-        {!isUndefined(this.props.comicBookCoversMetadata) &&
-          !isEmpty(this.props.comicBookCoversMetadata) &&
-          this.drawCoverCard(this.props.comicBookCoversMetadata)}
-      </>
-    );
-  }
-}
-
-export default Card;

src/client/components/shared/DatePicker.tsx

@@ -1,71 +1,42 @@
-import React, { ChangeEventHandler, useRef, useState } from "react";
-
-import { format, isValid, parse, parseISO } from "date-fns";
+import React, { useRef, useState } from "react";
+import { format } from "date-fns";
 import FocusTrap from "focus-trap-react";
-import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
-import { usePopper } from "react-popper";
+import { ClassNames, DayPicker } from "react-day-picker";
+import { useFloating, offset, flip, autoUpdate } from "@floating-ui/react-dom";
+import styles from "react-day-picker/dist/style.module.css";
 
 export const DatePickerDialog = (props) => {
   const { setter, apiAction } = props;
   const [selected, setSelected] = useState<Date>();
   const [isPopperOpen, setIsPopperOpen] = useState(false);
 
-  const popperRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null,
-  );
-
-  const customStyles = {
-    container: {
-      // Style for the entire container
-      border: "1px solid #ccc",
-      borderRadius: "4px",
-      padding: "10px",
-      width: "300px",
-    },
-    day: {
-      // Style for individual days
-
-      padding: "5px",
-      margin: "2px",
-    },
-    selected: {
-      // Style for selected days
-      backgroundColor: "#007bff",
-      color: "#fff",
-    },
-    disabled: {
-      // Style for disabled days
-      color: "#ccc",
-    },
-    today: {
-      // Style for today's date
-      backgroundColor: "#f0f0f0",
-    },
-    dayWrapper: {
-      // Style for the wrapper around each day
-      display: "inline-block",
-    },
+  const classNames: ClassNames = {
+    ...styles,
+    head: "custom-head",
   };
-
-  const popper = usePopper(popperRef.current, popperElement, {
-    placement: "bottom-start",
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const { x, y, reference, floating, strategy, refs, update } = useFloating({
+    placement: "bottom-end",
+    middleware: [offset(10), flip()],
+    strategy: "absolute",
   });
 
   const closePopper = () => {
     setIsPopperOpen(false);
-    buttonRef?.current?.focus();
+    buttonRef.current?.focus();
   };
 
   const handleButtonClick = () => {
     setIsPopperOpen(true);
+    if (refs.reference.current && refs.floating.current) {
+      autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
   };
 
-  const handleDaySelect: SelectSingleEventHandler = (date) => {
+  const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
-      setter(format(date, "M-dd-yyyy"));
+      setter(format(date, "yyyy-MM-dd"));
       apiAction();
       closePopper();
     } else {
@@ -75,17 +46,14 @@ export const DatePickerDialog = (props) => {
 
   return (
     <div>
-      <div ref={popperRef}>
+      <div ref={reference}>
         <button
           ref={buttonRef}
           type="button"
           aria-label="Pick a date"
           onClick={handleButtonClick}
-          className="flex space-x-1 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+          className="flex space-x-1 mb-2 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-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
         >
-          <span className="pr-1 pt-0.5 h-8">
-            <span className="icon-[solar--calendar-date-bold-duotone] w-6 h-6"></span>
-          </span>
           Pick a date
         </button>
       </div>
@@ -101,11 +69,14 @@ export const DatePickerDialog = (props) => {
           }}
         >
           <div
-            tabIndex={-1}
-            style={popper.styles.popper}
-            className="bg-slate-200 mt-3 p-2 rounded-lg z-50"
-            {...popper.attributes.popper}
-            ref={setPopperElement}
+            ref={floating}
+            style={{
+              position: strategy,
+              zIndex: "999",
+              borderRadius: "10px",
+              boxShadow: "0 4px 6px rgba(0,0,0,0.1)", // Example of adding a shadow
+            }}
+            className="bg-slate-400 dark:bg-slate-500"
             role="dialog"
             aria-label="DayPicker calendar"
           >
@@ -115,7 +86,7 @@ export const DatePickerDialog = (props) => {
               defaultMonth={selected}
               selected={selected}
               onSelect={handleDaySelect}
-              styles={customStyles}
+              classNames={classNames}
             />
           </div>
         </FocusTrap>

src/client/components/shared/Navbar.tsx

@@ -1,312 +0,0 @@
-import React from "react";
-import { SearchBar } from "../GlobalSearchBar/SearchBar";
-import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
-import { Link } from "react-router-dom";
-import { isEmpty, isNil, isUndefined } from "lodash";
-import { format, fromUnixTime } from "date-fns";
-import { useStore } from "../../store/index";
-import { useShallow } from "zustand/react/shallow";
-
-const Navbar: React.FunctionComponent = (props) => {
-  const {
-    airDCPPSocketConnected,
-    airDCPPDisconnectionInfo,
-    airDCPPSessionInformation,
-    airDCPPDownloadTick,
-    importJobQueue,
-  } = useStore(
-    useShallow((state) => ({
-      airDCPPSocketConnected: state.airDCPPSocketConnected,
-      airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
-      airDCPPSessionInformation: state.airDCPPSessionInformation,
-      airDCPPDownloadTick: state.airDCPPDownloadTick,
-      importJobQueue: state.importJobQueue,
-    })),
-  );
-  //   const downloadProgressTick = useSelector(
-  //     (state: RootState) => state.airdcpp.downloadProgressData,
-  //   );
-  //
-  //   const airDCPPSocketConnectionStatus = useSelector(
-  //     (state: RootState) => state.airdcpp.isAirDCPPSocketConnected,
-  //   );
-  //   const airDCPPSessionInfo = useSelector(
-  //     (state: RootState) => state.airdcpp.airDCPPSessionInfo,
-  //   );
-  //   const socketDisconnectionReason = useSelector(
-  //     (state: RootState) => state.airdcpp.socketDisconnectionReason,
-  //   );
-
-  return (
-    <nav className="navbar is-fixed-top">
-      <div className="navbar-brand">
-        <Link to="/dashboard" className="navbar-item">
-          <img
-            src="/src/client/assets/img/threetwo.svg"
-            alt="ThreeTwo! A comic book curator"
-            width="112"
-            height="28"
-          />
-        </Link>
-
-        <a className="navbar-item is-hidden-desktop">
-          <span className="icon">
-            <i className="fas fa-github"></i>
-          </span>
-        </a>
-
-        <a className="navbar-item is-hidden-desktop">
-          <span className="icon">
-            <i className="fas fa-twitter"></i>
-          </span>
-        </a>
-
-        <div className="navbar-burger burger" data-target="navMenubd-example">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-      </div>
-
-      <div id="navMenubd-example" className="navbar-menu">
-        <div className="navbar-start">
-          <Link to="/" className="navbar-item">
-            Dashboard
-          </Link>
-
-          <Link to="/import" className="navbar-item">
-            Import
-          </Link>
-
-          <Link to="/library" className="navbar-item">
-            Library
-          </Link>
-
-          <Link to="/downloads" className="navbar-item">
-            Downloads
-          </Link>
-
-          {/* <SearchBar /> */}
-
-          <Link to="/search" className="navbar-item">
-            Search ComicVine
-          </Link>
-        </div>
-
-        <div className="navbar-end">
-          <a className="navbar-item is-hidden-desktop-only"></a>
-
-          <div className="navbar-item has-dropdown is-hoverable">
-            <a className="navbar-link is-arrowless">
-              <i className="fa-solid fa-download"></i>
-              {!isEmpty(airDCPPDownloadTick) && (
-                <div className="pulsating-circle"></div>
-              )}
-            </a>
-            {!isEmpty(airDCPPDownloadTick) ? (
-              <div className="navbar-dropdown is-right is-boxed">
-                <a className="navbar-item">
-                  <DownloadProgressTick data={airDCPPDownloadTick} />
-                </a>
-              </div>
-            ) : null}
-          </div>
-
-          {!isUndefined(importJobQueue.status) &&
-          location.hash !== "#/import" ? (
-            <div className="navbar-item has-dropdown is-hoverable">
-              <a className="navbar-link is-arrowless">
-                <i className="fa-solid fa-file-import has-text-warning-dark"></i>
-              </a>
-
-              <div className="navbar-dropdown is-right is-boxed">
-                <a className="navbar-item">
-                  <ul>
-                    {importJobQueue.successfulJobCount > 0 ? (
-                      <li className="mb-2">
-                        <span className="tag is-success mr-2">
-                          {importJobQueue.successfulJobCount}
-                        </span>
-                        imported.
-                      </li>
-                    ) : null}
-                    {importJobQueue.failedJobCount > 0 ? (
-                      <li>
-                        <span className="tag is-danger mr-2">
-                          {importJobQueue.failedJobCount}
-                        </span>
-                        failed to import.
-                      </li>
-                    ) : null}
-                  </ul>
-                </a>
-              </div>
-            </div>
-          ) : null}
-
-          {/* AirDC++ socket connection status */}
-          <div className="navbar-item has-dropdown is-hoverable">
-            {!isUndefined(airDCPPSessionInformation.user) ? (
-              <>
-                <a className="navbar-link is-arrowless has-text-success">
-                  <i className="fa-solid fa-bolt"></i>
-                </a>
-                <div className="navbar-dropdown pr-2 pl-2 is-right airdcpp-status is-boxed">
-                  {/* AirDC++ Session Information */}
-
-                  <p>
-                    Last login was{" "}
-                    <span className="tag">
-                      {format(
-                        fromUnixTime(
-                          airDCPPSessionInformation?.user.last_login,
-                        ),
-                        "dd MMMM, yyyy",
-                      )}
-                    </span>
-                  </p>
-                  <hr className="navbar-divider" />
-                  <p>
-                    <span className="tag has-text-success">
-                      {airDCPPSessionInformation.user.username}
-                    </span>
-                    connected to{" "}
-                    <span className="tag has-text-success">
-                      {airDCPPSessionInformation.system_info.client_version}
-                    </span>{" "}
-                    with session ID{" "}
-                    <span className="tag has-text-success">
-                      {airDCPPSessionInformation.session_id}
-                    </span>
-                  </p>
-                </div>
-              </>
-            ) : (
-              <>
-                <a className="navbar-link is-arrowless has-text-danger">
-                  <i className="fa-solid fa-bolt"></i>
-                </a>
-                <div className="navbar-dropdown pr-2 pl-2 is-right is-boxed">
-                  <pre>{JSON.stringify(airDCPPDisconnectionInfo, null, 2)}</pre>
-                </div>
-              </>
-            )}
-          </div>
-
-          <div className="navbar-item has-dropdown is-hoverable is-mega">
-            <div className="navbar-link flex">Blog</div>
-            <div id="blogDropdown" className="navbar-dropdown">
-              <div className="container is-fluid">
-                <div className="columns">
-                  <div className="column">
-                    <h1 className="title is-6 is-mega-menu-title">
-                      Sub Menu Title
-                    </h1>
-                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
-                      <div className="navbar-content">
-                        <p>
-                          <small className="has-text-info">03 Aug 2017</small>
-                        </p>
-                        <p>New feature: list of tags</p>
-                      </div>
-                    </a>
-                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
-                      <div className="navbar-content">
-                        <p>
-                          <small className="has-text-info">03 Aug 2017</small>
-                        </p>
-                        <p>New feature: list of tags</p>
-                      </div>
-                    </a>
-                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
-                      <div className="navbar-content">
-                        <p>
-                          <small className="has-text-info">03 Aug 2017</small>
-                        </p>
-                        <p>New feature: list of tags</p>
-                      </div>
-                    </a>
-                  </div>
-                  <div className="column">
-                    <h1 className="title is-6 is-mega-menu-title">
-                      Sub Menu Title
-                    </h1>
-
-                    <a
-                      className="navbar-item "
-                      href="http://bulma.io/documentation/columns/basics/"
-                    >
-                      Columns
-                    </a>
-                  </div>
-                  <div className="column">
-                    <h1 className="title is-6 is-mega-menu-title">
-                      Sub Menu Title
-                    </h1>
-
-                    <a className="navbar-item" href="/2017/08/03/list-of-tags/">
-                      <div className="navbar-content">
-                        <p>
-                          <small className="has-text-info">03 Aug 2017</small>
-                        </p>
-                        <p>New feature: list of tags</p>
-                      </div>
-                    </a>
-                  </div>
-                  <div className="column">
-                    <h1 className="title is-6 is-mega-menu-title">
-                      Sub Menu Title
-                    </h1>
-                    <a
-                      className="navbar-item "
-                      href="/documentation/overview/start/"
-                    >
-                      Overview
-                    </a>
-                  </div>
-                </div>
-              </div>
-
-              <hr className="navbar-divider" />
-              <div className="navbar-item">
-                <div className="navbar-content">
-                  <div className="level is-mobile">
-                    <div className="level-left">
-                      <div className="level-item">
-                        <strong>Stay up to date!</strong>
-                      </div>
-                    </div>
-                    <div className="level-right">
-                      <div className="level-item">
-                        <a
-                          className="button bd-is-rss is-small"
-                          href="http://bulma.io/atom.xml"
-                        >
-                          <span className="icon is-small">
-                            <i className="fa fa-rss"></i>
-                          </span>
-                          <span>Subscribe</span>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="navbar-item">
-            <div className="field is-grouped">
-              <p className="control">
-                <Link to="/settings" className="navbar-item">
-                  Settings
-                </Link>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default Navbar;

src/client/components/shared/Navbar2.tsx

@@ -98,7 +98,7 @@ export const Navbar2 = (): ReactElement => {
               <li>
                 {/* Light/Dark Mode toggle */}
                 <div className="flex items-center space-x-2">
-                  <span className="text-gray-600 dark:text-white">Light</span>
+                  <span className="text-gray-600 dark:text-white">Dark</span>
                   <label
                     htmlFor="toggle"
                     className="relative inline-flex items-center"
@@ -117,7 +117,7 @@ export const Navbar2 = (): ReactElement => {
                       }`}
                     ></span>
                   </label>
-                  <span className="text-gray-600 dark:text-white">Dark</span>
+                  <span className="text-gray-600 dark:text-white">Light</span>
                 </div>
               </li>
             </ul>

src/client/components/shared/PopoverButton.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useFloating, offset, flip } from "@floating-ui/react-dom";
+import { useTranslation } from "react-i18next";
+import "../../shared/utils/i18n.util"; // Ensure you import your i18n configuration
+
+const PopoverButton = ({ content, clickHandler }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  // Use destructuring to obtain the reference and floating setters, among other values.
+  const { x, y, refs, strategy, floatingStyles } = useFloating({
+    placement: "right",
+    middleware: [offset(8), flip()],
+    strategy: "absolute",
+  });
+  const { t } = useTranslation();
+  return (
+    <div>
+      {/* Apply the reference setter directly to the ref prop */}
+      <button
+        ref={refs.setReference}
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onFocus={() => setIsVisible(true)}
+        onBlur={() => setIsVisible(false)}
+        aria-describedby="popover"
+        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={clickHandler}
+      >
+        <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
+        Mark as Wanted
+      </button>
+      {isVisible && (
+        <div
+          ref={refs.setFloating} // Apply the floating setter directly to the ref prop
+          style={floatingStyles}
+          className="text-sm bg-slate-400 p-2 rounded-md"
+          role="tooltip"
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PopoverButton;