1// PaneContainer.js
2
3import { connect } from 'react-redux';
4import Pane from './Pane';
5
6// Simple helper function, which return all filters from state by given key.
7function getFilters(key, movies) {
8 return movies.reduce((acc, movie) => {
9 if (!acc.includes(movie[key])) {
10 return [...acc, movie[key]];
11 }
12 return acc;
13 }, []);
14}
15
16function mapStateToProps(state, props) {
17 const { sorting, year, genre, rating } = state;
18 return {
19 selectedYear: year,
20 selectedGenre: genre,
21 selectedRating: rating,
22 years: getFilters('year', state.movies),
23 genres: getFilters('genre', state.movies),
24 ratings: getFilters('rating', state.movies),
25 sorting,
26 };
27}
28
29function mapDispatchToProps(dispatch, props) {
30 return {
31 // Here, we are providing callbacks with dispatching functions.
32 onYearChange(year) {
33 dispatch({
34 type: 'SET_YEAR',
35 year,
36 });
37 },
38 onGenreChange(genre) {
39 dispatch({
40 type: 'SET_GENRE',
41 genre,
42 });
43 },
44 onRatingChange(rating) {
45 dispatch({
46 type: 'SET_RATING',
47 rating,
48 });
49 },
50 onSortingChange(sorting) {
51 dispatch({
52 type: 'SET_SORTING',
53 sorting,
54 });
55 },
56 };
57}
58
59export default connect(
60 mapStateToProps,
61 mapDispatchToProps
62)(Pane);
63
1// Pane.js
2
3import React from 'react';
4
5function Pane({
6 selectedYear,
7 selectedGenre,
8 selectedRating,
9 years = [],
10 genres = [],
11 ratings = [],
12 sorting,
13 onYearChange,
14 onGenreChange,
15 onRatingChange,
16 onSortingChange,
17}) {
18 return (
19 <div>
20 <div>
21 Filters:
22 <div>
23 Year:
24 <select
25 defaultValue={selectedYear}
26 onChange={e => onYearChange(e.target.value)}
27 >
28 <option value="all" >All</option>
29 {years.map((y, i) =>
30 <option key={i} value={y}>{y}</option>
31 )}
32 </select>
33 </div>
34 <div>
35 Genre:
36 <select
37 defaultValue={selectedGenre}
38 onChange={e => onGenreChange(e.target.value)}
39 >
40 <option value="all" >All</option>
41 {genres.map((g, i) =>
42 <option key={i} value={g}>{g}</option>
43 )}
44 </select>
45 </div>
46 <div>
47 Rating:
48 <select
49 defaultValue={selectedRating}
50 onChange={e => onRatingChange(e.target.value)}
51 >
52 <option value="all" >All</option>
53 {ratings.map((r, i) =>
54 <option key={i} value={r}>{r}</option>
55 )}
56 </select>
57 </div>
58 </div>
59 <div>
60 Select sorting:
61 <select
62 defaultValue={sorting}
63 onChange={e => onSortingChange(e.target.value)}
64 >
65 <option value="alphabetically">Alphabetically</option>
66 <option value="year">Year</option>
67 <option value="rating">Rating</option>
68 </select>
69 </div>
70 </div>
71 );
72}
73
74export default Pane;
75