🏗️ Refactored ComicDetailContainer with useQuery

src/client/components/ComicDetail/ComicDetail.tsx

@@ -46,6 +46,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       rawFileDetails,
       inferredMetadata,
       sourcedMetadata: { comicvine, locg, comicInfo },
+      acquisition,
     },
     userSettings,
   } = data;
@@ -99,7 +100,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     CVMatches: {
       content: (props) => (
         <>
-          <div className="card search-criteria-card">
+          {/* <div className="card search-criteria-card">
             <div className="card-content">
               <ComicVineSearchForm data={rawFileDetails} />
             </div>
@@ -133,7 +134,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 />
               </div>
             </div>
-          )}
+          )} */}
         </>
       ),
     },
@@ -192,7 +193,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       id: 3,
       icon: <i className="fa-regular fa-file-archive"></i>,
       name: "Archive Operations",
-      content: <ArchiveOperations data={data.data} key={3} />,
+      content: <></>,
+      /*
+      <ArchiveOperations data={data.data} key={3} /> */
       shouldShow: areRawFileDetailsAvailable,
     },
     {
@@ -284,7 +287,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                         Read
                       </button>
 
-                      <Modal
+                      {/* <Modal
                         style={{ content: { marginTop: "2rem" } }}
                         isOpen={modalIsOpen}
                         onAfterOpen={afterOpenModal}
@@ -301,13 +304,16 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                             }}
                           />
                         )}
-                      </Modal>
+                      </Modal> */}
                     </>
                   )}
               </div>
             </div>
 
-            {<TabControls filteredTabs={filteredTabs} />}
+            <TabControls
+              filteredTabs={filteredTabs}
+              acquisition={acquisition}
+            />
 
             <SlidingPane
               isOpen={visible}

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -3,17 +3,40 @@ import React, { ReactElement, useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { getComicBookDetailById } from "../../actions/comicinfo.actions";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
+import { useQuery } from "@tanstack/react-query";
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
+import axios from "axios";
 
 export const ComicDetailContainer = (): ReactElement | null => {
-  // const comicBookDetailData = useSelector(
-  //   (state: RootState) => state.comicInfo.comicBookDetail,
-  // );
-
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  console.log(comicObjectId);
+  const {
+    data: comicBookDetailData,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: [],
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
+        method: "POST",
+        data: {
+          id: comicObjectId,
+        },
+      }),
+  });
+  console.log(comicBookDetailData);
   useEffect(() => {
     // dispatch(getComicBookDetailById(comicObjectId));
     // dispatch(getSettings());
   }, []);
-  return <ComicDetail data={comicBookDetailData} />;
+
+  {
+    isError && <>Error</>;
+  }
+  {
+    isLoading && <>Loading...</>;
+  }
+  return (
+    comicBookDetailData?.data && <ComicDetail data={comicBookDetailData.data} />
+  );
 };

src/client/components/ComicDetail/TabControls.tsx

@@ -5,13 +5,13 @@ export const TabControls = (props): ReactElement => {
   // const comicBookDetailData = useSelector(
   //   (state: RootState) => state.comicInfo.comicBookDetail,
   // );
-  const { filteredTabs } = props;
+  const { filteredTabs, acquisition } = props;
-
   const [active, setActive] = useState(filteredTabs[0].id);
   useEffect(() => {
     setActive(filteredTabs[0].id);
-  }, [comicBookDetailData]);
+  }, [acquisition]);
 
+  console.log(filteredTabs);
   return (
     <>
       <div className="tabs">
@@ -24,15 +24,11 @@ export const TabControls = (props): ReactElement => {
             >
               {/* Downloads tab and count badge */}
               <a>
-                {id === 6 &&
+                {id === 6 && !isNil(acquisition.directconnect) ? (
-                !isNil(comicBookDetailData.acquisition.directconnect) ? (
                   <span className="download-icon-labels">
                     <i className="fa-solid fa-download"></i>
                     <span className="tag downloads-count is-info is-light">
-                      {
+                      {acquisition.directconnect.downloads.length}
-                        comicBookDetailData.acquisition.directconnect.downloads
-                          .length
-                      }
                     </span>
                   </span>
                 ) : (