🔌 🎉 JSON over socket.io first draft

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 };