63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
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;
|