🧹 UI cleanup and removal of unused packages

.gitignore

@@ -8,3 +8,4 @@ node_modules/
 src/**/*.jsx
 tests/__coverage__/
 tests/**/*.jsx
+src/client/assets/scss/App.css.map

package.json

@@ -35,8 +35,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hooks-worker": "^1.0.0",
-    "react-virtualized-auto-sizer": "^1.0.5",
-    "react-window": "^1.8.6",
     "react-window-dynamic-list": "^2.3.5",
     "request": "^2.88.2",
     "sharp": "^0.28.1",
@@ -61,7 +59,6 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "@types/react-redux": "^7.1.16",
-    "@types/react-syntax-highlighter": "^13.5.0",
     "@types/unzipper": "^0.10.3",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",

src/client/assets/scss/App.css

@@ -16305,6 +16305,7 @@ readers do not read off random characters that represent icons */
 .min .tags {
   display: inline;
   margin-right: 5px;
+  margin-left: 5px;
 }
 .min .tags:first-child {
   margin-left: 0;

src/client/components/Import.tsx

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
 import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
 import Card from "./Card";
+import { Collapse } from "react-collapse";
 import { io, Socket } from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import DynamicList, { createCache } from "react-window-dynamic-list";
@@ -12,7 +13,7 @@ interface IProps {
   matches: unknown;
   fetchComicMetadata: any;
   path: string;
-  garam: any;
+  covers: any;
 }
 interface IState {
   folderWalkResults?: Array<IFolderData>;
@@ -49,25 +50,31 @@ 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>
+      <span className="tag is-light">{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}
+          {this.props.covers[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}
+          {this.props.covers[index].comicBookCoverMetadata.path}
         </span>
       </div>
-      <pre className="has-background-success-light">
-        {JSON.stringify(this.props.garam[index].dbImportResult, null, 2)}
-      </pre>
+      <div className="db-import-result-panel">
+        <pre className="has-background-success-light">
+          <span className="icon">
+            <i className="fas fa-database"></i>
+          </span>
+          {JSON.stringify(this.props.covers[index].dbImportResult, null, 2)}
+        </pre>
+      </div>
     </div>
   );
 
@@ -82,14 +89,14 @@ class Import extends React.Component<IProps, IState> {
               <p className="mb-2">
                 <span className="tag is-medium is-info is-light">
                   Import Only
-                </span>{" "}
+                </span>
                 will add comics identified from the mapped folder into the local
                 db.
               </p>
               <p>
                 <span className="tag is-medium is-info is-light">
                   Import and Tag
-                </span>{" "}
+                </span>
                 will scan the ComicVine, shortboxed APIs and import comics from
                 the mapped folder with the additional metadata.
               </p>
@@ -118,7 +125,7 @@ class Import extends React.Component<IProps, IState> {
             <div>
               {/* <Card comicBookCoversMetadata={this.props.garam} /> */}
               <DynamicList
-                data={this.props.garam}
+                data={this.props.covers}
                 cache={this.cache}
                 height={1000}
                 width={"100%"}
@@ -137,7 +144,7 @@ function mapStateToProps(state: IState) {
   console.log("state", state);
   return {
     // matches: state.comicInfo.searchResults,
-    garam: state.fileOps.comicBookMetadata,
+    covers: state.fileOps.comicBookMetadata,
   };
 }
 

yarn.lock

@@ -1895,13 +1895,6 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-syntax-highlighter@^13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-13.5.0.tgz#b93c05f28844e7c35a5f1d38d3819099ffa82fbd"
-  integrity sha512-U7DrUaQRv3b+fsbPXMf7vC21K7DOkdNCQtp14Wm0Z5YLI9fPhndN4YTZ9eVXwmAivIg6lZ3YBVtGYucAS3H76A==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-window@^1.8.2":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.3.tgz#14f74b144b4e3df9421eb31182dc580b7ccc7617"
@@ -10248,11 +10241,6 @@ react-router@5.2.0, react-router@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-virtualized-auto-sizer@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509"
-  integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
-
 react-window-dynamic-list@^2.3.5:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-window-dynamic-list/-/react-window-dynamic-list-2.3.5.tgz#f9c72a3e191c0b3ce907f79628d689bef2befd3c"
@@ -10262,7 +10250,7 @@ react-window-dynamic-list@^2.3.5:
     lodash.debounce "^4.0.8"
     react-window "^1.8.5"
 
-react-window@^1.8.5, react-window@^1.8.6:
+react-window@^1.8.5:
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
   integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==