⌨️ Moved types to an npm module

package.json

@@ -38,7 +38,8 @@
     "react-hooks-worker": "^1.0.0",
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",
-    "socket.io-client": "^4.1.2"
+    "socket.io-client": "^4.1.2",
+    "threetwo-ui-typings": "^1.0.1-0"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.10",

src/client/actions/fileops.actions.tsx

@@ -1,8 +1,5 @@
 import axios from "axios";
-import {
+import { IFolderData, IExtractedComicBookCoverFile } from "threetwo-ui-typings";
-  IFolderData,
-  IExtractedComicBookCoverFile,
-} from "../../server/interfaces/folder.interface";
 import { API_BASE_URI, SOCKET_BASE_URI } from "../constants/endpoints";
 import { io } from "socket.io-client";
 import {

src/client/assets/scss/App.css

@@ -16316,50 +16316,23 @@ readers do not read off random characters that represent icons */
   white-space: pre-wrap;
 }
 
+.card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  column-gap: 0.5em;
+  row-gap: 1.2em;
+}
 .card-container .card {
   max-width: 200px;
-  margin: 0 0 15px 0;
 }
-.card-container .card .is-horizontal {
+.card-container .card .truncate {
-  flex-direction: row;
+  width: 100px;
-  display: flex;
-  flex-basis: 50ex;
-  flex-grow: 0;
-  flex-shrink: 1;
-  box-shadow: none;
-}
-.card-container .card .is-horizontal .card-image {
-  align-self: center;
-}
-.card-container .card .is-horizontal .card-image .image {
-  max-width: 60px;
-}
-.card-container .card .is-horizontal .card-image .image img {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 0.25em;
-  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 {
+.card-container .card img {
-  margin-top: 1.5rem;
+  max-width: 200px;
-  margin-bottom: 1rem;
 }
 
 .search-results-container {

src/client/assets/scss/App.scss

@@ -39,25 +39,27 @@ $border-color: red;
     white-space: pre-wrap;
   }
 }
+
+.card {
+  max-width: 200px;
+
+  .truncate {
+    width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  img {
+    max-width: 200px;
+  }
+}
 .card-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   column-gap: 0.5em;
   row-gap: 1.2em;
-  .card {
-    max-width: 200px;
 
-    .truncate {
-      width: 100px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    img {
-      max-width: 200px;
-    }
-  }
   .card {
     max-width: 200px;
     margin: 0 0 15px 0;

src/client/components/Card.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.interface";
+import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
 import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
 import { isUndefined, isEmpty } from "lodash";
 import { Link } from "react-router-dom";

src/client/components/Dashboard.tsx

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { getRecentlyImportedComicBooks } from "../actions/fileops.actions";
+import { isEmpty, isUndefined } from "lodash";
 
 interface IProps {
   getRecentComics: Function;

src/client/components/Import.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { isUndefined } from "lodash";
 import { connect } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
-import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
+import { IFolderData } from "threetwo-ui-typings";
 import { io, Socket } from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import DynamicList, { createCache } from "react-window-dynamic-list";
@@ -34,6 +34,15 @@ class Import extends React.Component<IProps, IState> {
     });
   }
 
+  /**
+   * This initializes a socket.io connection instance with supplied configuration
+   *
+   * @return {void} A good string
+   *
+   * @example
+   *
+   *     initiateSocketConnection()
+   */
   public initiateSocketConnection = () => {
     if (typeof this.props.path !== "undefined") {
       socket = io(SOCKET_BASE_URI, {
@@ -121,7 +130,6 @@ class Import extends React.Component<IProps, IState> {
 
           {!isUndefined(this.state.folderWalkResults) ? (
             <div>
-              {/* <Card comicBookCoversMetadata={this.props.garam} /> */}
               <DynamicList
                 data={this.props.covers}
                 cache={this.cache}

src/client/components/MatchResult.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
-import {
+import { IComicVineSearchMatch, IFolderData } from "threetwo-ui-typings";
-  IComicVineSearchMatch,
-  IFolderData,
-} from "../shared/interfaces/comicinfo.interfaces";
 import _ from "lodash";
 import { autoMatcher } from "../shared/utils/query.transformer";
 

src/client/shared/interfaces/comicinfo.interfaces.ts

@@ -1,16 +0,0 @@
-export interface IFolderResponse {
-  data: Array<IFolderData>;
-}
-
-export interface IComicVineSearchMatch {
-  description: string;
-  id: number;
-  volumes: string;
-}
-export interface IFolderData {
-  name: string;
-  extension: string;
-  containedIn: string;
-  isFile: boolean;
-  isLink: boolean;
-}

src/client/shared/utils/query.transformer.ts

@@ -25,11 +25,8 @@ SOFTWARE.
 */
 
 import _ from "lodash";
-import { IFolderData } from "../interfaces/comicinfo.interfaces";
+import { IFolderData } from "threetwo-ui-typings";
 import stringSimilarity from "string-similarity";
 import { logger } from "../utils/log.utils";
 
-
+export const autoMatcher = (query, matches) => {};
-export const autoMatcher = (query, matches) => {
-
-}

src/server/interfaces/folder.interface.ts

@@ -1,57 +0,0 @@
-export interface IFolderResponse {
-  data: Array<IFolderData>;
-}
-
-export interface IExtractionOptions {
-  extractTarget: string;
-  sourceFolder: string;
-  targetExtractionFolder: string;
-  paginationOptions: IPaginationOptions;
-  extractionMode: string;
-}
-
-export interface IPaginationOptions {
-  pageLimit: number;
-  page: number;
-}
-export interface IComicVineSearchMatch {
-  description: string;
-  id: number;
-  volumes: string;
-}
-export interface IFolderData {
-  name: string;
-  extension: string;
-  containedIn: string;
-  isFile: boolean;
-  isLink: boolean;
-}
-
-export interface IExplodedPathResponse {
-  exploded: Array<string>;
-  fileName: string;
-}
-
-export interface IComicBookCoverMetadata {
-  name: string;
-  path: string;
-  containedIn: string;
-  fileSize: string;
-  imageHash: string;
-  dimensions: {
-    width: string;
-    height: string;
-  };
-}
-
-export interface IExtractedComicBookCoverFile {
-  name: string;
-  path: string;
-  fileSize: number;
-}
-
-export interface IExtractComicBookCoverErrorResponse {
-  message: string;
-  errorCode: string;
-  data: string;
-}

src/server/route/routes/importComics.routes.ts

@@ -1,5 +0,0 @@
-import router from "../router";
-import { Request, Response } from "express";
-import axios from "axios";
-
-export default router;

yarn.lock

@@ -11901,6 +11901,13 @@ 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-0:
+  version "1.0.1-0"
+  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.1-0.tgz#7bd3e8703c43458bb0e42dd2bd34b518043d34e7"
+  integrity sha512-APGV7WTDYsWl+XPNlP6jKIJcd7qNbRDfsmyExKIczrSIka52OU9I7uv+snC5RLEEH6bPjNHSGK5DuCgwTIWn4A==
+  dependencies:
+    typescript "^4.3.2"
+
 throat@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
@@ -12200,7 +12207,7 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4.2.3:
+typescript@^4.2.3, typescript@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
   integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==