🏗️ Abstracted heading/subheading into Header

src/client/components/Dashboard/Dashboard.tsx

@@ -1,29 +1,19 @@
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
-import {
-  fetchVolumeGroups,
-  getComicBooks,
-} from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Header from "../shared/Header";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { Card } from "../shared/Carda";
 import {
   LIBRARY_SERVICE_BASE_URI,
   LIBRARY_SERVICE_HOST,
 } from "../../constants/endpoints";
-import {
-  determineCoverFile,
-  determineExternalMetadata,
-} from "../../shared/utils/metadata.utils";
 
 export const Dashboard = (): ReactElement => {
   const { data: recentComics } = useQuery({
@@ -69,43 +59,6 @@ export const Dashboard = (): ReactElement => {
     queryKey: ["volumeGroups"],
   });
 
-  console.log("hari om", volumeGroups);
-  //   useEffect(() => {
-  //     dispatch(fetchVolumeGroups());
-  //     dispatch(
-  //       getComicBooks({
-  //         paginationOptions: {
-  //           page: 0,
-  //           limit: 5,
-  //           sort: { updatedAt: "-1" },
-  //         },
-  //         predicate: { "acquisition.source.wanted": false },
-  //         comicStatus: "recent",
-  //       }),
-  //     );
-  //     dispatch(
-  //       getComicBooks({
-  //         paginationOptions: {
-  //           page: 0,
-  //           limit: 5,
-  //           sort: { updatedAt: "-1" },
-  //         },
-  //         predicate: { "acquisition.source.wanted": true },
-  //         comicStatus: "wanted",
-  //       }),
-  //     );
-  //     dispatch(getLibraryStatistics());
-  //   }, []);
-  //
-  //   const recentComics = useSelector(
-  //     (state: RootState) => state.fileOps.recentComics,
-  //   );
-  //   const wantedComics = useSelector(
-  //     (state: RootState) => state.fileOps.wantedComics,
-  //   );
-  //   const volumeGroups = useSelector(
-  //     (state: RootState) => state.fileOps.comicVolumeGroups,
-  //   );
   //
   //   const libraryStatistics = useSelector(
   //     (state: RootState) => state.comicInfo.libraryStatistics,

src/client/components/Dashboard/PullList.tsx

@@ -1,5 +1,5 @@
-import { isNil, map } from "lodash";
+import React, { ReactElement } from "react";
-import React, { createRef, ReactElement, useCallback, useEffect } from "react";
+import { map } from "lodash";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
 import { importToDB } from "../../actions/fileops.actions";
@@ -24,7 +24,7 @@ const http = rateLimiter(axios.create(), {
 });
 const cachedAxios = setupCache(axios);
 export const PullList = (): ReactElement => {
-  // blaze slider
+  // keen slider
   const [sliderRef, instanceRef] = useKeenSlider(
     {
       loop: true,
@@ -34,7 +34,6 @@ export const PullList = (): ReactElement => {
         perView: 5,
         spacing: 15,
       },
-
       slideChanged() {
         console.log("slide changed");
       },
@@ -52,7 +51,7 @@ export const PullList = (): ReactElement => {
     queryFn: async () =>
       await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
         method: "get",
-        params: { startDate: "2023-9-9", pageSize: "15", currentPage: "1" },
+        params: { startDate: "2024-2-15", pageSize: "15", currentPage: "1" },
       }),
     queryKey: ["pullList"],
   });
@@ -60,20 +59,6 @@ export const PullList = (): ReactElement => {
   const addToLibrary = (sourceName: string, locgMetadata) =>
     importToDB(sourceName, { locg: locgMetadata });
 
-  /*
-  const foo = {
-    coverFile: {}, // pointer to which cover file to use
-    rawFileDetails: {}, // #1
-    sourcedMetadata: {
-      comicInfo: {},
-      comicvine: {}, // #2
-      locg: {}, // #2
-    },
-  };
-  */
-
-  // const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
-
   const next = () => {
     // sliderRef.slickNext();
   };
@@ -116,10 +101,10 @@ export const PullList = (): ReactElement => {
                   orientation={"vertical-2"}
                   imageUrl={issue.cover}
                   hasDetails
-                  title={ellipsize(issue.name, 18)}
+                  title={ellipsize(issue.name, 25)}
                 >
-                  <div className="">
+                  <div className="px-1 py-1">
-                    <span className="">{issue.publisher}</span>
+                    <span className="text-xs ">{issue.publisher}</span>
                     <button
                       className=""
                       onClick={() => addToLibrary("locg", issue)}

src/client/components/Dashboard/RecentlyImported.tsx

@@ -9,6 +9,7 @@ import {
   determineExternalMetadata,
 } from "../../shared/utils/metadata.utils";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
+import Header from "../shared/Header";
 
 type RecentlyImportedProps = {
   comics: any;
@@ -17,19 +18,13 @@ type RecentlyImportedProps = {
 export const RecentlyImported = (
   comics: RecentlyImportedProps,
 ): ReactElement => {
-  console.log(comics);
   return (
-    <div className="mt-7">
+    <div>
-      <div className="">
+      <Header
-        <a className="" onClick={() => {}}>
+        headerContent="Recently Imported"
-          <span className="text-xl">
+        subHeaderContent="Recent Library activity such as imports, tagging, etc."
-            <i className=""></i> Recently Imported
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          </span>
+      />
-        </a>
-        <p className="">
-          Recent Library activity such as imports, tagging, etc.
-        </p>
-      </div>
       <div className="grid grid-cols-5 gap-6 mt-3">
         {comics?.comics.map(
           (

src/client/components/Dashboard/VolumeGroups.tsx

@@ -3,6 +3,7 @@ import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
 import { Link, useNavigate } from "react-router-dom";
 import Card from "../shared/Carda";
+import Header from "../shared/Header";
 
 export const VolumeGroups = (props): ReactElement => {
   // Till mongo gives us back the deduplicated results with the ObjectId
@@ -13,18 +14,12 @@ export const VolumeGroups = (props): ReactElement => {
   };
 
   return (
-    <section className="mt-7">
+    <section>
-      <div className="">
+      <Header
-        <a className="" onClick={navigateToVolumes}>
+        headerContent="Volumes"
-          <span className="text-xl">
+        subHeaderContent="Based on ComicVine Volume information"
-            <i className="fa-solid fa-layer-group"></i> Volumes
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          </span>
+      />
-          <span className="icon mt-1">
-            <i className="fa-solid fa-angle-right"></i>
-          </span>
-        </a>
-        <p className="">Based on ComicVine Volume information</p>
-      </div>
       <div className="grid grid-cols-5 gap-6 mt-3">
         {map(deduplicatedGroups, (data) => {
           return (

src/client/components/Dashboard/WantedComicsList.tsx

@@ -5,6 +5,7 @@ import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
+import Header from "../shared/Header";
 
 type WantedComicsListProps = {
   comics: any;
@@ -19,17 +20,11 @@ export const WantedComicsList = ({
   };
   return (
     <>
-      <div className="mt-7">
+      <Header
-        <a className="" onClick={navigateToWantedComics}>
+        headerContent="Wanted Comics"
-          <span className="text-xl">
+        subHeaderContent="Comics marked as wanted from various sources"
-            <i className=""></i> Wanted Comics
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          </span>
+      />
-          <span className="">
-            <i className=""></i>
-          </span>
-        </a>
-        <p className="">Comics marked as wanted from various sources.</p>
-      </div>
       <div className="grid grid-cols-5 gap-6 mt-3">
         {map(
           comics,

src/client/components/shared/Header.tsx

@@ -8,12 +8,16 @@ type IHeaderProps = {
 
 export const Header = (props: IHeaderProps): ReactElement => {
   return (
-    <>
+    <div className="mt-7">
-      <h4 className="title is-4">
+      <div className="">
-        <i className={props.iconClassNames}></i> {props.headerContent}
+        <a className="" onClick={() => {}}>
-      </h4>
+          <span className="text-xl">
-      <p className="subtitle is-7">{props.subHeaderContent}</p>
+            <i className=""></i> {props.headerContent}
-    </>
+          </span>
+        </a>
+        <p className="">{props.subHeaderContent}</p>
+      </div>
+    </div>
   );
 };