📝 Refactoring

2021-08-04 15:46:41 -07:00
parent 0de430f826
commit 05fb0fad2b
7 changed files with 60 additions and 27 deletions
--- a/package.json
+++ b/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",
--- a/src/client/actions/fileops.actions.tsx
+++ b/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,
--- a/src/client/assets/scss/App.scss
+++ b/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-bottom-right-radius: 0;
-            border-top-left-radius: 0.25em;
-            border-bottom-left-radius: 0.25em;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+          border-top-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 {
--- a/src/client/components/Dashboard.tsx
+++ b/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,
--- a/src/client/components/Library.tsx
+++ b/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>{props.cell.value.containedIn}</li>
-                        <li>{prettyBytes(props.cell.value.fileSize)}</li>
+                        <li className="name has-text-weight-medium">{ellipsize(props.cell.value.name, 18)}</li>
+                        <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">
-            <table {...getTableProps()}>
+          <div className="column library">
+            <table
+              {...getTableProps()}
+              className="table is-narrow is-hoverable"
+            >
              <thead>
                {headerGroups.map((headerGroup, idx) => (
                  <tr key={idx} {...headerGroup.getHeaderGroupProps()}>
--- a/src/client/shared/utils/filenameparser.utils.ts
+++ b/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(
-    /^\s*(\d+)[\s._-]+?([^#]+)(\W+.*)/,
-  );
+  const format1 = inputString.match(/^\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(
--- a/yarn.lock
+++ b/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:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.1.tgz#5e1c4aca9342e1655ef471fe2e50752bb844b788"
-  integrity sha512-g5FWa069AT1WfUHHEVFOQ1q6cfK+9UOzewfKblheuDBSsGN/e89MJMEVfuInBaHgxHM32/P+mNUFBqnBoeRSLQ==
+threetwo-ui-typings@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.2.tgz#63cf3739c340d8595cb36baa8669d4d836aa2290"
+  integrity sha512-sK5cb/fApFKseQNgcnGmAnPNxDDXT+dQ/Blei1N4q0mduO3kZfJTnlMYaXjO4FDXLP+jkiwsv0bf7PXm0DgF7g==
  dependencies:
    typescript "^4.3.2"