47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { useSelector } from "react-redux";
|
|
|
|
import { Episode } from "./episode";
|
|
|
|
export const Season = ({ season }) => {
|
|
const [show, setShow] = useState(false);
|
|
|
|
const episodeNumbers = useSelector((state) =>
|
|
Array.from(state.show.show.seasons.get(season).keys())
|
|
);
|
|
|
|
const showToggle = () => {
|
|
setShow(!show);
|
|
};
|
|
|
|
return (
|
|
<div className="card mb-3 show-season">
|
|
<div className="card-header clickable" onClick={showToggle}>
|
|
<h5 className="m-0">
|
|
Season {season}
|
|
<small className="text-primary">
|
|
{" "}
|
|
— ({episodeNumbers.length} episodes)
|
|
</small>
|
|
<i
|
|
className={`float-right fa fa-chevron-${show ? "down" : "left"}`}
|
|
></i>
|
|
</h5>
|
|
</div>
|
|
<div className={`card-body ${show ? "d-flex flex-column" : "d-none"}`}>
|
|
{episodeNumbers.map((episode) => (
|
|
<Episode
|
|
key={`${season}-${episode}`}
|
|
season={season}
|
|
episode={episode}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
Season.propTypes = {
|
|
season: PropTypes.number.isRequired,
|
|
};
|