src/client/components/Import/Import.tsx

@@ -1,9 +1,4 @@
 import React, { ReactElement, useCallback, useEffect } from "react";
-import {
-  fetchComicBookMetadata,
-  getImportJobResultStatistics,
-  setQueueControl,
-} from "../../actions/fileops.actions";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import { format } from "date-fns";
 import Loader from "react-loader-spinner";
@@ -21,10 +16,7 @@ interface IProps {
 }
 
 /**
- * Component to facilitate comics.
- *
- * @remarks
- * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
+ * Component to facilitate the import of comics to the ThreeTwo library
  *
  * @param x - The first input number
  * @param y - The second input number
@@ -41,14 +33,6 @@ export const Import = (props: IProps): ReactElement => {
     })),
   );
 
-  //   const libraryQueueImportStatus = useSelector(
-  //     (state: RootState) => state.fileOps.LSQueueImportStatus,
-  //   );
-  //
-  //   const allImportJobResults = useSelector(
-  //     (state: RootState) => state.fileOps.importJobStatistics,
-  //   );
-
   const sessionId = localStorage.getItem("sessionId");
   const { mutate: initiateImport } = useMutation({
     mutationFn: async () =>
@@ -59,6 +43,15 @@ export const Import = (props: IProps): ReactElement => {
       }),
   });
 
+  const { data, isError, isLoading } = useQuery({
+    queryKey: ["allImportJobResults"],
+    queryFn: async () =>
+      await axios({
+        method: "GET",
+        url: "http://localhost:3000/api/jobqueue/getJobResultStatistics",
+      }),
+  });
+
   // 1a.  Act on each comic issue successfully imported/failed, as indicated
   //      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
   socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
@@ -89,10 +82,6 @@ export const Import = (props: IProps): ReactElement => {
     );
   };
 
-  useEffect(() => {
-    // dispatch(getImportJobResultStatistics());
-  }, []);
-
   const renderQueueControls = (status: string): ReactElement | null => {
     switch (status) {
       case "running":
@@ -173,6 +162,8 @@ export const Import = (props: IProps): ReactElement => {
           </button>
         </p>
 
+        {importJobQueue.status !== "drained" &&
+          !isUndefined(importJobQueue.status) && (
             <>
               <table className="table">
                 <thead>
@@ -221,11 +212,13 @@ export const Import = (props: IProps): ReactElement => {
                 {importJobQueue.mostRecentImport}
               </span>
             </>
+          )}
 
         {/* Past imports */}
-
+        {!isLoading && !isEmpty(data?.data) && (
+          <>
             <h3 className="subtitle is-4 mt-5">Past Imports</h3>
-        {/* <table className="table">
+            <table className="table">
               <thead>
                 <tr>
                   <th>Time Started</th>
@@ -236,7 +229,7 @@ export const Import = (props: IProps): ReactElement => {
               </thead>
 
               <tbody>
-            {allImportJobResults.map((jobResult, id) => {
+                {data?.data.map((jobResult, id) => {
                   return (
                     <tr key={id}>
                       <td>
@@ -264,7 +257,9 @@ export const Import = (props: IProps): ReactElement => {
                   );
                 })}
               </tbody>
-        </table> */}
+            </table>
+          </>
+        )}
       </section>
     </div>
   );