src/client/components/Import.tsx

@@ -6,6 +6,7 @@ import {
 } from "../actions/fileops.actions";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";
+import { isUndefined } from "lodash";
 
 interface IProps {
   matches?: unknown;
@@ -35,6 +36,10 @@ export const Import = (props: IProps): ReactElement => {
   const failedImportJobCount = useSelector(
     (state: RootState) => state.fileOps.failedImportJobCount,
   );
+
+  const lastQueueJob = useSelector(
+    (state: RootState) => state.fileOps.lastQueueJob,
+  );
   const libraryQueueImportStatus = useSelector(
     (state: RootState) => state.fileOps.IMSCallInProgress,
   );
@@ -55,12 +60,12 @@ export const Import = (props: IProps): ReactElement => {
   }, [isImportQueuePaused]);
   const pauseIconText = (
     <>
-      <i className="fa-solid fa-pause mr-2"></i> Pause Import
+      <i className="fa-solid fa-pause mr-2"></i> Pause
     </>
   );
   const playIconText = (
     <>
-      <i className="fa-solid fa-play mr-2"></i> Resume Import
+      <i className="fa-solid fa-play mr-2"></i> Resume
     </>
   );
   return (
@@ -100,24 +105,39 @@ export const Import = (props: IProps): ReactElement => {
             <span>Start Import</span>
           </button>
         </p>
-        <div className="columns is-multiline is-half">
+        <table className="table">
-          <div className="column is-2 has-text-centered">
+          <thead>
-            <div className="box has-background-success-light">
+            <tr>
+              <th>
+                <abbr title="Position">Completed Jobs</abbr>
+              </th>
+              <th>Failed Jobs</th>
+              <th>
+                <abbr title="Played">Queue Controls</abbr>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <th>
+                <div className="box has-background-success-light has-text-centered">
                   <span className="is-size-2 has-text-weight-bold">
                     {libraryQueueResults}
                   </span>
                 </div>
-          </div>
+              </th>
-          <div className="column is-2 has-text-centered">
+              <td>
-            <div className="box has-background-danger">
+                {!isUndefined(failedImportJobCount) && (
+                  <div className="box has-background-danger has-text-centered">
                     <span className="is-size-2 has-text-weight-bold">
                       {failedImportJobCount}
                     </span>
                   </div>
-          </div>
+                )}
+              </td>
 
-          <div className="column">
+              <td>
-            <div className="content">
                 <div className="control">
                   <button
                     className="button is-warning is-light"
@@ -126,9 +146,11 @@ export const Import = (props: IProps): ReactElement => {
                     {!isImportQueuePaused ? pauseIconText : playIconText}
                   </button>
                 </div>
-            </div>
+              </td>
-          </div>
+            </tr>
-        </div>
+          </tbody>
+        </table>
+        Imported <span className="has-text-weight-bold">{lastQueueJob}</span>
       </section>
     </div>
   );

src/client/reducers/fileops.reducer.ts

@@ -58,6 +58,7 @@ const initialState = {
   libraryComics: [],
   volumes: [],
   librarySearchResultsFormatted: [],
+  lastQueueJob: "",
   librarySearchResultCount: 0,
   failedJobCount: 0,
   libraryQueueResults: [],
@@ -163,6 +164,7 @@ function fileOpsReducer(state = initialState, action) {
       return {
         ...state,
         librarySearchResultCount: action.completedJobCount,
+        lastQueueJob: action.importResult.rawFileDetails.name,
         recentComics: [...state.recentComics, action.importResult],
       };
     }