🏗️ Continued refactoring of PullList, Volumes etc.

src/client/components/Dashboard/PullList.tsx

@@ -1,10 +1,11 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useState } from "react";
 import { map } from "lodash";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
 import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 import { Link } from "react-router-dom";
+
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
 import { setupCache } from "axios-cache-interceptor";
@@ -12,6 +13,8 @@ import { useQuery } from "@tanstack/react-query";
 import "keen-slider/keen-slider.min.css";
 import { useKeenSlider } from "keen-slider/react";
 import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
+import { Field, Form } from "react-final-form";
+import DatePickerDialog from "../shared/DatePicker";
 
 type PullListProps = {
   issues: any;
@@ -24,6 +27,13 @@ const http = rateLimiter(axios.create(), {
 });
 const cachedAxios = setupCache(axios);
 export const PullList = (): ReactElement => {
+  // datepicker
+  const [selected, setSelected] = useState<Date>();
+  let footer = <p>Please pick a day.</p>;
+  if (selected) {
+    footer = <p>You picked {format(selected, "PP")}.</p>;
+  }
+
   // keen slider
   const [sliderRef, instanceRef] = useKeenSlider(
     {
@@ -47,15 +57,15 @@ export const PullList = (): ReactElement => {
     data: pullList,
     isSuccess,
     isLoading,
+    isError,
   } = useQuery({
-    queryFn: async () =>
+    queryFn: async (): any =>
       await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
         method: "get",
-        params: { startDate: "2024-2-15", pageSize: "15", currentPage: "1" },
+        params: { startDate: "2024-2-20", pageSize: "15", currentPage: "1" },
       }),
     queryKey: ["pullList"],
   });
-  console.log(pullList?.data.result);
   const addToLibrary = (sourceName: string, locgMetadata) =>
     importToDB(sourceName, { locg: locgMetadata });
 
@@ -65,6 +75,7 @@ export const PullList = (): ReactElement => {
   const previous = () => {
     // sliderRef.slickPrev();
   };
+
   return (
     <>
       <div className="content">
@@ -73,22 +84,28 @@ export const PullList = (): ReactElement => {
           subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
           iconClassNames="fa-solid fa-binoculars mr-2"
         />
-        <div className="field is-grouped">
+        <div className="flex flex-row gap-5 mb-5">
           {/* select week */}
-          <div className="control">
-            <div className="select is-small">
-              <select>
-                <option>Select Week</option>
-                <option>With options</option>
-              </select>
+          <div className="flex flex-row gap-4 my-3">
+            <Form
+              onSubmit={() => {}}
+              render={({ handleSubmit }) => (
+                <form>
+                  {/* week selection for pull list */}
+
+                  <DatePickerDialog />
+                </form>
+              )}
+            />
+            <div>
+              {/* See all pull list issues */}
+              <Link to={"/pull-list/all/"}>
+                <button 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-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500">
+                  View all issues
+                </button>
+              </Link>
             </div>
           </div>
-          {/* See all pull list issues */}
-          <div className="control">
-            <Link to={"/pull-list/all/"}>
-              <button className="button is-small">View all issues</button>
-            </Link>
-          </div>
         </div>
       </div>
 
@@ -103,14 +120,19 @@ export const PullList = (): ReactElement => {
                   hasDetails
                   title={ellipsize(issue.name, 25)}
                 >
-                  <div className="px-1 py-1">
-                    <span className="text-xs ">{issue.publisher}</span>
-                    <button
-                      className=""
-                      onClick={() => addToLibrary("locg", issue)}
-                    >
-                      Want
-                    </button>
+                  <div className="px-1">
+                    <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">
+                      {issue.publisher}
+                    </span>
+                    <div className="flex flex-row justify-end">
+                      <button
+                        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"
+                        onClick={() => addToLibrary("locg", issue)}
+                      >
+                        <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
+                        Want
+                      </button>
+                    </div>
                   </div>
                 </Card>
               </div>
@@ -118,6 +140,10 @@ export const PullList = (): ReactElement => {
           })}
         </div>
       )}
+      {isLoading ? <div>Loading...</div> : null}
+      {isError ? (
+        <div>An error occurred while retrieving the pull list.</div>
+      ) : null}
     </>
   );
 };