88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
import { Plot } from "../../details/plot";
|
|
import { Rating } from "../../details/rating";
|
|
import { ReleaseDate } from "../../details/releaseDate";
|
|
import { Title } from "../../details/title";
|
|
import { TrackingLabel } from "../../details/tracking";
|
|
|
|
import { ImdbBadge } from "../../buttons/imdb";
|
|
import { Refresh } from "../../buttons/refresh";
|
|
|
|
import {
|
|
showWishlistToggle,
|
|
fetchShowDetails,
|
|
getShowDetails,
|
|
} from "../../../actions/shows";
|
|
|
|
export const Header = () => {
|
|
const dispatch = useDispatch();
|
|
const {
|
|
poster_url: posterUrl,
|
|
title,
|
|
imdb_id: imdbId,
|
|
year,
|
|
rating,
|
|
plot,
|
|
tracked_season: trackedSeason,
|
|
tracked_episode: trackedEpisode,
|
|
fetchingDetails,
|
|
} = useSelector((state) => state.show.show);
|
|
|
|
useEffect(() => {
|
|
if (fetchingDetails === false) {
|
|
dispatch(fetchShowDetails(imdbId));
|
|
}
|
|
}, [fetchingDetails, imdbId, dispatch]);
|
|
|
|
const wishlisted = trackedSeason !== null && trackedEpisode !== null;
|
|
|
|
return (
|
|
<div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3">
|
|
<div className="d-flex flex-column flex-md-row">
|
|
<div className="d-flex justify-content-center">
|
|
<img className="overflow-hidden object-fit-cover" src={posterUrl} />
|
|
</div>
|
|
<div>
|
|
<div className="card-body">
|
|
<p className="card-title">
|
|
<Title
|
|
title={title}
|
|
wishlisted={wishlisted}
|
|
wishlist={() =>
|
|
dispatch(showWishlistToggle(wishlisted, imdbId))
|
|
}
|
|
/>
|
|
</p>
|
|
<p className="card-text">
|
|
<ReleaseDate date={year} />
|
|
</p>
|
|
<p className="card-text">
|
|
<Rating rating={rating} />
|
|
</p>
|
|
<p className="card-text">
|
|
<ImdbBadge imdbId={imdbId} />
|
|
<Refresh
|
|
onClick={() => dispatch(getShowDetails(imdbId))}
|
|
loading={fetchingDetails}
|
|
kind="info"
|
|
/>
|
|
</p>
|
|
<p className="card-text">
|
|
<TrackingLabel
|
|
inLibrary={false}
|
|
trackedSeason={trackedSeason}
|
|
trackedEpisode={trackedEpisode}
|
|
/>
|
|
</p>
|
|
<p className="card-text">
|
|
<Plot plot={plot} />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|