🏗️ Continued refactoring of PullList, Volumes etc.

src/client/components/shared/DatePicker.tsx

@@ -0,0 +1,103 @@
+import React, { ChangeEventHandler, useRef, useState } from "react";
+
+import { format, isValid, parse } 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() {
+  const [selected, setSelected] = useState<Date>();
+  const [inputValue, setInputValue] = useState<string>("");
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+
+  const popperRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const popper = usePopper(popperRef.current, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const closePopper = () => {
+    setIsPopperOpen(false);
+    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);
+  };
+
+  const handleDaySelect: SelectSingleEventHandler = (date) => {
+    setSelected(date);
+    if (date) {
+      setInputValue(format(date, "y-MM-dd"));
+      closePopper();
+    } else {
+      setInputValue("");
+    }
+  };
+
+  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}
+        >
+          Pick a date
+        </button>
+      </div>
+      {isPopperOpen && (
+        <FocusTrap
+          active
+          focusTrapOptions={{
+            initialFocus: false,
+            allowOutsideClick: true,
+            clickOutsideDeactivates: true,
+            onDeactivate: closePopper,
+            fallbackFocus: buttonRef.current || undefined,
+          }}
+        >
+          <div
+            tabIndex={-1}
+            style={popper.styles.popper}
+            className="bg-slate-200 p-2 rounded-lg z-50"
+            {...popper.attributes.popper}
+            ref={setPopperElement}
+            role="dialog"
+            aria-label="DayPicker calendar"
+          >
+            <DayPicker
+              initialFocus={isPopperOpen}
+              mode="single"
+              defaultMonth={selected}
+              selected={selected}
+              onSelect={handleDaySelect}
+            />
+          </div>
+        </FocusTrap>
+      )}
+    </div>
+  );
+}

src/client/components/shared/Header.tsx

@@ -1,20 +1,29 @@
 import React, { ReactElement } from "react";
+import { Link } from "react-router-dom";
 
 type IHeaderProps = {
   headerContent: string;
   subHeaderContent: string;
   iconClassNames: string;
+  link?: string;
 };
 
 export const Header = (props: IHeaderProps): ReactElement => {
   return (
     <div className="mt-7">
       <div className="">
-        <a className="" onClick={() => {}}>
-          <span className="text-xl">
-            <i className=""></i> {props.headerContent}
-          </span>
-        </a>
+        {props.link ? (
+          <Link to={props.link}>
+            <span className="text-xl">
+              <span className="underline">
+                {props.headerContent}{" "}
+                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+              </span>
+            </span>
+          </Link>
+        ) : (
+          <div className="text-xl">{props.headerContent}</div>
+        )}
         <p className="">{props.subHeaderContent}</p>
       </div>
     </div>

src/client/components/shared/MetadataPanel.tsx

@@ -16,6 +16,7 @@ interface IMetadatPanelProps {
   containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
+  console.log(props);
   const {
     rawFileDetails,
     inferredMetadata,
@@ -114,7 +115,6 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 </span>
               </span>
             </dd>
-
             <dd className="is-size-7">
               <span>
                 {ellipsize(
@@ -127,42 +127,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 )}
               </span>
             </dd>
-
             <dd className="is-size-7 mt-2">
-              <div className="field is-grouped is-grouped-multiline">
-                <div className="control">
-                  <span className="tags">
-                    <span
-                      className="tag is-success is-light has-text-weight-semibold"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.volumeInformation.start_year}
-                    </span>
-                    <span
-                      className="tag is-success is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.volumeInformation.count_of_issues}
-                    </span>
-                  </span>
-                </div>
-                <div className="control">
-                  <div className="tags has-addons">
-                    <span
-                      className="tag is-primary is-light"
-                      style={props.tagsStyle}
-                    >
-                      ComicVine ID
-                    </span>
-                    <span
-                      className="tag is-info is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.id}
-                    </span>
-                  </div>
-                </div>
-              </div>
+              <span className="my-3 mx-2">
+                {comicvine.volumeInformation.start_year}
+              </span>
+              {comicvine.volumeInformation.count_of_issues}
+              ComicVine ID
+              {comicvine.id}
             </dd>
           </dl>
         ),

src/client/components/shared/Navbar2.tsx

@@ -52,12 +52,12 @@ export const Navbar2 = (): ReactElement => {
               </li>
 
               <li>
-                <a
+                <Link
+                  to="/volumes"
                   className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                  href="/"
                 >
                   Volumes
-                </a>
+                </Link>
               </li>
 
               <li>
@@ -69,12 +69,12 @@ export const Navbar2 = (): ReactElement => {
                 </a>
               </li>
               <li>
-                <a
+                <Link
                   className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                  href="/search"
+                  to="/search"
                 >
                   Comicvine Search
-                </a>
+                </Link>
               </li>
             </ul>
           </nav>