🪛 Data transferring over sockets!

src/client/actions/fileops.actions.tsx

@@ -1,6 +1,8 @@
 import axios from "axios";
 import { IFolderData } from "../../server/interfaces/folder.interface";
 import { API_BASE_URI } from "../constants/endpoints";
+import { io } from "socket.io-client";
+import { IMS_SOCKET_DATA_FETCHED } from "../constants/action-types";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
@@ -17,3 +19,51 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
       return data;
     });
 }
+
+export const fetchComicBookMetadata = (options) => async (dispatch) => {
+  console.log(options);
+  const targetOptions = {
+    sourceFolder: options,
+    extractTarget: "cover",
+    targetExtractionFolder: "./userdata/covers",
+    extractionMode: "bulk",
+  };
+
+  const pagingConfig = {
+    pageLimit: 25,
+    page: 1,
+  };
+  const extractionOptions = {
+    ...targetOptions,
+    paginationOptions: pagingConfig,
+  };
+  const walkedFolders = await walkFolder("./comics");
+
+  const socket = io("ws://localhost:3000/", {
+    reconnectionDelayMax: 10000,
+  });
+
+  socket.on("connect", () => {
+    console.log(`connect ${socket.id}`);
+  });
+
+  socket.on("disconnect", () => {
+    console.log(`disconnect`);
+  });
+  socket.emit("call", {
+    action: "getComicCovers",
+    params: {
+      extractionOptions,
+      walkedFolders,
+    },
+    opts: { garam: "pasha" },
+  });
+
+  socket.on("comicBookCoverMetadata", (data) => {
+    dispatch({
+      type: IMS_SOCKET_DATA_FETCHED,
+      data,
+      dataTransferred: true,
+    });
+  });
+};

src/client/components/App.tsx

@@ -18,7 +18,7 @@ class App extends React.Component<Record<string, unknown>, undefined> {
               <Dashboard />
             </Route>
             <Route path="/import">
-              <Import />
+              <Import path={"./comics"} />
             </Route>
           </Switch>
         </Router>

src/client/components/Import.tsx

@@ -1,13 +1,18 @@
 import * as React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
-import { greet } from "../workers/extractCovers.worker";
+import { fetchComicBookMetadata } from "../actions/fileops.actions";
+import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
 interface IProps {
   matches: unknown;
+  fetchComicMetadata: any;
+  path: string;
+  garam: any;
 }
 interface IState {
   folderWalkResults?: Array<IFolderData>;
   searchPaneIndex: number;
+  fileOps: any;
 }
 
 class Import extends React.Component<IProps, IState> {
@@ -25,9 +30,12 @@ class Import extends React.Component<IProps, IState> {
     });
   }
 
-  public async startFolderWalk() {
-    console.log(await greet("./comics"));
+  public componentDidMount() {
+    if (typeof this.props.path !== "undefined") {
+      this.props.fetchComicMetadata();
+    }
   }
+
   public render() {
     return (
       <div>
@@ -53,10 +61,7 @@ class Import extends React.Component<IProps, IState> {
             </div>
           </article>
           <p className="buttons">
-            <button
-              className="button is-medium"
-              onClick={() => this.startFolderWalk()}
-            >
+            <button className="button is-medium">
               <span className="icon">
                 <i className="fas fa-file-import"></i>
               </span>
@@ -74,6 +79,7 @@ class Import extends React.Component<IProps, IState> {
           {!_.isUndefined(this.state.folderWalkResults) ? (
             <>
               <div>poopie</div>
+              <div>{JSON.stringify(this.props.garam)}</div>
             </>
           ) : null}
         </section>
@@ -83,13 +89,18 @@ class Import extends React.Component<IProps, IState> {
 }
 
 function mapStateToProps(state: IState) {
+  console.log("STATE", state);
   return {
     // matches: state.comicInfo.searchResults,
+    garam: state.fileOps.comicBookMetadata,
   };
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  name: "rishi",
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  fetchComicMetadata() {
+    console.log(ownProps);
+    dispatch(fetchComicBookMetadata(ownProps.path));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Import);

src/client/constants/action-types.ts

@@ -3,3 +3,10 @@ export const CV_SEARCH_FAILURE = "CV_SEARCH_FAILURE";
 export const CV_SEARCH_SUCCESS = "CV_SEARCH_SUCCESS";
 
 export const CV_API_GENERIC_FAILURE = "CV_API_GENERIC_FAILURE";
+
+export const IMS_SOCKET_DATA_FETCHED = "IMS_SOCKET_DATA_FETCHED";
+export const IMS_SOCKET_CONNECTION_CONNECTED =
+  "IMS_SOCKET_CONNECTION_CONNECTED";
+export const IMS_SOCKET_CONNECTION_DISCONNECTED =
+  "IMS_SOCKET_CONNECTION_DISCONNECTED";
+export const IMS_SOCKET_ERROR = "IMS_SOCKET_ERROR";

src/client/reducers/comicinfo.reducer.js

@@ -1,9 +1,12 @@
-import { CV_API_CALL_IN_PROGRESS, CV_SEARCH_SUCCESS } from "../constants/action-types";
+import {
+  CV_API_CALL_IN_PROGRESS,
+  CV_SEARCH_SUCCESS,
+} from "../constants/action-types";
 const initialState = {
   showResultsPane: false,
 };
 
-function comicinfoReducer(state = initialState, action){
+function comicinfoReducer(state = initialState, action) {
   switch (action.type) {
     case CV_API_CALL_IN_PROGRESS:
       return {

src/client/reducers/fileops.reducer.ts

@@ -0,0 +1,25 @@
+import {
+  IMS_SOCKET_CONNECTION_CONNECTED,
+  IMS_SOCKET_CONNECTION_DISCONNECTED,
+  IMS_SOCKET_DATA_FETCHED,
+  IMS_SOCKET_ERROR,
+} from "../constants/action-types";
+const initialState = {
+  dataTransferred: false,
+  comicBookMetadata: [],
+};
+
+function fileOpsReducer(state = initialState, action) {
+  switch (action.type) {
+    case IMS_SOCKET_DATA_FETCHED:
+      return {
+        ...state,
+        comicBookMetadata: [...state.comicBookMetadata, action.data.data],
+        dataTransferred: true,
+      };
+    default:
+      return state;
+  }
+}
+
+export default fileOpsReducer;

src/client/reducers/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from "redux";
 import { connectRouter } from "connected-react-router";
 import comicinfoReducer from "../reducers/comicinfo.reducer";
+import fileOpsReducer from "../reducers/fileops.reducer";
 
 export default (history) =>
   combineReducers({
     comicInfo: comicinfoReducer,
+    fileOps: fileOpsReducer,
     router: connectRouter(history),
   });

src/client/workers/extractCovers.worker.ts

@@ -1,9 +1,11 @@
 import { walkFolder } from "../actions/fileops.actions";
 import { io } from "socket.io-client";
+import { IMS_SOCKET_DATA_FETCHED } from "../constants/action-types";
 
-export const greet = async (path: string): Promise<any> => {
+export const fetchComicBookMetadata = (options) => async (dispatch) => {
+  console.log(options);
   const targetOptions = {
-    sourceFolder: path,
+    sourceFolder: options,
     extractTarget: "cover",
     targetExtractionFolder: "./userdata/covers",
     extractionMode: "bulk",
@@ -41,5 +43,10 @@ export const greet = async (path: string): Promise<any> => {
 
   socket.on("comicBookCoverMetadata", (data) => {
     console.log(data);
+    dispatch({
+      type: IMS_SOCKET_DATA_FETCHED,
+      comicBookMetadata: data,
+      dataTransferred: true,
+    });
   });
 };

src/server/route/routes/importComics.routes.ts

@@ -2,17 +2,6 @@ import router from "../router";
 import { Request, Response } from "express";
 import axios from "axios";
 
-router.route("/getComicCovers").post(async (req: Request, res: Response) => {
-  typeof req.body.extractionOptions === "object"
-    ? req.body.extractionOptions
-    : {};
-  const { extractionOptions, walkedFolders } = req.body;
-
-  // res.sendStatus(200);
-  // socket.on("hello", (done) => done);
-  res.sendStatus(200);
-});
-
 router.route("/walkFolder").post(async (req: Request, res: Response) => {
   const basePathToWalk =
     typeof req.body.basePathToWalk === "string" ? req.body.basePathToWalk : "";