🔌 🎉 JSON over socket.io first draft

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");
 

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 {

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],