🍔 Parameterizing code

src/client/components/Import.tsx

@@ -5,13 +5,7 @@ import axios from "axios";
 import { withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 import { comicinfoAPICall } from "../actions/comicinfo.actions";
-import MatchResult from "./MatchResult";
-import {
-  IFolderData,
-  IComicVineSearchMatch,
-} from "../shared/interfaces/comicinfo.interfaces";
-import { folderWalk } from "../shared/utils/folder.utils";
-// import {} from "../constants/comicvine.mock";
+import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
 import * as Comlink from "comlink";
 import WorkerAdd from "../workers/extractCovers.worker";
 interface IProps {
@@ -26,7 +20,7 @@ class Import extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
     this.state = {
-      folderWalkResults: undefined,
+      folderWalkResults: [],
       searchPaneIndex: undefined,
     };
   }
@@ -37,16 +31,9 @@ class Import extends React.Component<IProps, IState> {
     });
   }
 
-  public async init() {
-    // WebWorkers use `postMessage` and therefore work with Comlink.
-    const { add } = Comlink.wrap(new WorkerAdd());
-    const res = await add(1, 3);
-    console.log(res);
-  }
-
   public async startFolderWalk(): Promise<void> {
-    this.init();
-    const folderWalkResults = await folderWalk();
+    const { importComicBooks } = Comlink.wrap(new WorkerAdd());
+    const folderWalkResults = await importComicBooks;
     this.setState({
       folderWalkResults,
     });
@@ -96,61 +83,9 @@ class Import extends React.Component<IProps, IState> {
           </p>
           {/* Folder walk results */}
           {!_.isUndefined(this.state.folderWalkResults) ? (
-            <table className="table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Format</th>
-                  <th>Is File</th>
-                </tr>
-                {!_.isUndefined(this.state.folderWalkResults) &&
-                  this.state.folderWalkResults.map((result, idx) => (
-                    <tr key={idx}>
-                      <td>
-                        {!result.isLink && !result.isFile ? (
-                          <span className="icon-text">
-                            <span className="icon">
-                              <i className="fas fa-folder"></i>
-                            </span>
-                            <span>{result.name}</span>
-                          </span>
-                        ) : (
-                          <span className="ml-5">{result.name}</span>
-                        )}
-
-                        {this.state.searchPaneIndex === idx &&
-                        !_.isUndefined(this.props.matches) ? (
-                          <MatchResult
-                            queryData={result}
-                            matchData={this.props.matches}
-                            visible={true}
-                          />
-                        ) : null}
-                      </td>
-                      <td>
-                        {!_.isEmpty(result.extension) ? (
-                          <span className="tag is-info">
-                            {result.extension}
-                          </span>
-                        ) : null}
-                      </td>
-                      <td>{result.isFile.toString()}</td>
-                      <td>
-                        <button
-                          key={idx}
-                          className="button is-small is-primary is-outlined"
-                          onClick={(e) => {
-                            this.props.findMatches(e, result);
-                            this.toggleSearchResultsPane(idx);
-                          }}
-                        >
-                          Find Match
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-              </thead>
-            </table>
+            <>
+              <div>poopie</div>
+            </>
           ) : null}
         </section>
       </div>
@@ -158,29 +93,14 @@ class Import extends React.Component<IProps, IState> {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps(state: IState) {
   return {
-    matches: state.comicInfo.searchResults,
+    // matches: state.comicInfo.searchResults,
   };
 }
 
 const mapDispatchToProps = (dispatch) => ({
-  findMatches(e, results) {
-    dispatch(
-      comicinfoAPICall({
-        callURIAction: "search",
-        callMethod: "get",
-        callParams: {
-          format: "json",
-          query: results.name,
-          limit: 10,
-          offset: 5,
-          sort: "name:asc",
-          resources: "issue",
-        },
-      }),
-    );
-  },
+  name: "rishi",
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Import);

src/client/components/MatchResult.tsx

@@ -25,6 +25,65 @@ class MatchResult extends React.Component<IProps, IState> {
   }
 
   public render() {
+    {
+      /* 
+    <table className="table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Format</th>
+                  <th>Is File</th>
+                </tr>
+                {!_.isUndefined(this.state.folderWalkResults) &&
+                  this.state.folderWalkResults.map((result, idx) => (
+                    <tr key={idx}>
+                      <td>
+                        {!result.isLink && !result.isFile ? (
+                          <span className="icon-text">
+                            <span className="icon">
+                              <i className="fas fa-folder"></i>
+                            </span>
+                            <span>{result.name}</span>
+                          </span>
+                        ) : (
+                          <span className="ml-5">{result.name}</span>
+                        )}
+
+                        {this.state.searchPaneIndex === idx &&
+                        !_.isUndefined(this.props.matches) ? (
+                          <MatchResult
+                            queryData={result}
+                            matchData={this.props.matches}
+                            visible={true}
+                          />
+                        ) : null}
+                      </td>
+                      <td>
+                        {!_.isEmpty(result.extension) ? (
+                          <span className="tag is-info">
+                            {result.extension}
+                          </span>
+                        ) : null}
+                      </td>
+                      <td>{result.isFile.toString()}</td>
+                      <td>
+                        <button
+                          key={idx}
+                          className="button is-small is-primary is-outlined"
+                          onClick={(e) => {
+                            this.props.findMatches(e, result);
+                            this.toggleSearchResultsPane(idx);
+                          }}
+                        >
+                          Find Match
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+              </thead>
+            </table>
+    */
+    }
     return this.props.visible ? (
       <div>
         <h3>Matches</h3>

src/client/workers/extractCovers.worker.ts

@@ -1,8 +1,9 @@
 import * as Comlink from "comlink";
 import { walkFolder } from "../actions/fileops.actions";
 import { IExtractionOptions } from "../../server/interfaces/folder.interface";
+import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
 
-async function importComicBooks() {
+async function importComicBooks(): Promise<IFolderData[]> {
   // 1. Walk the folder structure
   // 2. Scan for .cbz, .cbr
   // 3. extract cover image
@@ -12,6 +13,7 @@ async function importComicBooks() {
   // 6. Save model to mongo
 
   const fileObjects = await walkFolder("./comics");
+  return fileObjects;
 }
 
 Comlink.expose({

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

@@ -7,17 +7,14 @@ import {
   extractMetadataFromImage,
   explodePath,
 } from "../../utils/fs.utils";
+import { IExtractionOptions } from "../../interfaces/folder.interface";
 import { Request, Response } from "express";
 
 router.route("/getComicCovers").post(async (req: Request, res: Response) => {
-  const options = {
-    name: "30 Days of Night # 30 äíåé íî÷è # 01-001",
-    extension: ".cbz",
-    containedIn: "comics",
-    isFile: true,
-    isLink: false,
-  };
-  const foo = await extractArchive(options);
+  typeof req.body.extractionOptions === "object"
+    ? req.body.extractionOptions
+    : {};
+  const foo = await extractArchive(req.body.extractionOptions);
   // const foo = await extractMetadataFromImage(
   //   "./comics/covers/Ghosts and Ruins-001.jpg",
   // );