From cfb2bbb38b3c599307776046596e064dec322b62 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sat, 29 May 2021 16:04:14 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8C=20=F0=9F=8E=89=20JSON=20over=20soc?= =?UTF-8?q?ket.io=20first=20draft?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc | 9 +- package.json | 1 + src/client/actions/fileops.actions.tsx | 16 +--- src/client/assets/scss/App.scss | 12 ++- src/client/components/Card.tsx | 69 ++++++++++++++ src/client/components/Card2.tsx | 28 ++++++ src/client/components/Import.tsx | 16 +++- src/client/reducers/fileops.reducer.ts | 1 + yarn.lock | 123 ++++++++++++++++++++++++- 9 files changed, 249 insertions(+), 26 deletions(-) create mode 100644 src/client/components/Card.tsx create mode 100644 src/client/components/Card2.tsx diff --git a/.babelrc b/.babelrc index 6fb7d87..85009b1 100644 --- 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"] } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index a10f233..d54fdc5 100644 --- 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", diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 7102054..8cf4c29 100644 --- 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> { } 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"); diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index a30d6f1..0c68bad 100644 --- 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 { diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx new file mode 100644 index 0000000..6fcf2eb --- /dev/null +++ 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 { + 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
{JSON.stringify(metadata)}
; + }); + } + }; + 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
{this.drawCoverCard()}
; + } +} + +export default Card; diff --git a/src/client/components/Card2.tsx b/src/client/components/Card2.tsx new file mode 100644 index 0000000..fddb129 --- /dev/null +++ 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 { + constructor(props) { + super(props); + } + + public drawCoverCard = (metadata) => { + return map(metadata, (item) => { + return
{JSON.stringify(item)}
; + }); + }; + + public render() { + return
{this.drawCoverCard(this.props.comicBookCoversMetadata)}
; + } +} + +export default Card; diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx index 77b5e8e..93e6d06 100644 --- 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 { constructor(props: IProps) { super(props); @@ -22,6 +25,13 @@ class Import extends React.Component { 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 { {!_.isUndefined(this.state.folderWalkResults) ? ( <>
poopie
-
{JSON.stringify(this.props.garam)}
+ ) : null} @@ -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 }; diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index a8bf3e5..64cbaeb 100644 --- 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], diff --git a/yarn.lock b/yarn.lock index 05a236a..51a10fc 100644 --- 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"