📃 JSDoc for Typescript added

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 />
-          <Switch>
-            <Route exact path="/">
-              <Dashboard />
-            </Route>
-            <Route path="/import">
-              <Import path={"./comics"} />
-            </Route>
-            <Route
-              path={"/comic/details/:comicObjectId"}
-              component={ComicDetail}
-            />
-          </Switch>
-        </Router>
+        <Navbar />
+        <Switch>
+          <Route exact path="/">
+            <Dashboard />
+          </Route>
+          <Route path="/import">
+            <Import path={"./comics"} />
+          </Route>
+          <Route
+            path={"/comic/details/:comicObjectId"}
+            component={ComicDetail}
+          />
+        </Switch>
       </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 { comicObjectId } = useParams();
+  const [comicDetail, setComicDetail] = useState<{
+    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);