💽 ComicInfo.xml conversion and import wiring up

src/client/actions/comicinfo.actions.tsx

@@ -43,7 +43,7 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
       url: `${COMICVINE_SERVICE_URI}/getWeeklyPullList`,
       method: "get",
       params: {
-        startDate: "2022-2-28",
+        startDate: "2022-3-7",
         pageSize: "15",
         currentPage: "1",
       },

src/client/components/ComicDetail.tsx

@@ -120,6 +120,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const isComicBookMetadataAvailable =
     comicBookDetailData.sourcedMetadata &&
     !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) &&
+    !isUndefined(
+      comicBookDetailData.sourcedMetadata.comicvine.volumeInformation,
+    ) &&
     !isEmpty(comicBookDetailData.sourcedMetadata);
 
   // Tab content and header details
@@ -214,10 +217,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     );
     imagePath = escapePoundSymbol(encodedFilePath);
     comicBookTitle = comicBookDetailData.rawFileDetails.name;
-  } else if (
-    !isNil(comicBookDetailData.sourcedMetadata) &&
-    !isNil(comicBookDetailData.sourcedMetadata.comicvine)
-  ) {
+  } else if (isComicBookMetadataAvailable) {
     imagePath = comicBookDetailData.sourcedMetadata.comicvine.image.small_url;
     comicBookTitle = comicBookDetailData.sourcedMetadata.comicvine.name;
   }
@@ -254,10 +254,19 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                         inferredMetadata: comicBookDetailData.inferredMetadata,
                       }}
                     />
+                    {!isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
+                      <div className="box">
+                        <pre className="has-text-size-7">
+                          {JSON.stringify(
+                            comicBookDetailData.sourcedMetadata, null, 2
+                          )}
+                        </pre>
+                      </div>
+                    )}
                   </>
                 )}
                 {/* comic vine scraped metadata */}
-                {!isNil(comicBookDetailData.sourcedMetadata.comicvine) && (
+                {isComicBookMetadataAvailable && (
                   <ComicVineDetails
                     data={comicBookDetailData.sourcedMetadata.comicvine}
                     updatedAt={comicBookDetailData.updatedAt}

src/client/components/Dashboard/Dashboard.tsx

@@ -7,6 +7,7 @@ import { PullList } from "./PullList";
 import { getComicBooks } from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
+import prettyBytes from "pretty-bytes";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
@@ -46,7 +47,7 @@ export const Dashboard = (): ReactElement => {
 
             <h4 className="title is-4 mt-2">Statistics</h4>
             <div className="columns is-multiline">
-              <div className="column is-narrow is-one-quarter">
+              <div className="column is-narrow is-two-quarter">
                 <dl className="box">
                   <dd className="is-size-4">
                     <span className="has-text-weight-bold">
@@ -54,6 +55,14 @@ export const Dashboard = (): ReactElement => {
                     </span>{" "}
                     files
                   </dd>
+                  <dd className="is-size-4">
+                    Library size
+                    <span className="has-text-weight-bold">
+                      {" "}
+                      {libraryStatistics.comicDirectorySize &&
+                        prettyBytes(libraryStatistics.comicDirectorySize)}
+                    </span>
+                  </dd>
                   {!isUndefined(libraryStatistics.statistics) &&
                     !isEmpty(libraryStatistics.statistics[0].issues) && (
                       <dd className="is-size-6">

src/client/components/Dashboard/RecentlyImported.tsx

@@ -3,7 +3,7 @@ import Card from "../Carda";
 import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
-import { isNil, isUndefined, map } from "lodash";
+import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
@@ -21,6 +21,7 @@ export const RecentlyImported = ({
     700: 2,
     600: 2,
   };
+
   return (
     <>
       <div className="content">
@@ -37,6 +38,11 @@ export const RecentlyImported = ({
         {map(
           comicBookCovers.docs,
           ({ _id, rawFileDetails, sourcedMetadata }) => {
+            const isComicBookMetadataAvailable =
+              sourcedMetadata &&
+              !isUndefined(sourcedMetadata.comicvine) &&
+              !isUndefined(sourcedMetadata.comicvine.volumeInformation) &&
+              !isEmpty(sourcedMetadata);
             let imagePath = "";
             let comicName = "";
             if (!isNil(rawFileDetails)) {
@@ -45,7 +51,7 @@ export const RecentlyImported = ({
               );
               imagePath = escapePoundSymbol(encodedFilePath);
               comicName = rawFileDetails.name;
-            } else if (!isNil(sourcedMetadata.comicvine)) {
+            } else if (!isEmpty(sourcedMetadata.comicvine)) {
               imagePath = sourcedMetadata.comicvine.image.small_url;
               comicName = sourcedMetadata.comicvine.name;
             }
@@ -63,7 +69,7 @@ export const RecentlyImported = ({
                 title={comicName ? titleElement : null}
               >
                 <div className="content is-flex is-flex-direction-row">
-                  {!isNil(sourcedMetadata.comicvine) && (
+                  {isComicBookMetadataAvailable && (
                     <span className="icon custom-icon is-small">
                       <img src="/img/cvlogo.svg" />
                     </span>
@@ -75,7 +81,7 @@ export const RecentlyImported = ({
                     </span>
                   )}
                   {/* Issue type */}
-                  {!isUndefined(sourcedMetadata.comicvine) &&
+                  {isComicBookMetadataAvailable &&
                   !isNil(
                     detectIssueTypes(
                       sourcedMetadata.comicvine.volumeInformation.description,

src/client/components/Library.tsx

@@ -4,7 +4,7 @@ import { useHistory } from "react-router";
 import { useTable, usePagination } from "react-table";
 import { useDispatch, useSelector } from "react-redux";
 import { getComicBooks } from "../actions/fileops.actions";
-import { isEmpty, isNil } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import RawFileDetails from "./Library/RawFileDetails";
 import ComicVineDetails from "./Library/ComicVineDetails";
 import SearchBar from "./Library/SearchBar";
@@ -79,7 +79,8 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
             accessor: "sourcedMetadata",
             Cell(props) {
               return (
-                !isNil(props.cell.value.comicvine) && (
+                !isUndefined(props.cell.value) &&
+                !isUndefined(props.cell.value.comicvine) && (
                   <div>{props.cell.value.comicvine.issue_number}</div>
                 )
               );