🔧 Hardening the import UX

src/client/components/Import.tsx

@@ -34,8 +34,8 @@ interface IProps {
 
 export const Import = (props: IProps): ReactElement => {
   const dispatch = useDispatch();
-  const libraryQueueResults = useSelector(
-    (state: RootState) => state.fileOps.librarySearchResultCount,
+  const successfulImportJobCount = useSelector(
+    (state: RootState) => state.fileOps.successfulJobCount,
   );
   const failedImportJobCount = useSelector(
     (state: RootState) => state.fileOps.failedJobCount,
@@ -149,16 +149,16 @@ export const Import = (props: IProps): ReactElement => {
           <tbody>
             <tr>
               <th>
-                {libraryQueueResults && (
+                {successfulImportJobCount > 0 && (
                   <div className="box has-background-success-light has-text-centered">
                     <span className="is-size-2 has-text-weight-bold">
-                      {libraryQueueResults}
+                      {successfulImportJobCount}
                     </span>
                   </div>
                 )}
               </th>
               <td>
-                {!isUndefined(failedImportJobCount) && (
+                {failedImportJobCount > 0 && (
                   <div className="box has-background-danger has-text-centered">
                     <span className="is-size-2 has-text-weight-bold">
                       {failedImportJobCount}
@@ -171,7 +171,13 @@ export const Import = (props: IProps): ReactElement => {
             </tr>
           </tbody>
         </table>
-        Imported <span className="has-text-weight-bold">{lastQueueJob}</span>
+        {libraryQueueImportStatus !== "drained" &&
+          !isUndefined(libraryQueueImportStatus) && (
+            <>
+              Imported{" "}
+              <span className="has-text-weight-bold">{lastQueueJob}</span>
+            </>
+          )}
       </section>
     </div>
   );

src/client/constants/action-types.ts

@@ -51,11 +51,12 @@ export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
   "IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS";
 export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED =
   "IMS_COMIC_BOOK_GROUPS_CALL_FAILED";
-export const VOLUMES_FETCHED="VOLUMES_FETCHED";
+export const VOLUMES_FETCHED = "VOLUMES_FETCHED";
 
 // search results from the Search service
 export const SS_SEARCH_RESULTS_FETCHED = "SS_SEARCH_RESULTS_FETCHED";
-export const SS_SEARCH_RESULTS_FETCHED_SPECIAL = "SS_SEARCH_RESULTS_FETCHED_SPECIAL";
+export const SS_SEARCH_RESULTS_FETCHED_SPECIAL =
+  "SS_SEARCH_RESULTS_FETCHED_SPECIAL";
 export const SS_SEARCH_IN_PROGRESS = "SS_SEARCH_IN_PROGRESS";
 export const SS_SEARCH_FAILED = "SS_SEARCH_FAILED";
 
@@ -124,13 +125,15 @@ export const AIRDCPP_TRANSFERS_FETCHED = "AIRDCPP_TRANSFERS_FETCHED";
 // Comics marked as "wanted"
 export const WANTED_COMICS_FETCHED = "WANTED_COMICS_FETCHED";
 
-// LIBRARY SOCKET ENDPOINT
+// LIBRARY Service import queue-related action types
 export const LS_IMPORT = "LS_IMPORT";
 export const LS_COVER_EXTRACTED = "LS_COVER_EXTRACTED";
 export const LS_COVER_EXTRACTION_FAILED = "LS_COVER_EXTRACTION_FAILED";
 export const LS_COMIC_ADDED = "LS_COMIC_ADDED";
 export const LS_IMPORT_QUEUE_DRAINED = "LS_IMPORT_QUEUE_DRAINED";
 export const LS_SET_QUEUE_STATUS = "LS_SET_QUEUE_STATUS";
+export const RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION =
+  "RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION";
 
 // Settings
 export const SETTINGS_CALL_IN_PROGRESS = "SETTINGS_CALL_IN_PROGRESS";

src/client/reducers/fileops.reducer.ts

@@ -35,6 +35,7 @@ import {
   HEALTH_STATUS_TICK,
   LS_IMPORT_QUEUE_DRAINED,
   LS_SET_QUEUE_STATUS,
+  RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION,
 } from "../constants/action-types";
 import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
 import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
@@ -62,7 +63,7 @@ const initialState = {
   volumes: [],
   librarySearchResultsFormatted: [],
   lastQueueJob: "",
-  librarySearchResultCount: 0,
+  successfulJobCount: 0,
   failedJobCount: 0,
   libraryQueueResults: [],
   librarySearchError: {},
@@ -160,21 +161,20 @@ function fileOpsReducer(state = initialState, action) {
         LSQueueImportStatus: "running",
       };
     }
+
     case LS_COVER_EXTRACTED: {
-      console.log("BASH", action);
       if (state.recentComics.length === 5) {
         state.recentComics.pop();
       }
       return {
         ...state,
-        librarySearchResultCount: action.completedJobCount,
+        successfulJobCount: action.completedJobCount,
         lastQueueJob: action.importResult.rawFileDetails.name,
         recentComics: [...state.recentComics, action.importResult],
       };
     }
 
     case LS_COVER_EXTRACTION_FAILED: {
-      console.log("FAILED", action);
       return {
         ...state,
         failedJobCount: action.failedJobCount,
@@ -182,19 +182,18 @@ function fileOpsReducer(state = initialState, action) {
     }
 
     case LS_IMPORT_QUEUE_DRAINED: {
-      console.log("drained");
       return {
         ...state,
         LSQueueImportStatus: "drained",
       };
     }
 
-    case "RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION": {
-      console.log(action);
+    case RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION: {
       return {
         ...state,
-        librarySearchResultCount: action.completedJobCount,
+        successfulJobCount: action.completedJobCount,
         failedJobCount: action.failedJobCount,
+        LSQueueImportStatus: action.queueStatus,
       };
     }