From 2b3fcbfeb58d224b257dae643dbeeba5e41c5148 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 11 Jun 2021 10:27:13 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=91=20Added=20comic=20detail=20page=20?=
 =?UTF-8?q?and=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/fileops.actions.tsx     |  2 +-
 src/client/components/App.tsx              |  5 +++++
 src/client/components/Card.tsx             | 10 +++++++---
 src/client/components/ComicDetail.tsx      |  5 +++++
 src/client/components/RecentlyImported.tsx | 10 ++++++++--
 5 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 src/client/components/ComicDetail.tsx

diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx
index dadc179..0056c18 100644
--- a/src/client/actions/fileops.actions.tsx
+++ b/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,
       });
     });
 };
diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index 2cf5247..3f933de 100644
--- a/src/client/components/App.tsx
+++ b/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>
diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx
index 0a3675b..82cc7d1 100644
--- a/src/client/components/Card.tsx
+++ b/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) &&
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
new file mode 100644
index 0000000..c4b1e09
--- /dev/null
+++ b/src/client/components/ComicDetail.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+type ComicDetailProps = {};
+
+export const ComicDetail = ({}: ComicDetailProps) => <section>1,2,3</section>;
diff --git a/src/client/components/RecentlyImported.tsx b/src/client/components/RecentlyImported.tsx
index 5a1c1fc..456dadb 100644
--- a/src/client/components/RecentlyImported.tsx
+++ b/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>
 );