📝 Refactoring

package.json

@@ -55,7 +55,7 @@
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",
     "socket.io-client": "^4.1.2",
-    "threetwo-ui-typings": "^1.0.1",
+    "threetwo-ui-typings": "^1.0.2",
     "voca": "^1.4.0",
     "websocket": "^1.0.34",
     "ws": "^7.5.3",

src/client/actions/fileops.actions.tsx

@@ -71,7 +71,7 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
   socket.on("disconnect", () => {
     console.log(`disconnect`);
   });
-  socket.emit("importComicsInDB", {
+  socket.emit("importComicsToDB", {
     action: "getComicCovers",
     params: {
       extractionOptions,
@@ -80,6 +80,7 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
   });
 
   socket.on("comicBookCoverMetadata", (data: IExtractedComicBookCoverFile) => {
+    console.log("Recd cover");
     dispatch({
       type: IMS_COMICBOOK_METADATA_FETCHED,
       data,
@@ -88,11 +89,11 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
   });
 };
 
-export const getRecentlyImportedComicBooks = (options) => async (dispatch) => {
+export const getComicBooks = (options) => async (dispatch) => {
   const { paginationOptions } = options;
   return axios
     .request({
-      url: "http://localhost:3000/api/import/getRecentlyImportedComicBooks",
+      url: "http://localhost:3000/api/import/getComicBooks",
       method: "POST",
       data: {
         paginationOptions,

src/client/assets/scss/App.scss

@@ -59,7 +59,6 @@ $border-color: red;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   column-gap: 0.5em;
   row-gap: 1.2em;
-  min-height: 30px;
 
   .card {
     max-width: 500px;
@@ -76,12 +75,11 @@ $border-color: red;
         align-self: center;
         .image {
           max-width: 60px;
-            border-top-right-radius: 0;
+          border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
-            border-top-left-radius: 0.25em;
+          border-top-left-radius: 0.25em;
-            border-bottom-left-radius: 0.25em;
+          border-bottom-left-radius: 0.25em;
         }
-         
       }
       .card-content {
         align-self: center;
@@ -111,6 +109,23 @@ $border-color: red;
   }
 }
 
+// Library
+.library {
+  table {
+    td {
+      border: 0 none;
+     .card {
+       .name {
+         margin: 0 0 4px 0;
+       }
+     }
+    }
+    tbody {
+      padding: 10px 0 0 0;
+    }
+  }
+}
+
 .comic-vine-match-drawer {
   // comic detail drawer
   .search-criteria-card {

src/client/components/Dashboard.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { connect } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
-import { getRecentlyImportedComicBooks } from "../actions/fileops.actions";
+import { getComicBooks } from "../actions/fileops.actions";
 import { isEmpty } from "lodash";
 
 interface IProps {
@@ -52,7 +52,7 @@ function mapStateToProps(state: IState) {
 const mapDispatchToProps = (dispatch) => ({
   getRecentComics() {
     dispatch(
-      getRecentlyImportedComicBooks({
+      getComicBooks({
         paginationOptions: {
           page: 0,
           limit: 5,

src/client/components/Library.tsx

@@ -11,6 +11,7 @@ import {
 } from "../shared/utils/formatting.utils";
 import { useTable } from "react-table";
 import prettyBytes from "pretty-bytes";
+import ellipsize from "ellipsize";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -47,9 +48,19 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
                         </figure>
                       </div>
                       <ul className="card-content">
-                        <li>{props.cell.value.name}</li>
+                        <li className="name has-text-weight-medium">{ellipsize(props.cell.value.name, 18)}</li>
-                        <li>{props.cell.value.containedIn}</li>
+                        <li>
-                        <li>{prettyBytes(props.cell.value.fileSize)}</li>
+                          <div className="control">
+                            <div className="tags has-addons">
+                              <span className="tag is-primary is-light">
+                                {props.cell.value.extension}
+                              </span>
+                              <span className="tag is-info is-light">
+                                {prettyBytes(props.cell.value.fileSize)}
+                              </span>
+                            </div>
+                          </div>
+                        </li>
                       </ul>
                     </div>
                   </div>
@@ -60,7 +71,12 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
           {
             Header: "Import Status",
             accessor: "importStatus.isImported",
-            Cell: (props) => `${props.cell.value.toString()}`,
+            Cell: (props) =>
+              `${props.cell.value.toString()}` ? (
+                <span className="tag is-info is-light">Imported</span>
+              ) : (
+                "Not Imported"
+              ),
           },
         ],
       },
@@ -77,8 +93,11 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
       <div className="section">
         <h1 className="title">Library</h1>
         <div className="columns">
-          <div className="column">
+          <div className="column library">
-            <table {...getTableProps()}>
+            <table
+              {...getTableProps()}
+              className="table is-narrow is-hoverable"
+            >
               <thead>
                 {headerGroups.map((headerGroup, idx) => (
                   <tr key={idx} {...headerGroup.getHeaderGroupProps()}>

src/client/shared/utils/filenameparser.utils.ts

@@ -48,14 +48,12 @@ export const preprocess = (inputString: string) => {
   // see if the comic matches the following format, and if so, remove everything
   // after the first number:
   // "nnn series name #xx (etc) (etc)" -> "series name #xx (etc) (etc)"
-  const format1 = "124 series name #xx (etc) (etc)".match(
+  const format1 = inputString.match(/^\s*(\d+)[\s._-]+?([^#]+)(\W+.*)/);
-    /^\s*(\d+)[\s._-]+?([^#]+)(\W+.*)/,
-  );
 
   //   see if the comic matches the following format, and if so, remove everything
   // after the first number that isn't in brackets:
   // "series name #xxx - title (etc) (etc)" -> "series name #xxx (etc) (etc)
-  const format2 = "".match(
+  const format2 = inputString.match(
     /^((?:[a-zA-Z,.-]+\s)+)(\#?(?:\d+[.0-9*])\s*(?:-))(.*((\(.*)?))$/gis,
   );
 };
@@ -94,7 +92,7 @@ export const tokenize = (inputString: string) => {
 
   const hyphenatedIssueRange = inputString.match(/(\d)(-\d+)/gi);
   if (!isNull(hyphenatedIssueRange) && hyphenatedIssueRange.length > 2) {
-    let issueNumber = hyphenatedIssueRange[0];
+    const issueNumber = hyphenatedIssueRange[0];
   }
 
   const readingListIndicators = inputString.match(

yarn.lock

@@ -13154,10 +13154,10 @@ text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-threetwo-ui-typings@^1.0.1:
+threetwo-ui-typings@^1.0.2:
-  version "1.0.1"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.1.tgz#5e1c4aca9342e1655ef471fe2e50752bb844b788"
+  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.2.tgz#63cf3739c340d8595cb36baa8669d4d836aa2290"
-  integrity sha512-g5FWa069AT1WfUHHEVFOQ1q6cfK+9UOzewfKblheuDBSsGN/e89MJMEVfuInBaHgxHM32/P+mNUFBqnBoeRSLQ==
+  integrity sha512-sK5cb/fApFKseQNgcnGmAnPNxDDXT+dQ/Blei1N4q0mduO3kZfJTnlMYaXjO4FDXLP+jkiwsv0bf7PXm0DgF7g==
   dependencies:
     typescript "^4.3.2"