🔨 ComicDetail grqphQL refactor

src/client/components/ComicDetail/ComicDetail.tsx

@@ -67,13 +67,8 @@ type ComicDetailProps = {
 };
 
 /**
- * Component for displaying the metadata for a comic in greater detail.
- *
- * @component
- * @example
- * return (
- *   <ComicDetail/>
- * )
+ * Displays full comic detail: cover, file info, action menu, and tabbed panels
+ * for metadata, archive operations, and acquisition.
  */
 export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const {
@@ -84,7 +79,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       sourcedMetadata: { comicvine, locg, comicInfo },
       acquisition,
       createdAt,
-      updatedAt,
     },
     userSettings,
     queryClient,
@@ -94,24 +88,10 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const [activeTab, setActiveTab] = useState<number | undefined>(undefined);
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
-  const [modalIsOpen, setIsOpen] = useState(false);
 
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   const { comicVineMatches, prepareAndFetchMatches } = useComicVineMatching();
 
-  // Modal handlers (currently unused but kept for future use)
-  const openModal = useCallback((filePath: string) => {
-    setIsOpen(true);
-  }, []);
-
-  const afterOpenModal = useCallback((things: any) => {
-    // Modal opened callback
-  }, []);
-
-  const closeModal = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
   // Action event handlers
   const openDrawerWithCVMatches = () => {
     prepareAndFetchMatches(rawFileDetails, comicvine);
@@ -224,10 +204,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                     <div className="grid">
                       <RawFileDetails
                         data={{
-                          rawFileDetails: rawFileDetails,
-                          inferredMetadata: inferredMetadata,
-                          created_at: createdAt,
-                          updated_at: updatedAt,
+                          rawFileDetails,
+                          inferredMetadata,
+                          createdAt,
                         }}
                       >
                         {/* action dropdown */}

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -1,12 +1,21 @@
 import React, { ReactElement } from "react";
-import { ComicVineSearchForm } from "../ComicVineSearchForm";
 import MatchResult from "./MatchResult";
 import { isEmpty } from "lodash";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 
-export const ComicVineMatchPanel = (comicVineData): ReactElement => {
-  const { comicObjectId, comicVineMatches, queryClient, onMatchApplied } = comicVineData.props;
+interface ComicVineMatchPanelProps {
+  props: {
+    comicObjectId: string;
+    comicVineMatches: any[];
+    queryClient?: any;
+    onMatchApplied?: () => void;
+  };
+}
+
+/** Displays ComicVine search results or a status message while searching. */
+export const ComicVineMatchPanel = ({ props: comicVineData }: ComicVineMatchPanelProps): ReactElement => {
+  const { comicObjectId, comicVineMatches, queryClient, onMatchApplied } = comicVineData;
   const { comicvine } = useStore(
     useShallow((state) => ({
       comicvine: state.comicvine,

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -1,55 +1,41 @@
-import React, { ReactElement, useCallback, useEffect, useState } from "react";
-import { Form, Field } from "react-final-form";
+import React, { ReactElement } from "react";
+import { Form, Field, FieldRenderProps } from "react-final-form";
 import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
 import AsyncSelectPaginate from "./AsyncSelectPaginate/AsyncSelectPaginate";
 import TextareaAutosize from "react-textarea-autosize";
 
-export const EditMetadataPanel = (props): ReactElement => {
-  const validate = async () => {};
+interface EditMetadataPanelProps {
+  data: {
+    name?: string;
+    [key: string]: any;
+  };
+}
+
+/** Adapts react-final-form's Field render prop to AsyncSelectPaginate. */
+const AsyncSelectPaginateAdapter = ({ input, ...rest }: FieldRenderProps<any>) => (
+  <AsyncSelectPaginate {...input} {...rest} onChange={(value) => input.onChange(value)} />
+);
+
+/** Adapts react-final-form's Field render prop to TextareaAutosize. */
+const TextareaAutosizeAdapter = ({ input, ...rest }: FieldRenderProps<any>) => (
+  <TextareaAutosize {...input} {...rest} onChange={(value) => input.onChange(value)} />
+);
+
+/** Sliding panel form for manually editing comic metadata fields. */
+export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElement => {
   const onSubmit = async () => {};
 
-  const { data } = props;
-
-  const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
-    return (
-      <AsyncSelectPaginate
-        {...input}
-        {...rest}
-        onChange={(value) => input.onChange(value)}
-      />
-    );
-  };
-  const TextareaAutosizeAdapter = ({ input, ...rest }) => {
-    return (
-      <TextareaAutosize
-        {...input}
-        {...rest}
-        onChange={(value) => input.onChange(value)}
-      />
-    );
-  };
-  // const rawFileDetails = useSelector(
-  //   (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
-  // );
-
   return (
     <>
       <Form
         onSubmit={onSubmit}
-        validate={validate}
-        mutators={{
-          ...arrayMutators,
-        }}
+        mutators={{ ...arrayMutators }}
         render={({
           handleSubmit,
           form: {
             mutators: { push, pop },
-          }, // injected from final-form-arrays above
-          pristine,
-          form,
-          submitting,
-          values,
+          },
         }) => (
           <form onSubmit={handleSubmit}>
             {/* Issue Name */}
@@ -80,7 +66,6 @@ export const EditMetadataPanel = (props): ReactElement => {
                 <p className="text-xs">Do not enter the first zero</p>
               </div>
               <div>
-                {/* year */}
                 <div className="text-sm">Issue Year</div>
                 <Field
                   name="issue_year"
@@ -100,8 +85,6 @@ export const EditMetadataPanel = (props): ReactElement => {
               </div>
             </div>
 
-            {/* page count */}
-
             {/* Description */}
             <div className="mt-2">
               <label className="text-sm">Description</label>
@@ -113,7 +96,7 @@ export const EditMetadataPanel = (props): ReactElement => {
               />
             </div>
 
-            <hr size="1" />
+            <hr />
 
             <div className="field is-horizontal">
               <div className="field-label">
@@ -153,7 +136,7 @@ export const EditMetadataPanel = (props): ReactElement => {
               </div>
             </div>
 
-            <hr size="1" />
+            <hr />
 
             {/* Publisher */}
             <div className="field is-horizontal">
@@ -224,7 +207,7 @@ export const EditMetadataPanel = (props): ReactElement => {
               </div>
             </div>
 
-            <hr size="1" />
+            <hr />
 
             {/* team credits */}
             <div className="field is-horizontal">
@@ -302,7 +285,6 @@ export const EditMetadataPanel = (props): ReactElement => {
                 ))
               }
             </FieldArray>
-            <pre>{JSON.stringify(values, undefined, 2)}</pre>
           </form>
         )}
       />

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -1,29 +1,24 @@
 import React, { ReactElement, ReactNode } from "react";
 import prettyBytes from "pretty-bytes";
 import { isEmpty } from "lodash";
-import { format, parseISO } from "date-fns";
-import { RawFileDetails as RawFileDetailsType } from "../../graphql/generated";
+import { format, parseISO, isValid } from "date-fns";
+import {
+  RawFileDetails as RawFileDetailsType,
+  InferredMetadata,
+} from "../../graphql/generated";
 
 type RawFileDetailsProps = {
   data?: {
     rawFileDetails?: RawFileDetailsType;
-    inferredMetadata?: {
-      issue?: {
-        year?: string;
-        name?: string;
-        number?: number;
-        subtitle?: string;
-      };
-    };
-    created_at?: string;
-    updated_at?: string;
+    inferredMetadata?: InferredMetadata;
+    createdAt?: string;
   };
   children?: ReactNode;
 };
 
+/** Renders raw file info, inferred metadata, and import timestamp for a comic. */
 export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
-  const { rawFileDetails, inferredMetadata, created_at, updated_at } =
-    props.data || {};
+  const { rawFileDetails, inferredMetadata, createdAt } = props.data || {};
   return (
     <>
       <div className="max-w-2xl ml-5">
@@ -97,10 +92,10 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
                 Import Details
               </dt>
               <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {created_at ? (
+                {createdAt && isValid(parseISO(createdAt)) ? (
                   <>
-                    {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
-                    {format(parseISO(created_at), "h aaaa")}
+                    {format(parseISO(createdAt), "dd MMMM, yyyy")},{" "}
+                    {format(parseISO(createdAt), "h aaaa")}
                   </>
                 ) : "N/A"}
               </dd>