📝 Adding elements to Comic Detail page

src/client/components/ComicDetail.tsx

@@ -1,5 +1,40 @@
-import React from "react";
-
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import axios from "axios";
+import Card from "./Card";
+import { isEmpty, isUndefined } from "lodash";
 type ComicDetailProps = {};
 
-export const ComicDetail = ({}: ComicDetailProps) => <section>1,2,3</section>;
+export const ComicDetail = ({}: ComicDetailProps) => {
+  const [page, setPage] = useState(1);
+  const [comicDetail, setComicDetail] = useState([]);
+  const { comicObjectId } = useParams();
+
+  useEffect(() => {
+    axios
+      .request({
+        url: `http://localhost:3000/api/import/getComicBookById`,
+
+        method: "POST",
+        data: {
+          id: comicObjectId,
+        },
+      })
+      .then((response) => {
+        console.log("fetched", response);
+        setComicDetail(response.data);
+      })
+      .catch((error) => console.log(error));
+  }, [page]);
+
+  return (
+    <section className="container">
+      {!isEmpty(comicDetail) && !isUndefined(comicDetail) && (
+        <>
+          <h1 className="title">{comicDetail.rawFileDetails.name}</h1>
+          <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
+        </>
+      )}
+    </section>
+  );
+};