frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🏗️ Added null check and removed useless deps

Browse Source
This commit is contained in:
Rishi Ghan
2023-11-15 10:46:36 -06:00
parent be51f9b8f2
commit 794fd9b3a0
1 changed files with 103 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/client/components/Import/Import.tsx
View File

@@ -1,9 +1,4 @@
import React, { ReactElement, useCallback, useEffect } from "react"; 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 "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import { format } from "date-fns"; import { format } from "date-fns";
import Loader from "react-loader-spinner"; import Loader from "react-loader-spinner";
@@ -21,10 +16,7 @@ interface IProps {
} }
/** /**
* Component to facilitate comics. * Component to facilitate the import of comics to the ThreeTwo library
*
* @remarks
* This method is part of the {@link core-library#Statistics | Statistics subsystem}.
* *
* @param x - The first input number * @param x - The first input number
* @param y - The second 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 sessionId = localStorage.getItem("sessionId");
const { mutate: initiateImport } = useMutation({ const { mutate: initiateImport } = useMutation({
mutationFn: async () => 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 // 1a. Act on each comic issue successfully imported/failed, as indicated
// by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events // by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
socketIOInstance.on("LS_COVER_EXTRACTED", (data) => { 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 => { const renderQueueControls = (status: string): ReactElement | null => {
switch (status) { switch (status) {
case "running": case "running":
@@ -173,98 +162,104 @@ export const Import = (props: IProps): ReactElement => {
</button> </button>
</p> </p>
<> {importJobQueue.status !== "drained" &&
<table className="table"> !isUndefined(importJobQueue.status) && (
<thead> <>
<tr> <table className="table">
<th>Completed Jobs</th> <thead>
<th>Failed Jobs</th> <tr>
<th>Queue Controls</th> <th>Completed Jobs</th>
<th>Queue Status</th> <th>Failed Jobs</th>
</tr> <th>Queue Controls</th>
</thead> <th>Queue Status</th>
</tr>
</thead>
<tbody> <tbody>
<tr> <tr>
<th> <th>
{importJobQueue.successfulJobCount > 0 && ( {importJobQueue.successfulJobCount > 0 && (
<div className="box has-background-success-light has-text-centered"> <div className="box has-background-success-light has-text-centered">
<span className="is-size-2 has-text-weight-bold"> <span className="is-size-2 has-text-weight-bold">
{importJobQueue.successfulJobCount} {importJobQueue.successfulJobCount}
</span> </span>
</div> </div>
)} )}
</th> </th>
<td> <td>
{importJobQueue.failedJobCount > 0 && ( {importJobQueue.failedJobCount > 0 && (
<div className="box has-background-danger has-text-centered"> <div className="box has-background-danger has-text-centered">
<span className="is-size-2 has-text-weight-bold"> <span className="is-size-2 has-text-weight-bold">
{importJobQueue.failedJobCount} {importJobQueue.failedJobCount}
</span> </span>
</div> </div>
)} )}
</td> </td>
<td>{renderQueueControls(importJobQueue.status)}</td> <td>{renderQueueControls(importJobQueue.status)}</td>
<td> <td>
{importJobQueue.status !== undefined ? ( {importJobQueue.status !== undefined ? (
<span className="tag is-warning"> <span className="tag is-warning">
{importJobQueue.status} {importJobQueue.status}
</span> </span>
) : null} ) : null}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
Imported{" "} Imported{" "}
<span className="has-text-weight-bold"> <span className="has-text-weight-bold">
{importJobQueue.mostRecentImport} {importJobQueue.mostRecentImport}
</span> </span>
</> </>
)}
{/* Past imports */} {/* Past imports */}
{!isLoading && !isEmpty(data?.data) && (
<h3 className="subtitle is-4 mt-5">Past Imports</h3> <>
{/* <table className="table"> <h3 className="subtitle is-4 mt-5">Past Imports</h3>
<thead> <table className="table">
<tr> <thead>
<th>Time Started</th> <tr>
<th>Session Id</th> <th>Time Started</th>
<th>Imported</th> <th>Session Id</th>
<th>Failed</th> <th>Imported</th>
</tr> <th>Failed</th>
</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>
</tr> </tr>
); </thead>
})}
</tbody> <tbody>
</table> */} {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> </section>
</div> </div>
); );