🏗 Building out the VolumeDetail page scaffold

src/client/actions/comicinfo.actions.tsx

@@ -11,6 +11,8 @@ import {
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+  CV_ISSUES_METADATA_CALL_IN_PROGRESS,
+  CV_ISSUES_METADATA_FETCH_SUCCESS,
 } from "../constants/action-types";
 import {
   COMICBOOKINFO_SERVICE_URI,
@@ -62,7 +64,23 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
     });
   }
 };
+export const getIssuesForSeries = (comicObjectID: any) => async (dispatch) => {
+  dispatch({
+    type: CV_ISSUES_METADATA_CALL_IN_PROGRESS,
+  });
 
+  const issues = await axios({
+    url: `${COMICBOOKINFO_SERVICE_URI}/getIssuesForVolume`,
+    params: {
+      comicObjectID,
+    },
+  });
+  console.log(issues);
+  dispatch({
+    type: CV_ISSUES_METADATA_FETCH_SUCCESS,
+    issues,
+  });
+};
 export const getComicBookDetailById =
   (comicBookObjectId: string) => async (dispatch) => {
     dispatch({

src/client/components/App.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { hot } from "react-hot-loader";
 import Dashboard from "./Dashboard";
 
@@ -9,6 +9,7 @@ import Library from "./Library";
 import LibraryGrid from "./LibraryGrid";
 import Search from "./Search";
 import Settings from "./Settings";
+import VolumeDetail from "./VolumeDetail/VolumeDetail";
 
 import { Switch, Route } from "react-router";
 import Navbar from "./Navbar";
@@ -98,6 +99,10 @@ export const App = (): ReactElement => {
             path={"/comic/details/:comicObjectId"}
             component={ComicDetail}
           />
+          <Route
+            path={"/volume/details/:comicObjectId"}
+            component={VolumeDetail}
+          />
           <Route path="/settings">
             <Settings />
           </Route>

src/client/components/ComicDetail.tsx

@@ -40,7 +40,7 @@ type ComicDetailProps = {};
  * )
  */
 
-export const ComicDetail = ({ }: ComicDetailProps): ReactElement => {
+export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
@@ -180,8 +180,8 @@ export const ComicDetail = ({ }: ComicDetailProps): ReactElement => {
                 {/* Downloads tab and count badge */}
                 <a>
                   {id === 4 &&
-                    !isNil(comicBookDetailData) &&
+                  !isNil(comicBookDetailData) &&
-                    !isEmpty(comicBookDetailData) ? (
+                  !isEmpty(comicBookDetailData) ? (
                     <span className="download-icon-labels">
                       <i className="fa-solid fa-download"></i>
                       <span className="tag downloads-count">

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -4,7 +4,6 @@ import prettyBytes from "pretty-bytes";
 
 export const RawFileDetails = (props): ReactElement => {
   const { data } = props;
-  console.log(data);
   return (
     <div className="content comic-detail">
       <dl>

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -0,0 +1,62 @@
+import { isUndefined } from "lodash";
+import React, { useEffect, ReactElement } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router";
+import {
+  getComicBookDetailById,
+  getIssuesForSeries,
+} from "../../actions/comicinfo.actions";
+import { Card } from "../Carda";
+
+const VolumeDetails = (props): ReactElement => {
+  const comicBookDetails = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
+  );
+  const issues = useSelector(
+    (state: RootState) => state.comicInfo.issuesForVolume,
+  );
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getIssuesForSeries(comicObjectId));
+    dispatch(getComicBookDetailById(comicObjectId));
+  }, []);
+
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+
+  if (
+    !isUndefined(comicBookDetails.sourcedMetadata) &&
+    !isUndefined(comicBookDetails.sourcedMetadata.comicvine)
+  ) {
+    return (
+      <div className="container">
+        <div className="section">
+          <h1 className="title">
+            {comicBookDetails.sourcedMetadata.comicvine.volumeInformation.name}
+          </h1>
+          <div className="columns is-multiline">
+            <div className="column is-narrow">
+              <Card
+                imageUrl={
+                  comicBookDetails.sourcedMetadata.comicvine.volumeInformation
+                    .image.small_url
+                }
+                orientation={"vertical"}
+                hasDetails={false}
+              />
+            </div>
+            <div>
+              {issues.map((issue, idx) => {
+                return <img key={idx} src={issue.image.thumb_url} />;
+              })}
+            </div>
+            {/* <pre>{JSON.stringify(comicBookDetails, undefined, 2)}</pre> */}
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default VolumeDetails;

src/client/components/VolumeGroups.tsx

@@ -2,6 +2,7 @@ import { isNil, map } from "lodash";
 import React, { ReactElement, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import ellipsize from "ellipsize";
+import { Link } from "react-router-dom";
 import { fetchVolumeGroups } from "../actions/fileops.actions";
 import Masonry from "react-masonry-css";
 
@@ -34,12 +35,15 @@ export const VolumeGroups = (): ReactElement => {
           volumeGroups &&
           map(volumeGroups.data, (group) => {
             if (!isNil(group)) {
+              console.log(group);
               return (
                 <div className="stack" key={group.results.id}>
                   <img src={group.results.image.small_url} />
                   <div className="content">
                     <div className="stack-title is-size-8">
-                      {ellipsize(group.results.name, 18)}
+                      <Link to={`/volume/details/${group.comicObjectId}`}>
+                        {ellipsize(group.results.name, 18)}
+                      </Link>
                     </div>
                     <div className="control">
                       <span className="tags has-addons">

src/client/constants/action-types.ts

@@ -39,6 +39,12 @@ export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
 export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED =
   "IMS_COMIC_BOOK_GROUPS_CALL_FAILED";
 
+// issues for a given volume
+export const CV_ISSUES_METADATA_CALL_IN_PROGRESS =
+  "ISSUES_METADATA_CALL_IN_PROGRESS";
+export const CV_ISSUES_METADATA_FETCH_SUCCESS = "ISSUES_METADATA_FETCH_SUCCESS";
+export const CV_ISSUES_METADATA_FETCH_FAILED = "ISSUES_METADATA_FETCH_FAILED";
+
 // extracted comic archive
 export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS =
   "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS";

src/client/reducers/comicinfo.reducer.js

@@ -5,12 +5,15 @@ import {
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
   IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
   IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED,
+  CV_ISSUES_METADATA_CALL_IN_PROGRESS,
+  CV_ISSUES_METADATA_FETCH_SUCCESS,
 } from "../constants/action-types";
 const initialState = {
   searchResults: [],
   searchQuery: {},
   inProgress: false,
   comicBookDetail: {},
+  issuesForVolume: [],
   IMS_inProgress: false,
 };
 
@@ -46,6 +49,17 @@ function comicinfoReducer(state = initialState, action) {
         searchResults: [],
         searchQuery: {},
       };
+    case CV_ISSUES_METADATA_CALL_IN_PROGRESS:
+      return {
+        inProgress: true,
+        ...state,
+      };
+    case CV_ISSUES_METADATA_FETCH_SUCCESS:
+      console.log(action);
+      return {
+        ...state,
+        issuesForVolume: action.issues.data,
+      };
     default:
       return state;
   }