📆 Wired up the datepicker to LoCG pull list

src/client/components/Dashboard/PullList.tsx

@@ -15,6 +15,7 @@ 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";
+import { format } from "date-fns";
 
 type PullListProps = {
   issues: any;
@@ -28,11 +29,10 @@ 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>;
-  }
+  const date = new Date();
+  const [inputValue, setInputValue] = useState<string>(
+    format(date, "M-dd-yyyy"),
+  );
 
   // keen slider
   const [sliderRef, instanceRef] = useKeenSlider(
@@ -55,6 +55,7 @@ export const PullList = (): ReactElement => {
 
   const {
     data: pullList,
+    refetch,
     isSuccess,
     isLoading,
     isError,
@@ -62,9 +63,9 @@ export const PullList = (): ReactElement => {
     queryFn: async (): any =>
       await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
         method: "get",
-        params: { startDate: "2024-2-20", pageSize: "15", currentPage: "1" },
+        params: { startDate: inputValue, pageSize: "15", currentPage: "1" },
       }),
-    queryKey: ["pullList"],
+    queryKey: ["pullList", inputValue],
   });
   const addToLibrary = (sourceName: string, locgMetadata) =>
     importToDB(sourceName, { locg: locgMetadata });
@@ -83,28 +84,30 @@ export const PullList = (): ReactElement => {
           headerContent="Discover"
           subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
           iconClassNames="fa-solid fa-binoculars mr-2"
+          link="/pull-list/all/"
         />
-        <div className="flex flex-row gap-5 mb-5">
+        <div className="flex flex-row gap-5 mb-3">
           {/* select week */}
           <div className="flex flex-row gap-4 my-3">
             <Form
               onSubmit={() => {}}
               render={({ handleSubmit }) => (
                 <form>
-                  {/* week selection for pull list */}
-
-                  <DatePickerDialog />
+                  <div className="flex flex-col gap-2">
+                    {/* week selection for pull list */}
+                    <DatePickerDialog
+                      inputValue={inputValue}
+                      setter={setInputValue}
+                    />
+                    {inputValue && (
+                      <div className="text-sm">
+                        Showing pull list for <span>{inputValue}</span>
+                      </div>
+                    )}
+                  </div>
                 </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>
         </div>
       </div>

src/client/components/shared/DatePicker.tsx

@@ -1,13 +1,14 @@
 import React, { ChangeEventHandler, useRef, useState } from "react";
 
-import { format, isValid, parse } from "date-fns";
+import { format, isValid, parse, parseISO } from "date-fns";
 import FocusTrap from "focus-trap-react";
 import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
 import { usePopper } from "react-popper";
 
-export default function DatePickerDialog() {
+export const DatePickerDialog = (props) => {
+  console.log(props);
+  const { setter, apiAction } = props;
   const [selected, setSelected] = useState<Date>();
-  const [inputValue, setInputValue] = useState<string>("");
   const [isPopperOpen, setIsPopperOpen] = useState(false);
 
   const popperRef = useRef<HTMLDivElement>(null);
@@ -16,6 +17,39 @@ export default function DatePickerDialog() {
     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 popper = usePopper(popperRef.current, popperElement, {
     placement: "bottom-start",
   });
@@ -25,16 +59,6 @@ export default function DatePickerDialog() {
     buttonRef?.current?.focus();
   };
 
-  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setInputValue(e.currentTarget.value);
-    const date = parse(e.currentTarget.value, "y-MM-dd", new Date());
-    if (isValid(date)) {
-      setSelected(date);
-    } else {
-      setSelected(undefined);
-    }
-  };
-
   const handleButtonClick = () => {
     setIsPopperOpen(true);
   };
@@ -42,29 +66,27 @@ export default function DatePickerDialog() {
   const handleDaySelect: SelectSingleEventHandler = (date) => {
     setSelected(date);
     if (date) {
-      setInputValue(format(date, "y-MM-dd"));
+      setter(format(date, "M-dd-yyyy"));
+      apiAction();
       closePopper();
     } else {
-      setInputValue("");
+      setter("");
     }
   };
 
   return (
     <div>
       <div ref={popperRef}>
-        <input
-          size={12}
-          type="text"
-          placeholder={format(new Date(), "y-MM-dd")}
-          value={inputValue}
-          onChange={handleInputChange}
-        />
         <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"
         >
+          <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>
@@ -82,7 +104,7 @@ export default function DatePickerDialog() {
           <div
             tabIndex={-1}
             style={popper.styles.popper}
-            className="bg-slate-200 p-2 rounded-lg z-50"
+            className="bg-slate-200 mt-3 p-2 rounded-lg z-50"
             {...popper.attributes.popper}
             ref={setPopperElement}
             role="dialog"
@@ -94,10 +116,13 @@ export default function DatePickerDialog() {
               defaultMonth={selected}
               selected={selected}
               onSelect={handleDaySelect}
+              styles={customStyles}
             />
           </div>
         </FocusTrap>
       )}
     </div>
   );
-}
+};
+
+export default DatePickerDialog;