🔌 🎉 JSON over socket.io first draft

2021-05-29 16:04:14 -07:00
parent 79430fdf1e
commit cfb2bbb38b
9 changed files with 249 additions and 26 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -6,13 +6,12 @@
  ],
  "plugins": [
    "react-hot-loader/babel",
-    "@babel/transform-runtime"
+    "@babel/transform-runtime",
+    "@babel/plugin-proposal-class-properties"
  ],
  "env": {
    "production": {
-      "presets": [
-        "minify"
-      ]
+      "presets": ["minify"]
    }
  }
-}
+}
--- a/package.json
+++ b/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",
--- a/src/client/actions/fileops.actions.tsx
+++ b/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 targetOptions = {
+  const extractionOptions = {
    sourceFolder: options,
    extractTarget: "cover",
    targetExtractionFolder: "./userdata/covers",
    extractionMode: "bulk",
-  };
-
-  const pagingConfig = {
-    pageLimit: 25,
-    page: 1,
-  };
-  const extractionOptions = {
-    ...targetOptions,
-    paginationOptions: pagingConfig,
+    paginationOptions: {
+      pageLimit: 25,
+      page: 1,
+    },
  };
  const walkedFolders = await walkFolder("./comics");

--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -1,5 +1,5 @@
@import "../../../../node_modules/bulma/bulma.sass";
-$fa-font-path : "~@fortawesome/fontawesome-free/webfonts";
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
 $bg-color: yellow;
@@ -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 {
--- a/src/client/components/Card.tsx
+++ b/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;
--- a/src/client/components/Card2.tsx
+++ b/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;
--- a/src/client/components/Import.tsx
+++ b/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 };
--- a/src/client/reducers/fileops.reducer.ts
+++ b/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],
--- a/yarn.lock
+++ b/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"