🔧 Breaking apart ComicDetail page

src/client/components/ComicDetail.tsx

@@ -8,8 +8,7 @@ import React, {
 import PropTypes from "prop-types";
 import { useParams } from "react-router-dom";
 import Card from "./Carda";
-import MatchResult from "./MatchResult";
-import ComicVineSearchForm from "./ComicVineSearchForm";
+import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel";
 import AcquisitionPanel from "./AcquisitionPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import SlidingPane from "react-sliding-pane";
@@ -118,64 +117,33 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const contentForSlidingPanel = {
     CVMatches: {
       content: () => {
-        return (
-          <>
-            {!isEmpty(comicVineSearchQueryObject) &&
-            !isUndefined(comicVineSearchQueryObject) ? (
-              <div className="card search-criteria-card">
-                <div className="card-content">
-                  <ComicVineSearchForm />
-                  <p className="is-size-6">Searching against:</p>
-                  <div className="field is-grouped is-grouped-multiline">
-                    <div className="control">
-                      <div className="tags has-addons">
-                        <span className="tag">Title</span>
-                        <span className="tag is-info">
-                          {
-                            comicVineSearchQueryObject.issue.searchParams
-                              .searchTerms.name
-                          }
-                        </span>
-                      </div>
-                    </div>
-                    <div className="control">
-                      <div className="tags has-addons">
-                        <span className="tag">Number</span>
-                        <span className="tag is-info">
-                          {
-                            comicVineSearchQueryObject.issue.searchParams
-                              .searchTerms.number
-                          }
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="progress-indicator-container">
-                <div className="indicator">
-                  <Loader
-                    type="MutatingDots"
-                    color="#CCC"
-                    secondaryColor="#999"
-                    height={100}
-                    width={100}
-                    visible={comicVineAPICallProgress}
-                  />
-                </div>
-              </div>
-            )}
-            <div className="search-results-container">
-              {!isEmpty(comicVineSearchResults) && (
-                <MatchResult
-                  matchData={comicVineSearchResults}
-                  comicObjectId={comicObjectId}
+        if (!comicVineAPICallProgress) {
+          return (
+            <ComicVineMatchPanel
+              props={{
+                comicVineSearchQueryObject,
+                comicVineAPICallProgress,
+                comicVineSearchResults,
+                comicObjectId,
+              }}
+            />
+          );
+        } else {
+          return (
+            <div className="progress-indicator-container">
+              <div className="indicator">
+                <Loader
+                  type="MutatingDots"
+                  color="#CCC"
+                  secondaryColor="#999"
+                  height={100}
+                  width={100}
+                  visible={comicVineAPICallProgress}
                 />
-              )}
+              </div>
             </div>
-          </>
-        );
+          );
+        }
       },
     },
     editComicArchive: {

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -0,0 +1,62 @@
+import React, { ReactElement } from "react";
+import { ComicVineSearchForm } from "../ComicVineSearchForm";
+import MatchResult from "../MatchResult";
+import Loader from "react-loader-spinner";
+import { isEmpty } from "lodash";
+
+export const ComicVineMatchPanel = (comicVineData): ReactElement => {
+  const {
+    comicObjectId,
+    comicVineSearchQueryObject,
+    comicVineAPICallProgress,
+    comicVineSearchResults,
+  } = comicVineData.props;
+  console.log(comicVineData);
+  return (
+    <>
+      <div className="card search-criteria-card">
+        <div className="card-content">
+          <ComicVineSearchForm />
+          <p className="is-size-6">Searching against:</p>
+          <div className="field is-grouped is-grouped-multiline">
+            <div className="control">
+              <div className="tags has-addons">
+                <span className="tag">Title</span>
+                <span className="tag is-info">
+                  {
+                    comicVineSearchQueryObject.issue.searchParams.searchTerms
+                      .name
+                  }
+                </span>
+              </div>
+            </div>
+            <div className="control">
+              <div className="tags has-addons">
+                <span className="tag">Number</span>
+                <span className="tag is-info">
+                  {
+                    comicVineSearchQueryObject.issue.searchParams.searchTerms
+                      .number
+                  }
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+     
+      
+      <div className="search-results-container">
+        {!isEmpty(comicVineSearchResults) && (
+          <MatchResult
+            matchData={comicVineSearchResults}
+            comicObjectId={comicObjectId}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ComicVineMatchPanel;

src/client/components/Library.tsx

@@ -5,9 +5,9 @@ import { useTable, usePagination } from "react-table";
 import { useDispatch, useSelector } from "react-redux";
 import { getComicBooks } from "../actions/fileops.actions";
 import { isEmpty, isNil } from "lodash";
-import { RawFileDetails } from "./Library/RawFileDetails";
-import { ComicVineDetails } from "./Library/ComicVineDetails";
-import { SearchBar } from "./Library/SearchBar";
+import RawFileDetails from "./Library/RawFileDetails";
+import ComicVineDetails from "./Library/ComicVineDetails";
+import SearchBar from "./Library/SearchBar";
 
 interface IComicBookLibraryProps {
   matches?: unknown;
@@ -61,6 +61,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
               if (!isNil(value.comicvine)) {
                 return <ComicVineDetails data={value} />;
               }
+              return <div>null</div>;
             },
           },
           {