📃 JSDoc for Typescript added

.gitignore

@@ -1,6 +1,7 @@
 .idea/
 .DS_Store
 comics/
+docs/
 userdata/
 dist/
 server/

jsdoc.json

@@ -0,0 +1,22 @@
+{
+  "tags": { "allowUnknownTags": true },
+  "source": {
+    "include": ["./src/"],
+    "includePattern": "\\.(jsx|js|ts|tsx)$"
+  },
+  "plugins": [
+    "better-docs/component",
+    "better-docs/category",
+    "plugins/markdown",
+    "node_modules/better-docs/typescript"
+  ],
+  "templates": { "better-docs": { "name": "My React components" } },
+  "opts": {
+    "destination": "docs/",
+    "readme": "README.md",
+    "recurse": true,
+    "encoding": "utf8",
+    "verbose": true,
+    "template": "node_modules/better-docs"
+  }
+}

package.json

@@ -10,7 +10,8 @@
     "client": "webpack serve --mode development --devtool inline-source-map --hot",
     "server": "tsc -p tsconfig.server.json && node server/",
     "dev": "concurrently \"nodemon\" \"npm run client\"",
-    "server-dev": "nodemon"
+    "server-dev": "nodemon",
+    "docs": "jsdoc -c jsdoc.json"
   },
   "author": "Rishi Ghan",
   "license": "MIT",
@@ -26,6 +27,7 @@
     "@types/socket.io-client": "^3.0.0",
     "@types/through2": "^2.0.36",
     "babel-polyfill": "^6.26.0",
+    "better-docs": "^2.3.2",
     "comlink-loader": "^2.0.0",
     "event-stream": "^4.0.1",
     "express": "^4.17.1",

src/client/actions/fileops.actions.tsx

@@ -24,7 +24,17 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
     })
     .catch((error) => error);
 }
-
+/**
+ * Renders an entire login page with email and password fields
+ * using {@link Renderer}.
+ *
+ * Used by external plugins
+ *
+ * @param  {Object} options
+ * @param  {String} options.action          login form action
+ * @param  {String} [options.errorMessage]  optional messaga
+ * @return {Promise<string>}                HTML of the page
+ */
 export const fetchComicBookMetadata = (options) => async (dispatch) => {
   const extractionOptions = {
     sourceFolder: options,

src/client/components/App.tsx

@@ -1,32 +1,31 @@
 import * as React from "react";
 import { hot } from "react-hot-loader";
 import Dashboard from "./Dashboard";
+
 import Import from "./Import";
 import { ComicDetail } from "./ComicDetail";
 
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import { Switch, Route } from "react-router";
 import Navbar from "./Navbar";
 import "../assets/scss/App.scss";
 
-class App extends React.Component<Record<string, unknown>, undefined> {
+class App extends React.Component {
   public render() {
     return (
       <div>
-        <Router>
+        <Navbar />
-          <Navbar />
+        <Switch>
-          <Switch>
+          <Route exact path="/">
-            <Route exact path="/">
+            <Dashboard />
-              <Dashboard />
+          </Route>
-            </Route>
+          <Route path="/import">
-            <Route path="/import">
+            <Import path={"./comics"} />
-              <Import path={"./comics"} />
+          </Route>
-            </Route>
+          <Route
-            <Route
+            path={"/comic/details/:comicObjectId"}
-              path={"/comic/details/:comicObjectId"}
+            component={ComicDetail}
-              component={ComicDetail}
+          />
-            />
+        </Switch>
-          </Switch>
-        </Router>
       </div>
     );
   }

src/client/components/ComicDetail.tsx

@@ -3,12 +3,15 @@ import { useParams } from "react-router-dom";
 import axios from "axios";
 import Card from "./Card";
 import { isEmpty, isUndefined } from "lodash";
+import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
 type ComicDetailProps = {};
 
 export const ComicDetail = ({}: ComicDetailProps) => {
   const [page, setPage] = useState(1);
-  const [comicDetail, setComicDetail] = useState([]);
+  const [comicDetail, setComicDetail] = useState<{
-  const { comicObjectId } = useParams();
+    rawFileDetails: IExtractedComicBookCoverFile;
+  }>();
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
   useEffect(() => {
     axios

src/client/components/Import.tsx

@@ -1,3 +1,4 @@
+//@ts-ignore
 import * as React from "react";
 import { isUndefined } from "lodash";
 import { connect } from "react-redux";
@@ -20,11 +21,24 @@ interface IState {
 }
 let socket: Socket;
 class Import extends React.Component<IProps, IState> {
+  /**
+   * Returns the average of two numbers.
+   *
+   * @remarks
+   * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
+   *
+   * @param x - The first input number
+   * @param y - The second input number
+   * @returns The arithmetic mean of `x` and `y`
+   *
+   * @beta
+   */
   constructor(props: IProps) {
     super(props);
     this.state = {
       folderWalkResults: [],
-      searchPaneIndex: undefined,
+      searchPaneIndex: 0,
+      fileOps: [],
     };
   }
 
@@ -34,15 +48,6 @@ class Import extends React.Component<IProps, IState> {
     });
   }
 
-  /**
-   * This initializes a socket.io connection instance with supplied configuration
-   *
-   * @return {void} A good string
-   *
-   * @example
-   *
-   *     initiateSocketConnection()
-   */
   public initiateSocketConnection = () => {
     if (typeof this.props.path !== "undefined") {
       socket = io(SOCKET_BASE_URI, {

src/client/components/Navbar.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
+import { RootState } from "threetwo-ui-typings";
 
 const Navbar: React.FunctionComponent = (props) => {
-  const socketConnection = useSelector((state) => state.fileOps);
+  const socketConnection = useSelector((state: RootState) => state.fileOps);
 
   return (
     <nav className="navbar ">

src/client/index.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
-import configureStore from "./store/index";
+import { ConnectedRouter } from "connected-react-router";
+import configureStore, { history } from "./store/index";
 import App from "./components/App";
 
 const store = configureStore({});
@@ -9,7 +10,9 @@ const rootEl = document.getElementById("root");
 
 render(
   <Provider store={store}>
-    <App history={history} />
+    <ConnectedRouter history={history}>
+      <App />
+    </ConnectedRouter>
   </Provider>,
   rootEl,
 );

src/client/shared/utils/nlp.utils.ts

@@ -8,7 +8,12 @@ nlp.extend(sentences);
 nlp.extend(numbers);
 nlp.extend(dates);
 
-export function tokenize(inputString) {
+/**
+ * Tokenizes a search string
+ * @function
+ * @param {string} inputString - The string used to search against CV, Shortboxed, and other APIs.
+ */
+export const tokenize = (inputString) => {
   const doc = nlp(inputString);
   const sentence = doc.sentences().json();
   const number = doc.numbers().fractions();
@@ -41,7 +46,7 @@ export function tokenize(inputString) {
     },
   };
   return queryObject;
-}
+};
 
 export function refineQuery(queryString) {
   const queryObj = tokenize(queryString);

tsconfig.json

@@ -3,29 +3,20 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
+    "noImplicitAny": false,
     "target": "es2019",
     "jsx": "react",
     "module": "commonjs",
     "sourceMap": true,
     "outDir": "./dist/",
     "skipLibCheck": true,
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext", "webworker"]
-      "dom",
-      "dom.iterable",
-      "esnext",
-      "webworker"
-    ]
   },
   "settings": {
     "eslint.workingDirectories": [
       { "directory": "./node_modules", "changeProcessCWD": true }
     ]
   },
-  "exclude": [
+  "exclude": ["./src/server "],
-    "./src/server "
+  "include": ["./src/client/*", "./src/client/types/**/*.d.ts"]
-  ],
+}
-  "include": [
-    "./src/client/*",
-    "./src/client/types/**/*.d.ts"
-  ]
-}