filter page and filter with year range

package.json

@@ -20,6 +20,7 @@
     "node-sass-chokidar": "^0.0.3",
     "normalize-scss": "^7.0.1",
     "query-string": "^5.0.0",
+    "rc-slider": "^8.6.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-feather": "^1.0.4",

src/containers/App.js

@@ -30,6 +30,7 @@ import ScrollToTop from '../components/util/ScrollToTop';
 import AddStories from './views/AddStories/AddStories';
 import DashboardStoryList from './views/DashboardStoryList/DashboardStoryList';
 import EditStory from './views/EditStory/EditStory';
+import Filter from './views/Filter/Filter';
 
 import StoryDashboard from './views/StoryDashboard/StoryDashboard';
 
@@ -117,6 +118,11 @@ class App extends Component {
                     {...props}
                   />}
               />
+              <Route
+                path="/filter"
+                exact
+                render={props => <Filter user={user} {...props} />}
+              />
               <Route
                 path="/dashboardstorylist/:storyId/edit"
                 exact

src/containers/views/Filter/Filter.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { fetchStories, setYearRange } from '../../../redux/actions';
+import Spinner from '../../../components/spinner/Spinner';
+import { Range } from 'rc-slider';
+import 'rc-slider/assets/index.css';
+import './Filter.css';
+
+
+class Filter extends React.Component {
+    componentWillMount() {
+        this.props.fetchStories();
+        this.state = { yearRange: [0, 2018] };
+    }
+
+    render() {
+        let {
+            setYearRange,
+            isLoading,
+            minYear,
+            maxYear,
+            filteredStories
+        } = this.props;
+
+        if (isLoading) {
+            return <Spinner page />
+        }
+
+        return <div className="filter-root">
+            <div className="range-container">
+                {this.state.yearRange.join("-")}
+                <Range
+                    max={maxYear}
+                    min={minYear}
+                    allowCross={false}
+                    value={this.state.yearRange}
+                    onChange={yearRange => this.setState({yearRange})}
+                    onAfterChange={setYearRange}
+                />
+            </div>
+
+            {filteredStories.map(story => {
+                return <div key={story.id || story.general.id || story.general.title}>
+                <h2>{story.general.title} ({story.general.dayOfBirth})</h2>
+                </div>
+            })}
+        </div>
+    }
+}
+
+const mapStateToProps = state => ({
+    ...state.filtering
+});
+
+export default connect(mapStateToProps, { fetchStories, setYearRange })(Filter);

src/containers/views/Filter/Filter.scss

@@ -0,0 +1,5 @@
+.filter-root {
+    h2 {
+        color: black;
+    }
+}

src/redux/actions.js

@@ -89,6 +89,10 @@ export const actionTypes = {
   fetchStoryStarted: 'FETCH_STORY_STARTED',
   fetchStoryFulFilled: 'FETCH_STORY_FULFILLED',
   fetchStoryRejected: 'FETCH_STORY_REJECTED',
+  fetchStoriesStarted: 'FETCH_STORIES_STARTED',
+  fetchStoriesFulFilled: 'FETCH_STORIES_FULFILLED',
+  fetchStoriesRejected: 'FETCH_STORIES_REJECTED',
+  setFilterYearRange: 'SET_FILTER_YEAR_RANGE',
   deleteModuleStarted: 'DELETE_MODULE_STARTED',
   deleteModuleFulFilled: 'DELETE_MODULE_FULFILLED',
   deleteModuleRejected: 'DELETE_MODULE_REJECTED',
@@ -167,6 +171,46 @@ export const fetchStoryRejected = err => ({
   err
 });
 
+export const setFiltersYearRange = range => ({
+  type: actionTypes.setFilterYearRange,
+  range
+});
+
+export const setYearRange = range => {
+  return dispatch => {
+    dispatch(setFiltersYearRange(range))
+  };
+}
+
+export const fetchStories = () => {
+  return dispatch => {
+    dispatch(fetchStoriesStarted());
+    return firebaseDatabase
+      .ref("/stories")
+      .once('value')
+      .then(stories => {
+        dispatch(fetchStoriesFulFilled(stories.val()));
+      })
+      .catch(err => {
+        dispatch(fetchStoriesRejected(err));
+      });
+  };
+};
+
+export const fetchStoriesStarted = () => ({
+  type: actionTypes.fetchStoriesStarted
+});
+
+export const fetchStoriesFulFilled = stories => ({
+  type: actionTypes.fetchStoriesFulFilled,
+  stories
+});
+
+export const fetchStoriesRejected = err => ({
+  type: actionTypes.fetchStoriesRejected,
+  err
+});
+
 export const deleteModuleStarted = () => ({
   type: actionTypes.deleteModuleStarted,
 });

src/redux/modules/filtering.js

@@ -0,0 +1,57 @@
+import { actionTypes } from '../actions';
+
+const initialState = {
+    isLoading: true,
+    stories: null,
+    filteredStories: null,
+    filters: {
+        yearRange: [0, 2018]
+    },
+    minYear: 1800,
+    maxYear: 2018,
+    error: null
+};
+
+const getFilteredStories = (state, filters) => {
+    return Object.keys(state.stories || {})
+        .map(key => state.stories[key])
+        .filter(story => {
+            // minYear
+            let [min, max] = filters.yearRange;
+            let birthYear = new Date(story.general.dayOfBirth).getFullYear();
+            return min <= birthYear && max >= birthYear;
+        })
+};
+
+export const reducer = (state = initialState, action) => {
+    let filters;
+    switch (action.type) {
+        case actionTypes.fetchStoriesStarted:
+            return Object.assign({}, state, { isLoading: true });
+        case actionTypes.fetchStoriesFulFilled:
+            console.log(action.stories)
+            return Object.assign({}, state, {
+                isLoading: false,
+                stories: action.stories,
+                filteredStories: Object.keys(action.stories || {})
+                    .map(k => action.stories[k])
+            });
+        case actionTypes.setFilterYearRange:
+            filters = {
+                ...state.filters,
+                yearRange: action.range
+            };
+
+            return Object.assign({}, state, {
+                filters,
+                filteredStories: getFilteredStories(state, filters)
+            });
+        case actionTypes.fetchStoriesRejected:
+            return Object.assign({}, state, {
+                isLoading: false,
+                error: action.error
+            });
+        default:
+            return state;
+    }
+};

src/redux/modules/index.js

@@ -13,6 +13,7 @@ import { reducer as snipper } from './snipper';
 import { reducer as snippers } from './snippers';
 import { reducer as stories } from './dashboardStoryList';
 import { reducer as story } from './story';
+import { reducer as filtering } from './filtering';
 
 export const rootReducer = combineReducers({
   user,
@@ -28,5 +29,6 @@ export const rootReducer = combineReducers({
   snipper,
   snippers,
   stories,
+  filtering,
   story
 });