🔧 Added checks to stats modules

src/client/components/ComicDetail.tsx

@@ -234,6 +234,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                   imageUrl={imagePath}
                   orientation={"vertical"}
                   hasDetails={false}
+                  cardContainerStyle={{ maxWidth: 275 }}
                 />
                 {/* action dropdown */}
                 <div className="mt-4 is-size-7">

src/client/components/Dashboard/Dashboard.tsx

@@ -53,14 +53,15 @@ export const Dashboard = (): ReactElement => {
                     </span>{" "}
                     files
                   </dd>
-                  {!isUndefined(libraryStatistics.statistics) && (
-                    <dd className="is-size-6">
-                      <span className="has-text-weight-bold">
-                        {libraryStatistics.statistics[0].issues.length}
-                      </span>{" "}
-                      tagged with ComicVine
-                    </dd>
-                  )}
+                  {!isUndefined(libraryStatistics.statistics) &&
+                    !isEmpty(libraryStatistics.statistics[0].issues) && (
+                      <dd className="is-size-6">
+                        <span className="has-text-weight-bold">
+                          {libraryStatistics.statistics[0].issues.length}
+                        </span>{" "}
+                        tagged with ComicVine
+                      </dd>
+                    )}
                   <dd className="is-size-6">
                     <span className="has-text-weight-bold">1304</span> with
                     custom metadata
@@ -82,24 +83,27 @@ export const Dashboard = (): ReactElement => {
               {/* file types */}
               <div className="box stats-palette p-3 column ml-5">
                 <dl>
-                  {!isUndefined(libraryStatistics.statistics) && (
-                    <dd className="is-size-6">
-                      <span className="has-text-weight-bold">
-                        {
-                          libraryStatistics.statistics[0]
-                            .publisherWithMostComicsInLibrary[0]._id
-                        }
-                      </span>
-                      {" has the most issues "}(
-                      <span className="has-text-weight-bold">
-                        {
-                          libraryStatistics.statistics[0]
-                            .publisherWithMostComicsInLibrary[0].count
-                        }
-                      </span>
-                      )
-                    </dd>
-                  )}
+                  {!isUndefined(libraryStatistics.statistics) &&
+                    !isEmpty(
+                      libraryStatistics.statistics[0]
+                        .publisherWithMostComicsInLibrary[0],
+                    ) && (
+                      <dd className="is-size-6">
+                        <span className="has-text-weight-bold">
+                          {
+                            libraryStatistics.statistics[0]
+                              .publisherWithMostComicsInLibrary[0]._id
+                          }
+                        </span>
+                        {" has the most issues "}
+                        <span className="has-text-weight-bold">
+                          {
+                            libraryStatistics.statistics[0]
+                              .publisherWithMostComicsInLibrary[0].count
+                          }
+                        </span>
+                      </dd>
+                    )}
                   <dd className="is-size-6">
                     <span className="has-text-weight-bold">304</span> Volumes
                   </dd>

src/client/components/Dashboard/PullList.tsx

@@ -85,12 +85,12 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
           <div className="field has-addons">
             <div className="control">
               <button className="button is-rounded is-small" onClick={previous}>
-              <i className="fa-solid fa-caret-left"></i>
+                <i className="fa-solid fa-caret-left"></i>
               </button>
             </div>
             <div className="control">
               <button className="button is-rounded is-small" onClick={next}>
-              <i className="fa-solid fa-caret-right"></i>
+                <i className="fa-solid fa-caret-right"></i>
               </button>
             </div>
           </div>

src/client/components/VolumeDetail/PotentialLibraryMatches.tsx

@@ -9,7 +9,6 @@ import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 import prettyBytes from "pretty-bytes";
 
 const PotentialLibraryMatches = (props): ReactElement => {
-  console.log(props);
   const dispatch = useDispatch();
   const comicBooks = useSelector(
     (state: RootState) => state.comicInfo.comicBooksDetails,

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -178,6 +178,7 @@ const VolumeDetails = (props): ReactElement => {
                   comicBookDetails.sourcedMetadata.comicvine.volumeInformation
                     .image.small_url
                 }
+                cardContainerStyle={{ maxWidth: 275 }}
                 orientation={"vertical"}
                 hasDetails={false}
               />