🔧 Refactoring the Import Page

src/client/components/Dashboard/Dashboard.tsx

@@ -44,7 +44,7 @@ export const Dashboard = (): ReactElement => {
   }, []);
 
   const recentComics = useSelector(
-    (state: RootState) => state.fileOps.recentComics
+    (state: RootState) => state.fileOps.recentComics,
   );
   const wantedComics = useSelector(
     (state: RootState) => state.fileOps.wantedComics,
@@ -67,42 +67,30 @@ export const Dashboard = (): ReactElement => {
             <PullList issues={recentComics} />
             <>
               <div className="content mt-6">
-                <Header headerContent="Import Activity"
+                <Header
+                  headerContent="Import Activity"
                   subHeaderContent="Results aggregated from the last import"
-                  iconClassNames="fa-solid fa-file-invoice mr-2" />
+                  iconClassNames="fa-solid fa-file-invoice mr-2"
+                />
               </div>
 
               <table className="table">
                 <thead>
                   <tr>
-                    <th><abbr title="Position">Pos</abbr></th>
+                    <th>
+                      <abbr title="Position">Pos</abbr>
+                    </th>
                     <th>Team</th>
-                    <th><abbr title="Played">Pld</abbr></th>
+                    <th>
-                    <th><abbr title="Won">W</abbr></th>
+                      <abbr title="Played">Pld</abbr>
-                    <th><abbr title="Drawn">D</abbr></th>
+                    </th>
-                    <th><abbr title="Lost">L</abbr></th>
-                    <th><abbr title="Goals for">GF</abbr></th>
-                    <th><abbr title="Goals against">GA</abbr></th>
-                    <th><abbr title="Goal difference">GD</abbr></th>
-                    <th><abbr title="Points">Pts</abbr></th>
-                    <th>Qualification or relegation</th>
                   </tr>
                 </thead>
 
                 <tbody>
                   <tr>
                     <th>1</th>
-                    <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
-                    </td>
                     <td>38</td>
-                    <td>23</td>
-                    <td>12</td>
-                    <td>3</td>
-                    <td>68</td>
-                    <td>36</td>
-                    <td>+32</td>
-                    <td>81</td>
-                    <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
                   </tr>
                 </tbody>
               </table>
@@ -137,4 +125,4 @@ export const Dashboard = (): ReactElement => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;

src/client/components/Import.tsx

@@ -32,6 +32,9 @@ export const Import = (props: IProps): ReactElement => {
   const libraryQueueResults = useSelector(
     (state: RootState) => state.fileOps.librarySearchResultCount,
   );
+  const failedImportJobCount = useSelector(
+    (state: RootState) => state.fileOps.failedImportJobCount,
+  );
   const libraryQueueImportStatus = useSelector(
     (state: RootState) => state.fileOps.IMSCallInProgress,
   );
@@ -63,22 +66,22 @@ export const Import = (props: IProps): ReactElement => {
   return (
     <div className="container">
       <section className="section is-small">
-        <h1 className="title">Import</h1>
+        <h1 className="title">Import Comics</h1>
         <article className="message is-dark">
           <div className="message-body">
             <p className="mb-2">
               <span className="tag is-medium is-info is-light">
-                Import Only
+                Import Comics
               </span>
-              will add comics identified from the mapped folder into the local
+              will add comics identified from the mapped folder into ThreeTwo's
-              db.
+              database.
             </p>
             <p>
-              <span className="tag is-medium is-info is-light">
+              Metadata from ComicInfo.xml, if present, will also be extracted.
-                Import and Tag
+            </p>
-              </span>
+            <p>
-              will scan the ComicVine, shortboxed APIs and import comics from
+              This process could take a while, if you have a lot of comics, or
-              the mapped folder with the additional metadata.
+              are importing over a network connection.
             </p>
           </div>
         </article>
@@ -94,33 +97,34 @@ export const Import = (props: IProps): ReactElement => {
             <span className="icon">
               <i className="fas fa-file-import"></i>
             </span>
-            <span>Import Only</span>
+            <span>Start Import</span>
-          </button>
-
-          <button className="button is-medium">
-            <span className="icon">
-              <i className="fas fa-tag"></i>
-            </span>
-            <span>Import and Tag</span>
           </button>
         </p>
-        <div className="columns is-multiline">
+        <div className="columns is-multiline is-half">
-          <div className="column is-one-fifth">
+          <div className="column is-2 has-text-centered">
-            <div className="box control-palette">
+            <div className="box has-background-success-light">
               <span className="is-size-2 has-text-weight-bold">
-                {JSON.stringify(libraryQueueResults, null, 2)}
+                {libraryQueueResults}
               </span>
             </div>
-            <div className="is-half">
+          </div>
-              <div className="content">
+          <div className="column is-2 has-text-centered">
-                <div className="control">
+            <div className="box has-background-danger">
-                  <button
+              <span className="is-size-2 has-text-weight-bold">
-                    className="button is-warning is-light"
+                {failedImportJobCount}
-                    onClick={toggleImport}
+              </span>
-                  >
+            </div>
-                    {!isImportQueuePaused ? pauseIconText : playIconText}
+          </div>
-                  </button>
+
-                </div>
+          <div className="column">
+            <div className="content">
+              <div className="control">
+                <button
+                  className="button is-warning is-light"
+                  onClick={toggleImport}
+                >
+                  {!isImportQueuePaused ? pauseIconText : playIconText}
+                </button>
               </div>
             </div>
           </div>

src/client/constants/action-types.ts

@@ -105,7 +105,7 @@ export const AIRDCPP_SEARCH_RESULTS_UPDATED = "AIRDCPP_SEARCH_RESULTS_UPDATED";
 export const AIRDCPP_SEARCH_COMPLETE = "AIRDCPP_SEARCH_COMPLETE";
 
 // AirDC++ related library query for issues with bundles associated with them
-export const LIBRARY_ISSUE_BUNDLES = "LIBRARY_ISSUE_BUNDLES"; 
+export const LIBRARY_ISSUE_BUNDLES = "LIBRARY_ISSUE_BUNDLES";
 
 export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
 export const AIRDCPP_RESULT_DOWNLOAD_INITIATED =
@@ -127,6 +127,7 @@ export const WANTED_COMICS_FETCHED = "WANTED_COMICS_FETCHED";
 // LIBRARY SOCKET ENDPOINT
 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";
 
 // Settings

src/client/reducers/fileops.reducer.ts

@@ -18,6 +18,7 @@ import {
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
   LS_IMPORT,
   LS_COVER_EXTRACTED,
+  LS_COVER_EXTRACTION_FAILED,
   LS_QUEUE_DRAINED,
   LS_COMIC_ADDED,
   IMG_ANALYSIS_CALL_IN_PROGRESS,
@@ -58,6 +59,7 @@ const initialState = {
   volumes: [],
   librarySearchResultsFormatted: [],
   librarySearchResultCount: 0,
+  failedJobCount: 0,
   libraryQueueResults: [],
   librarySearchError: {},
   libraryServiceStatus: {},
@@ -160,8 +162,16 @@ function fileOpsReducer(state = initialState, action) {
       }
       return {
         ...state,
-        librarySearchResultCount: state.librarySearchResultCount + 1,
+        librarySearchResultCount: action.completedJobCount,
-        recentComics: [...state.recentComics, action.result.data.importResult],
+        recentComics: [...state.recentComics, action.importResult],
+      };
+    }
+
+    case LS_COVER_EXTRACTION_FAILED: {
+      console.log("FAILED", action);
+      return {
+        ...state,
+        failedImportJobCount: action.failedJobCount,
       };
     }