86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import { Map } from "immutable"
|
|
import { connect } from "react-redux"
|
|
import { selectShow, showWishlistToggle,
|
|
getShowDetails, updateFilter } from "../../actions/shows"
|
|
|
|
import { isWishlisted } from "../../utils"
|
|
|
|
import ListDetails from "../list/details"
|
|
import ListPosters from "../list/posters"
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
loading : state.showsStore.get("loading"),
|
|
shows : state.showsStore.get("shows"),
|
|
filter : state.showsStore.get("filter"),
|
|
selectedImdbId : state.showsStore.get("selectedImdbId"),
|
|
exploreOptions : state.showsStore.get("exploreOptions"),
|
|
};
|
|
}
|
|
const mapDispatchToProps = {
|
|
selectShow, showWishlistToggle,
|
|
getShowDetails, updateFilter,
|
|
};
|
|
|
|
const ShowList = (props) => {
|
|
const showDetails = (imdbId) => {
|
|
props.history.push("/shows/details/" + imdbId);
|
|
}
|
|
|
|
let selectedShow = Map();
|
|
if (props.selectedImdbId !== "") {
|
|
selectedShow = props.shows.get(props.selectedImdbId);
|
|
}
|
|
|
|
return (
|
|
<div className="row" id="container">
|
|
<ListPosters
|
|
data={props.shows}
|
|
type="shows"
|
|
placeHolder="Filter shows..."
|
|
exploreOptions={props.exploreOptions}
|
|
updateFilter={props.updateFilter}
|
|
selectedImdbId={props.selectedImdbId}
|
|
filter={props.filter}
|
|
onClick={props.selectShow}
|
|
onDoubleClick={showDetails}
|
|
onKeyEnter={showDetails}
|
|
params={props.match.params}
|
|
loading={props.loading}
|
|
/>
|
|
<ListDetails
|
|
data={selectedShow}
|
|
loading={props.loading}
|
|
wishlist={() => props.showWishlistToggle(
|
|
isWishlisted(selectedShow), selectedShow.get("imdb_id"),
|
|
)}
|
|
>
|
|
<span>
|
|
<button onClick={
|
|
() => showDetails(selectedShow.get("imdb_id"))}
|
|
className="btn btn-primary btn-sm w-md-100">
|
|
<i className="fa fa-external-link mr-1" />
|
|
Details
|
|
</button>
|
|
</span>
|
|
</ListDetails>
|
|
</div>
|
|
);
|
|
}
|
|
ShowList.propTypes = {
|
|
match: PropTypes.object,
|
|
history: PropTypes.object,
|
|
shows: PropTypes.instanceOf(Map),
|
|
exploreOptions: PropTypes.instanceOf(Map),
|
|
selectedImdbId: PropTypes.string,
|
|
filter: PropTypes.string,
|
|
loading: PropTypes.bool,
|
|
showWishlistToggle: PropTypes.func,
|
|
selectShow: PropTypes.func,
|
|
getShowDetails: PropTypes.func,
|
|
updateFilter: PropTypes.func,
|
|
};
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ShowList);
|