70 lines
2.1 KiB
JavaScript

import React from "react"
import PropTypes from "prop-types"
import { Map } from "immutable"
import { connect } from "react-redux"
import { selectShow, addShowToWishlist,
deleteShowFromWishlist, getShowDetails, updateFilter } from "../../actions/shows"
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, addShowToWishlist, deleteShowFromWishlist,
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} />
</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,
deleteShowFromWishlist: PropTypes.func,
addShowToWishlist: PropTypes.func,
selectShow: PropTypes.func,
getShowDetails: PropTypes.func,
updateFilter: PropTypes.func,
};
export default connect(mapStateToProps, mapDispatchToProps)(ShowList);