redux filter pane

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

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