💽 DB import log beautified in the UI

src/client/actions/fileops.actions.tsx

@@ -71,8 +71,4 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
       dataTransferred: true,
     });
   });
-
-  socket.on("comicBookCoverMetadataSent", (status) => {
-    console.log(status);
-  });
 };

src/client/assets/scss/App.css

@@ -16299,6 +16299,22 @@ readers do not read off random characters that represent icons */
   padding: 0.375rem 1rem;
 }
 
+.min {
+  overflow: visible;
+}
+.min .tags {
+  display: inline;
+  margin-right: 5px;
+}
+.min .tags:first-child {
+  margin-left: 0;
+}
+.min pre {
+  border-radius: 0.4em;
+  margin: 10px 0 10px 0;
+  white-space: pre-wrap;
+}
+
 .card-container .card {
   max-width: 500px;
   margin: 0 0 15px 0;
@@ -16324,12 +16340,22 @@ readers do not read off random characters that represent icons */
   border-bottom-left-radius: 0.25em;
 }
 .card-container .card .is-horizontal .card-content {
+  align-self: center;
   flex: 1;
   padding-left: 1em;
   padding-top: 0;
   padding-bottom: 0;
   font-size: 0.8em;
 }
+.card-container .card .is-horizontal .card-content ul li.status {
+  margin-top: 10px;
+}
+.card-container .card .is-horizontal .card-content .truncate {
+  width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .card-container .card .is-horizontal .is-divider {
   margin-top: 1.5rem;
   margin-bottom: 1rem;

src/client/assets/scss/App.scss

@@ -23,6 +23,22 @@ $border-color: red;
   }
 }
 
+.min {
+  overflow: visible;
+  .tags {
+    display: inline;
+    margin-right: 5px;
+    margin-left: 5px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+  pre {
+    border-radius: 0.4em;
+    margin: 10px 0 10px 0;
+    white-space: pre-wrap;
+  }
+}
 .card-container {
   // display: grid;
   // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -66,11 +82,24 @@ $border-color: red;
         }
       }
       .card-content {
+        align-self: center;
         flex: 1;
         padding-left: 1em;
         padding-top: 0;
         padding-bottom: 0;
         font-size: 0.8em;
+        ul {
+          li.status {
+            margin-top: 10px;
+          }
+        }
+
+        .truncate {
+          width: 400px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
       .is-divider {
         margin-top: 1.5rem;

src/client/components/Card.tsx

@@ -43,9 +43,26 @@ class Card extends React.Component<IProps, IState> {
                 </figure>
               </div>
               <div className="card-content">
-                <div className="truncate">
-                  {item.comicBookCoverMetadata.name}
-                </div>
+                <ul>
+                  <li className="has-text-weight-semibold">
+                    {item.comicBookCoverMetadata.name}
+                  </li>
+                  <li className="truncate">
+                    {item.comicBookCoverMetadata.path}
+                  </li>
+                  <li className="status">
+                    {item.dbImportResult.importStatus.isImported && (
+                      <div className="tags has-addons">
+                        <a className="tag">
+                          <span className="icon has-text-success-dark">
+                            <i className="fas fa-file-import"></i>
+                          </span>
+                        </a>
+                        <span className="tag is-success">Imported</span>
+                      </div>
+                    )}
+                  </li>
+                </ul>
               </div>
             </div>
           </div>

src/client/components/Import.tsx

@@ -6,6 +6,7 @@ import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
 import Card from "./Card";
 import { io, Socket } from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
+import DynamicList, { createCache } from "react-window-dynamic-list";
 
 interface IProps {
   matches: unknown;
@@ -47,6 +48,29 @@ class Import extends React.Component<IProps, IState> {
     }
   };
 
+  public cache = createCache();
+  public renderRow = ({ index, style }) => (
+    <div style={style} className="min is-size-7">
+      <span className="tag is-dark">{index}</span>
+      <div className="tags has-addons">
+        <span className="tag is-success">cover</span>
+        <span className="tag is-success is-light">
+          {this.props.garam[index].comicBookCoverMetadata.name}
+        </span>
+      </div>
+      imported from
+      <div className="tags has-addons">
+        <span className="tag is-success">path</span>
+        <span className="tag is-success is-light">
+          {this.props.garam[index].comicBookCoverMetadata.path}
+        </span>
+      </div>
+      <pre className="has-background-success-light">
+        {JSON.stringify(this.props.garam[index].dbImportResult, null, 2)}
+      </pre>
+    </div>
+  );
+
   public render() {
     return (
       <div className="container">
@@ -91,8 +115,16 @@ class Import extends React.Component<IProps, IState> {
           </p>
 
           {!isUndefined(this.state.folderWalkResults) ? (
-            <div className="card-container">
-              <Card comicBookCoversMetadata={this.props.garam} />
+            <div>
+              {/* <Card comicBookCoversMetadata={this.props.garam} /> */}
+              <DynamicList
+                data={this.props.garam}
+                cache={this.cache}
+                height={1000}
+                width={"100%"}
+              >
+                {this.renderRow}
+              </DynamicList>
             </div>
           ) : null}
         </section>