From e9e7ff7e5f2f3ef58bb85ad8627a33e1c48b77cb Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sat, 29 Jan 2022 15:55:45 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=20Building=20out=20the=20VolumeDet?= =?UTF-8?q?ail=20page=20scaffold?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/comicinfo.actions.tsx | 18 ++++++ src/client/components/App.tsx | 9 ++- src/client/components/ComicDetail.tsx | 6 +- .../components/ComicDetail/RawFileDetails.tsx | 1 - .../components/VolumeDetail/VolumeDetail.tsx | 62 +++++++++++++++++++ src/client/components/VolumeGroups.tsx | 6 +- src/client/constants/action-types.ts | 6 ++ src/client/reducers/comicinfo.reducer.js | 14 +++++ 8 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 src/client/components/VolumeDetail/VolumeDetail.tsx diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx index f117b44..7adf9a2 100644 --- a/src/client/actions/comicinfo.actions.tsx +++ b/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({ diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index 24a87f4..3ce9cd5 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -1,5 +1,5 @@ -import React, { ReactElement, useEffect, useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; +import React, { ReactElement, useState } from "react"; +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} /> + diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 2037dfb..8d00847 100644 --- a/src/client/components/ComicDetail.tsx +++ b/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 */} {id === 4 && - !isNil(comicBookDetailData) && - !isEmpty(comicBookDetailData) ? ( + !isNil(comicBookDetailData) && + !isEmpty(comicBookDetailData) ? ( diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx index 6079fac..846a4f9 100644 --- a/src/client/components/ComicDetail/RawFileDetails.tsx +++ b/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 (
diff --git a/src/client/components/VolumeDetail/VolumeDetail.tsx b/src/client/components/VolumeDetail/VolumeDetail.tsx new file mode 100644 index 0000000..2cac574 --- /dev/null +++ b/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 ( +
+
+

+ {comicBookDetails.sourcedMetadata.comicvine.volumeInformation.name} +

+
+
+ +
+
+ {issues.map((issue, idx) => { + return ; + })} +
+ {/* 
{JSON.stringify(comicBookDetails, undefined, 2)}
*/} +
+
+
+ ); + } else { + return <>; + } +}; + +export default VolumeDetails; diff --git a/src/client/components/VolumeGroups.tsx b/src/client/components/VolumeGroups.tsx index 539c0be..268a406 100644 --- a/src/client/components/VolumeGroups.tsx +++ b/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 (
- {ellipsize(group.results.name, 18)} + + {ellipsize(group.results.name, 18)} +
diff --git a/src/client/constants/action-types.ts b/src/client/constants/action-types.ts index e1259e9..ae1206b 100644 --- a/src/client/constants/action-types.ts +++ b/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"; diff --git a/src/client/reducers/comicinfo.reducer.js b/src/client/reducers/comicinfo.reducer.js index 3b275d7..8f67a00 100644 --- a/src/client/reducers/comicinfo.reducer.js +++ b/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; }