🐘 Massive refactor for graphql changes

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -1,21 +1,12 @@
-import React, { ReactElement } from "react";
+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";
 
-interface RawFileDetailsProps {
+type RawFileDetailsProps = {
   data?: {
-    rawFileDetails?: {
-      containedIn?: string;
-      name?: string;
-      fileSize?: number;
-      path?: string;
-      extension?: string;
-      mimeType?: string;
-      cover?: {
-        filePath?: string;
-      };
-    };
+    rawFileDetails?: RawFileDetailsType;
     inferredMetadata?: {
       issue?: {
         year?: string;
@@ -27,18 +18,18 @@ interface RawFileDetailsProps {
     created_at?: string;
     updated_at?: string;
   };
-  children?: any;
-}
+  children?: ReactNode;
+};
 
 export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
   const { rawFileDetails, inferredMetadata, created_at, updated_at } =
-    props.data;
+    props.data || {};
   return (
     <>
       <div className="max-w-2xl ml-5">
         <div className="px-4 sm:px-6">
           <p className="text-gray-500 dark:text-gray-400">
-            <span className="text-xl">{rawFileDetails.name}</span>
+            <span className="text-xl">{rawFileDetails?.name}</span>
           </p>
         </div>
         <div className="px-4 py-5 sm:px-6">
@@ -48,10 +39,10 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
                 Raw File Details
               </dt>
               <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {rawFileDetails.containedIn +
-                  "/" +
-                  rawFileDetails.name +
-                  rawFileDetails.extension}
+                {rawFileDetails?.containedIn}
+                {"/"}
+                {rawFileDetails?.name}
+                {rawFileDetails?.extension}
               </dd>
             </div>
             <div className="sm:col-span-1">
@@ -59,10 +50,10 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
                 Inferred Issue Metadata
               </dt>
               <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                Series Name: {inferredMetadata.issue.name}
-                {!isEmpty(inferredMetadata.issue.number) ? (
+                Series Name: {inferredMetadata?.issue?.name}
+                {!isEmpty(inferredMetadata?.issue?.number) ? (
                   <span className="tag is-primary is-light">
-                    {inferredMetadata.issue.number}
+                    {inferredMetadata?.issue?.number}
                   </span>
                 ) : null}
               </dd>
@@ -79,7 +70,7 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
                   </span>
 
                   <span className="text-md text-slate-500 dark:text-slate-900">
-                    {rawFileDetails.mimeType}
+                    {rawFileDetails?.mimeType}
                   </span>
                 </span>
               </dd>
@@ -96,7 +87,7 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
                   </span>
 
                   <span className="text-md text-slate-500 dark:text-slate-900">
-                    {prettyBytes(rawFileDetails.fileSize)}
+                    {rawFileDetails?.fileSize ? prettyBytes(rawFileDetails.fileSize) : "N/A"}
                   </span>
                 </span>
               </dd>
@@ -106,8 +97,12 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
                 Import Details
               </dt>
               <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
-                {format(parseISO(created_at), "h aaaa")}
+                {created_at ? (
+                  <>
+                    {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
+                    {format(parseISO(created_at), "h aaaa")}
+                  </>
+                ) : "N/A"}
               </dd>
             </div>
             <div className="sm:col-span-2">