diff --git a/.gitignore b/.gitignore index 89b2b23..6fa6ebd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .idea/ .DS_Store comics/ +docs/ userdata/ dist/ server/ diff --git a/jsdoc.json b/jsdoc.json new file mode 100644 index 0000000..63e4634 --- /dev/null +++ b/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" + } +} diff --git a/package.json b/package.json index 3da6cdb..8979bf0 100644 --- a/package.json +++ b/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", diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 30e8adc..d49698e 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -24,7 +24,17 @@ export async function walkFolder(path: string): Promise> { }) .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} HTML of the page + */ export const fetchComicBookMetadata = (options) => async (dispatch) => { const extractionOptions = { sourceFolder: options, diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index 93b1c08..f905595 100644 --- a/src/client/components/App.tsx +++ b/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, undefined> { +class App extends React.Component { public render() { return (
- - - - - - - - - - - - + + + + + + + + + +
); } diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 2726326..ba8b198 100644 --- a/src/client/components/ComicDetail.tsx +++ b/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 diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx index c31e493..cd26441 100644 --- a/src/client/components/Import.tsx +++ b/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 { + /** + * 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 { }); } - /** - * 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, { diff --git a/src/client/components/Navbar.tsx b/src/client/components/Navbar.tsx index b74b5e8..2439b71 100644 --- a/src/client/components/Navbar.tsx +++ b/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 (