🔧 More finishing touches to Import UX

src/client/components/Import.tsx

@@ -62,7 +62,6 @@ export const Import = (props: IProps): ReactElement => {
     },
     [],
   );
-
   useEffect(() => {
     dispatch(getImportJobResultStatistics());
   }, []);
@@ -99,7 +98,6 @@ export const Import = (props: IProps): ReactElement => {
         return null;
     }
   };
-  console.log(...allImportJobResults);
   return (
     <div className="container">
       <section className="section is-small">
@@ -207,21 +205,23 @@ export const Import = (props: IProps): ReactElement => {
                 <tr key={id}>
                   <td>
                     {format(
-                      new Date(jobResult.statuses[0].earliestTimestamp),
+                      new Date(jobResult.earliestTimestamp),
                       "EEEE, hh:mma, do LLLL Y",
                     )}
                   </td>
                   <td>
-                    <span className="tag is-warning">{jobResult._id}</span>
+                    <span className="tag is-warning">
+                      {jobResult.sessionId}
+                    </span>
                   </td>
                   <td>
                     <span className="tag is-success">
-                      {jobResult.statuses[1].count}
+                      {jobResult.completedJobs}
                     </span>
                   </td>
                   <td>
                     <span className="tag is-danger">
-                      {jobResult.statuses[0].count}
+                      {jobResult.failedJobs}
                     </span>
                   </td>
                 </tr>

src/client/components/Navbar.tsx

@@ -20,6 +20,25 @@ const Navbar: React.FunctionComponent = (props) => {
   const socketDisconnectionReason = useSelector(
     (state: RootState) => state.airdcpp.socketDisconnectionReason,
   );
+
+  // Import-related selector hooks
+  const successfulImportJobCount = useSelector(
+    (state: RootState) => state.fileOps.successfulJobCount,
+  );
+  const failedImportJobCount = useSelector(
+    (state: RootState) => state.fileOps.failedJobCount,
+  );
+
+  const lastQueueJob = useSelector(
+    (state: RootState) => state.fileOps.lastQueueJob,
+  );
+  const libraryQueueImportStatus = useSelector(
+    (state: RootState) => state.fileOps.LSQueueImportStatus,
+  );
+
+  const allImportJobResults = useSelector(
+    (state: RootState) => state.fileOps.importJobStatistics,
+  );
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -88,9 +107,43 @@ const Navbar: React.FunctionComponent = (props) => {
               <div className="navbar-dropdown is-right is-boxed">
                 <a className="navbar-item">
                   <DownloadProgressTick data={downloadProgressTick} />
-                </a>              </div>
+                </a>
+              </div>
             ) : null}
           </div>
+
+          {!isUndefined(libraryQueueImportStatus) &&
+          location.hash !== "#/import" ? (
+            <div className="navbar-item has-dropdown is-hoverable">
+              <a className="navbar-link is-arrowless">
+                <i className="fa-solid fa-file-import has-text-warning-dark"></i>
+              </a>
+
+              <div className="navbar-dropdown is-right is-boxed">
+                <a className="navbar-item">
+                  <ul>
+                    {successfulImportJobCount > 0 ? (
+                      <li className="mb-2">
+                        <span className="tag is-success mr-2">
+                          {successfulImportJobCount}
+                        </span>
+                        imported.
+                      </li>
+                    ) : null}
+                    {failedImportJobCount > 0 ? (
+                      <li>
+                        <span className="tag is-danger mr-2">
+                          {failedImportJobCount}
+                        </span>
+                        failed to import.
+                      </li>
+                    ) : null}
+                  </ul>
+                </a>
+              </div>
+            </div>
+          ) : null}
+
           {/* AirDC++ socket connection status */}
           <div className="navbar-item has-dropdown is-hoverable">
             {airDCPPSocketConnectionStatus ? (

src/client/reducers/fileops.reducer.ts

@@ -181,6 +181,7 @@ function fileOpsReducer(state = initialState, action) {
     }
 
     case LS_IMPORT_QUEUE_DRAINED: {
+      localStorage.removeItem("sessionId");
       return {
         ...state,
         LSQueueImportStatus: "drained",
@@ -188,6 +189,7 @@ function fileOpsReducer(state = initialState, action) {
     }
 
     case RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION: {
+      console.log("AASSSSHHHHH");
       return {
         ...state,
         successfulJobCount: action.completedJobCount,