From 874ba6b33738ed99f070965d119dd5882ffab20e Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 29 Aug 2023 23:57:47 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20More=20finishing=20touches=20to?=
 =?UTF-8?q?=20Import=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Import.tsx       | 12 +++---
 src/client/components/Navbar.tsx       | 55 +++++++++++++++++++++++++-
 src/client/reducers/fileops.reducer.ts |  2 +
 3 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx
index 42ec783..0d36270 100644
--- a/src/client/components/Import.tsx
+++ b/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>
diff --git a/src/client/components/Navbar.tsx b/src/client/components/Navbar.tsx
index f8dc3c3..7ad6ada 100644
--- a/src/client/components/Navbar.tsx
+++ b/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 ? (
diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts
index 1338cc9..a527f29 100644
--- a/src/client/reducers/fileops.reducer.ts
+++ b/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,