From 794fd9b3a0e650031e7231b682986b5614c86f3f Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 15 Nov 2023 10:46:36 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Added=20null=20check=20?=
 =?UTF-8?q?and=20removed=20useless=20deps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Import/Import.tsx | 211 ++++++++++++------------
 1 file changed, 103 insertions(+), 108 deletions(-)

diff --git a/src/client/components/Import/Import.tsx b/src/client/components/Import/Import.tsx
index 86cd845..d370e4d 100644
--- a/src/client/components/Import/Import.tsx
+++ b/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,98 +162,104 @@ export const Import = (props: IProps): ReactElement => {
           </button>
         </p>
 
-        <>
-          <table className="table">
-            <thead>
-              <tr>
-                <th>Completed Jobs</th>
-                <th>Failed Jobs</th>
-                <th>Queue Controls</th>
-                <th>Queue Status</th>
-              </tr>
-            </thead>
+        {importJobQueue.status !== "drained" &&
+          !isUndefined(importJobQueue.status) && (
+            <>
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>Completed Jobs</th>
+                    <th>Failed Jobs</th>
+                    <th>Queue Controls</th>
+                    <th>Queue Status</th>
+                  </tr>
+                </thead>
 
-            <tbody>
-              <tr>
-                <th>
-                  {importJobQueue.successfulJobCount > 0 && (
-                    <div className="box has-background-success-light has-text-centered">
-                      <span className="is-size-2 has-text-weight-bold">
-                        {importJobQueue.successfulJobCount}
-                      </span>
-                    </div>
-                  )}
-                </th>
-                <td>
-                  {importJobQueue.failedJobCount > 0 && (
-                    <div className="box has-background-danger has-text-centered">
-                      <span className="is-size-2 has-text-weight-bold">
-                        {importJobQueue.failedJobCount}
-                      </span>
-                    </div>
-                  )}
-                </td>
+                <tbody>
+                  <tr>
+                    <th>
+                      {importJobQueue.successfulJobCount > 0 && (
+                        <div className="box has-background-success-light has-text-centered">
+                          <span className="is-size-2 has-text-weight-bold">
+                            {importJobQueue.successfulJobCount}
+                          </span>
+                        </div>
+                      )}
+                    </th>
+                    <td>
+                      {importJobQueue.failedJobCount > 0 && (
+                        <div className="box has-background-danger has-text-centered">
+                          <span className="is-size-2 has-text-weight-bold">
+                            {importJobQueue.failedJobCount}
+                          </span>
+                        </div>
+                      )}
+                    </td>
 
-                <td>{renderQueueControls(importJobQueue.status)}</td>
-                <td>
-                  {importJobQueue.status !== undefined ? (
-                    <span className="tag is-warning">
-                      {importJobQueue.status}
-                    </span>
-                  ) : null}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          Imported{" "}
-          <span className="has-text-weight-bold">
-            {importJobQueue.mostRecentImport}
-          </span>
-        </>
+                    <td>{renderQueueControls(importJobQueue.status)}</td>
+                    <td>
+                      {importJobQueue.status !== undefined ? (
+                        <span className="tag is-warning">
+                          {importJobQueue.status}
+                        </span>
+                      ) : null}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              Imported{" "}
+              <span className="has-text-weight-bold">
+                {importJobQueue.mostRecentImport}
+              </span>
+            </>
+          )}
 
         {/* Past imports */}
-
-        <h3 className="subtitle is-4 mt-5">Past Imports</h3>
-        {/* <table className="table">
-          <thead>
-            <tr>
-              <th>Time Started</th>
-              <th>Session Id</th>
-              <th>Imported</th>
-              <th>Failed</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {allImportJobResults.map((jobResult, id) => {
-              return (
-                <tr key={id}>
-                  <td>
-                    {format(
-                      new Date(jobResult.earliestTimestamp),
-                      "EEEE, hh:mma, do LLLL Y",
-                    )}
-                  </td>
-                  <td>
-                    <span className="tag is-warning">
-                      {jobResult.sessionId}
-                    </span>
-                  </td>
-                  <td>
-                    <span className="tag is-success">
-                      {jobResult.completedJobs}
-                    </span>
-                  </td>
-                  <td>
-                    <span className="tag is-danger">
-                      {jobResult.failedJobs}
-                    </span>
-                  </td>
+        {!isLoading && !isEmpty(data?.data) && (
+          <>
+            <h3 className="subtitle is-4 mt-5">Past Imports</h3>
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Time Started</th>
+                  <th>Session Id</th>
+                  <th>Imported</th>
+                  <th>Failed</th>
                 </tr>
-              );
-            })}
-          </tbody>
-        </table> */}
+              </thead>
+
+              <tbody>
+                {data?.data.map((jobResult, id) => {
+                  return (
+                    <tr key={id}>
+                      <td>
+                        {format(
+                          new Date(jobResult.earliestTimestamp),
+                          "EEEE, hh:mma, do LLLL Y",
+                        )}
+                      </td>
+                      <td>
+                        <span className="tag is-warning">
+                          {jobResult.sessionId}
+                        </span>
+                      </td>
+                      <td>
+                        <span className="tag is-success">
+                          {jobResult.completedJobs}
+                        </span>
+                      </td>
+                      <td>
+                        <span className="tag is-danger">
+                          {jobResult.failedJobs}
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </>
+        )}
       </section>
     </div>
   );