Import queue progress (#87)

* 🚥 Added service status panel scaffold

* 🐂 Support for showing import progress

* 🐂 Support for session-tracking

* 🔧 Tooling for resumable socket.io sessions

* 🧹 Minor change in socket.io connection code

* 🔧 Refactoring the Import Page

* 📝 Added more details to import statuses

* 🐂 Queue pause/resume functionality

* 🐂 Queue drain event reducer

* 🐂 Queue controls

* 🔧 Hardening the import UX

* 🔀 Bumped deps

* 🔧 Fixed the airdcpp-apisocket version

* ⛑️ Removed useless deps

* 🪡 Fixed margin on the comicinfo.xml panel on the library page

* 🏗️ Scaffold for job results

* 🔢 Removed the useless LS_IMPORT event

* 🔧 Wired up jobStatistics call

* 🧹 Cleaning up the tabulated job results

* 🔧 More finishing touches to Import UX

* 🔧 Added a console log for debugging purposes

---------

Co-authored-by: Rishi Ghan <hghan@apple.com>

src/client/components/Dashboard/Dashboard.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { isEmpty, isNil } from "lodash";
+import Header from "../Header";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
@@ -43,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,
@@ -64,6 +65,36 @@ export const Dashboard = (): ReactElement => {
           <>
             {/* Pull List */}
             <PullList issues={recentComics} />
+            <>
+              <div className="content mt-6">
+                <Header
+                  headerContent="Import Activity"
+                  subHeaderContent="Results aggregated from the last import"
+                  iconClassNames="fa-solid fa-file-invoice mr-2"
+                />
+              </div>
+
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>
+                      <abbr title="Position">Pos</abbr>
+                    </th>
+                    <th>Team</th>
+                    <th>
+                      <abbr title="Played">Pld</abbr>
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr>
+                    <th>1</th>
+                    <td>38</td>
+                  </tr>
+                </tbody>
+              </table>
+            </>
 
             {/* Stats */}
             {!isEmpty(libraryStatistics) && (
@@ -74,8 +105,8 @@ export const Dashboard = (): ReactElement => {
               <WantedComicsList comics={wantedComics} />
             )}
             {/* Recent imports */}
-              <RecentlyImported comicBookCovers={recentComics} />
-            
+            <RecentlyImported comicBookCovers={recentComics} />
+
             {/* Volumes */}
             {!isEmpty(volumeGroups) && (
               <VolumeGroups volumeGroups={volumeGroups} />
@@ -94,4 +125,4 @@ export const Dashboard = (): ReactElement => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;

src/client/components/Dashboard/PullList.tsx

@@ -1,6 +1,7 @@
 import { isNil, map } from "lodash";
 import React, { createRef, ReactElement, useCallback, useEffect } from "react";
 import Card from "../Carda";
+import Header from "../Header";
 import Masonry from "react-masonry-css";
 import { useDispatch, useSelector } from "react-redux";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
@@ -20,7 +21,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2023-5-25",
+        startDate: "2023-8-9",
         pageSize: "15",
         currentPage: "1",
       }),
@@ -88,12 +89,9 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   return (
     <>
       <div className="content">
-        <h4 className="title is-4">
-          <i className="fa-solid fa-splotch"></i> Discover
-        </h4>
-        <p className="subtitle is-7">
-          Pull List aggregated for the week from League Of Comic Geeks
-        </p>
+        <Header headerContent="Discover"
+                subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
+                iconClassNames="fa-solid fa-splotch mr-2"/>
         <div className="field is-grouped">
           {/* select week */}
           <div className="control">
@@ -127,7 +125,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
       <Slider {...settings} ref={(c) => (sliderRef = c)}>
         {!isNil(pullList) &&
           pullList &&
-          map(pullList, ({issue}, idx) => {
+          map(pullList, ({ issue }, idx) => {
             return (
               <Card
                 key={idx}
@@ -161,4 +159,4 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   );
 };
 
-export default PullList;
+export default PullList;