🔌 🎉 JSON over socket.io first draft

.babelrc

@@ -6,13 +6,12 @@
   ],
   "plugins": [
     "react-hot-loader/babel",
-    "@babel/transform-runtime"
+    "@babel/transform-runtime",
+    "@babel/plugin-proposal-class-properties"
   ],
   "env": {
     "production": {
-      "presets": [
+      "presets": ["minify"]
-        "minify"
-      ]
     }
   }
 }

package.json

@@ -63,6 +63,7 @@
     "axios-rate-limit": "^1.3.0",
     "babel-eslint": "^10.0.0",
     "babel-loader": "^8.2.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "body-parser": "^1.19.0",
     "buffer": "^6.0.3",
     "bulma": "^0.9.2",

src/client/actions/fileops.actions.tsx

@@ -21,21 +21,15 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
 }
 
 export const fetchComicBookMetadata = (options) => async (dispatch) => {
-  console.log(options);
+  const extractionOptions = {
-  const targetOptions = {
     sourceFolder: options,
     extractTarget: "cover",
     targetExtractionFolder: "./userdata/covers",
     extractionMode: "bulk",
-  };
+    paginationOptions: {
-
-  const pagingConfig = {
       pageLimit: 25,
       page: 1,
-  };
+    },
-  const extractionOptions = {
-    ...targetOptions,
-    paginationOptions: pagingConfig,
   };
   const walkedFolders = await walkFolder("./comics");
 

src/client/assets/scss/App.scss

@@ -20,10 +20,18 @@ $border-color: red;
 
   .is-mega-menu-title {
     margin-bottom: 0;
-    padding: .375rem 1rem;
+    padding: 0.375rem 1rem;
   }
 }
 
+.card {
+  border: 1px solid color(srgb 0.767 0.861 0.848);
+  margin: 0 10rem 10rem 0;
+  div {
+    margin: 10px;
+    border: 1px solid red;
+  }
+}
 
 // comicvine search results
 .search-results-container {

src/client/components/Card.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
+import { isArray, map, isUndefined, isEmpty, flatten } from "lodash";
+import { socket } from "./Import";
+import { walkFolder } from "../actions/fileops.actions";
+
+interface IProps {
+  comicBookCoversMetadata: any;
+}
+interface IState {
+  comicBookCoversMetadata: any[];
+}
+
+class Card extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      comicBookCoversMetadata: [],
+    };
+  }
+  public fetchComicBookCoversData = (metadata) => {
+    this.setState((prevState) => {
+      // Get previous state
+      const { comicBookCoversMetadata } = prevState;
+
+      // Add new item to array
+      comicBookCoversMetadata.push(metadata);
+
+      // Return new state
+      return { comicBookCoversMetadata };
+    });
+  };
+
+  public drawCoverCard = () => {
+    console.log("cover card", this.state.comicBookCoversMetadata);
+    if (this.state.comicBookCoversMetadata.length >= 1) {
+      return map(this.state.comicBookCoversMetadata, (metadata) => {
+        return <div>{JSON.stringify(metadata)}</div>;
+      });
+    }
+  };
+  public async componentDidMount() {
+    const extractionOptions = {
+      sourceFolder: "./comics",
+      extractTarget: "cover",
+      targetExtractionFolder: "./userdata/covers",
+      extractionMode: "bulk",
+      paginationOptions: {
+        pageLimit: 25,
+        page: 1,
+      },
+    };
+    const walkedFolders = await walkFolder("./comics");
+    socket.emit("call", {
+      action: "getComicCovers",
+      params: {
+        extractionOptions,
+        walkedFolders,
+      },
+      opts: { garam: "pasha" },
+    });
+    socket.on("comicBookCoverMetadata", this.fetchComicBookCoversData);
+  }
+  public render() {
+    return <div className="card">{this.drawCoverCard()}</div>;
+  }
+}
+
+export default Card;

src/client/components/Card2.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
+import { isArray, map, isUndefined, isEmpty, flatten } from "lodash";
+import { socket } from "./Import";
+import { walkFolder } from "../actions/fileops.actions";
+
+interface IProps {
+  comicBookCoversMetadata: any;
+}
+interface IState {}
+
+class Card extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props);
+  }
+
+  public drawCoverCard = (metadata) => {
+    return map(metadata, (item) => {
+      return <div className="card">{JSON.stringify(item)}</div>;
+    });
+  };
+
+  public render() {
+    return <div>{this.drawCoverCard(this.props.comicBookCoversMetadata)}</div>;
+  }
+}
+
+export default Card;

src/client/components/Import.tsx

@@ -3,6 +3,9 @@ import _ from "lodash";
 import { connect } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
 import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
+import Card from "./Card2";
+import { io } from "socket.io-client";
+
 interface IProps {
   matches: unknown;
   fetchComicMetadata: any;
@@ -14,7 +17,7 @@ interface IState {
   searchPaneIndex: number;
   fileOps: any;
 }
-
+let socket;
 class Import extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -22,6 +25,13 @@ class Import extends React.Component<IProps, IState> {
       folderWalkResults: [],
       searchPaneIndex: undefined,
     };
+    socket = io("ws://localhost:3000/", {
+      reconnectionDelayMax: 10000,
+    });
+
+    socket.on("connect", () => {
+      console.log(`connect ${socket.id}`);
+    });
   }
 
   public toggleSearchResultsPane(paneId: number): void {
@@ -79,7 +89,7 @@ class Import extends React.Component<IProps, IState> {
           {!_.isUndefined(this.state.folderWalkResults) ? (
             <>
               <div>poopie</div>
-              <div>{JSON.stringify(this.props.garam)}</div>
+              <Card comicBookCoversMetadata={this.props.garam} />
             </>
           ) : null}
         </section>
@@ -98,9 +108,9 @@ function mapStateToProps(state: IState) {
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   fetchComicMetadata() {
-    console.log(ownProps);
     dispatch(fetchComicBookMetadata(ownProps.path));
   },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Import);
+export { socket };

src/client/reducers/fileops.reducer.ts

@@ -12,6 +12,7 @@ const initialState = {
 function fileOpsReducer(state = initialState, action) {
   switch (action.type) {
     case IMS_SOCKET_DATA_FETCHED:
+      console.log("ke me hu garam garam");
       return {
         ...state,
         comicBookMetadata: [...state.comicBookMetadata, action.data.data],

yarn.lock

@@ -2646,6 +2646,15 @@ axobject-query@^2.2.0:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
+babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
 babel-eslint@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2658,6 +2667,25 @@ babel-eslint@^10.0.0:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
+babel-helper-function-name@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
+  integrity sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=
+  dependencies:
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-get-function-arity@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
+  integrity sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
 babel-jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
@@ -2682,6 +2710,13 @@ babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  integrity sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -2734,6 +2769,21 @@ babel-plugin-polyfill-regenerator@^0.2.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.0"
 
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+  integrity sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=
+
+babel-plugin-transform-class-properties@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  integrity sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
 babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
@@ -2769,7 +2819,7 @@ babel-preset-jest@^26.6.2:
     babel-plugin-jest-hoist "^26.6.2"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-runtime@^6.26.0:
+babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -2777,6 +2827,47 @@ babel-runtime@^6.26.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
+babel-template@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.24.1, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
 backo2@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
@@ -3330,7 +3421,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^1.0.0, chalk@^1.1.1:
+chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
@@ -4054,7 +4145,7 @@ dateformat@^4.5.1:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.5.1.tgz#c20e7a9ca77d147906b6dc2261a8be0a5bd2173c"
   integrity sha512-OD0TZ+B7yP7ZgpJf5K2DIbj3FZvFvxgFUuaqA/V5zTjAtAAXZ1E8bktHxmAGs4x5b7PflqA9LeQ84Og7wYtF7Q==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -5817,6 +5908,11 @@ globals@^13.6.0:
   dependencies:
     type-fest "^0.20.2"
 
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+  integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
+
 globby@^10.0.0:
   version "10.0.2"
   resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.2.tgz#277593e745acaa4646c3ab411289ec47a0392543"
@@ -6557,6 +6653,13 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
+invariant@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 invert-kv@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
@@ -7462,6 +7565,11 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
+
 js-yaml@^3.13.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
@@ -7911,7 +8019,7 @@ lodash.isequalwith@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
   integrity sha1-Jmcm3dUo+FTyH06pigZWBuD7xrA=
 
-lodash@^4.0.0, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7954,7 +8062,7 @@ longest@^1.0.0:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -11801,6 +11909,11 @@ to-buffer@^1.1.1:
   resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
   integrity sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==
 
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"