📃 JSDoc for Typescript added

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