⌨️ Moved types to an npm module

src/client/actions/fileops.actions.tsx

@@ -1,8 +1,5 @@
 import axios from "axios";
-import {
-  IFolderData,
-  IExtractedComicBookCoverFile,
-} from "../../server/interfaces/folder.interface";
+import { IFolderData, IExtractedComicBookCoverFile } from "threetwo-ui-typings";
 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 {
-  flex-direction: row;
-  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;
+.card-container .card .truncate {
+  width: 100px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.card-container .card .is-horizontal .is-divider {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
+.card-container .card img {
+  max-width: 200px;
 }
 
 .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 {
-  IComicVineSearchMatch,
-  IFolderData,
-} from "../shared/interfaces/comicinfo.interfaces";
+import { IComicVineSearchMatch, IFolderData } from "threetwo-ui-typings";
 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) => {};