📑 Added comic detail page and routes

src/client/actions/fileops.actions.tsx

@@ -86,7 +86,7 @@ export const getRecentlyImportedComicBooks = (options) => async (dispatch) => {
     .then((response) => {
       dispatch({
         type: IMS_RECENT_COMICS_FETCHED,
-        data: response.data.docs,
+        data: response.data,
       });
     });
 };

src/client/components/App.tsx

@@ -2,6 +2,7 @@ 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 Navbar from "./Navbar";
@@ -20,6 +21,10 @@ class App extends React.Component<Record<string, unknown>, undefined> {
             <Route path="/import">
               <Import path={"./comics"} />
             </Route>
+            <Route
+              path={"/comic/details/:mongoObjId"}
+              component={ComicDetail}
+            />
           </Switch>
         </Router>
       </div>

src/client/components/Card.tsx

@@ -1,15 +1,18 @@
 import * as React from "react";
 import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.interface";
-import { map, isUndefined, isEmpty } from "lodash";
+import { isUndefined, isEmpty } from "lodash";
+import { Link } from "react-router-dom";
 
 interface IProps {
   comicBookCoversMetadata: IExtractedComicBookCoverFile;
+  mongoObjId?: number;
 }
 interface IState {}
 
 class Card extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
+    console.log(props);
   }
   private removeLeadingPeriod = (input: string): string => {
     if (!isUndefined(this.props.comicBookCoversMetadata)) {
@@ -41,7 +44,9 @@ class Card extends React.Component<IProps, IState> {
             </div>
             <div className="card-content">
               <ul>
-                <li className="has-text-weight-semibold">{metadata.name}</li>
+                <Link to={"/comic/details/" + this.props.mongoObjId}>
+                  <li className="has-text-weight-semibold">{metadata.name}</li>
+                </Link>
               </ul>
             </div>
           </div>
@@ -51,7 +56,6 @@ class Card extends React.Component<IProps, IState> {
   };
 
   public render() {
-    console.log(this.props.comicBookCoversMetadata);
     return (
       <>
         {!isUndefined(this.props.comicBookCoversMetadata) &&

src/client/components/ComicDetail.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+type ComicDetailProps = {};
+
+export const ComicDetail = ({}: ComicDetailProps) => <section>1,2,3</section>;

src/client/components/RecentlyImported.tsx

@@ -10,8 +10,14 @@ export const RecentlyImported = ({
   comicBookCovers,
 }: RecentlyImportedProps) => (
   <section className="card-container">
-    {map(comicBookCovers, (cover) => {
-      return <Card comicBookCoversMetadata={cover.rawFileDetails} />;
+    {map(comicBookCovers.docs, (doc, idx) => {
+      return (
+        <Card
+          key={idx}
+          comicBookCoversMetadata={doc.rawFileDetails}
+          mongoObjId={doc._id}
+        />
+      );
     })}
   </section>
 );