From a3cf35b4d85c646d90ec1518b104c74f382ab2b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysiek=20Gre=C5=84?= <k.gren@selleo.com>
Date: Thu, 13 Apr 2017 18:37:12 +0200
Subject: [PATCH] categories filter

---
 client/src/components/Posts/PostList.js       | 13 +++++++++----
 client/src/components/Posts/PostListFilter.js | 14 +++++++++++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Posts/PostList.js b/client/src/components/Posts/PostList.js
index 5625e1b..1c49560 100644
--- a/client/src/components/Posts/PostList.js
+++ b/client/src/components/Posts/PostList.js
@@ -3,12 +3,13 @@ import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import { get, find, keyBy } from 'lodash';
 
-import { fetchList, getList, getMap } from '../../store/api';
+import { fetchList, getList, getMap, getMany } from '../../store/api';
 import PostListFilter from './PostListFilter';
 
 export class PostList extends Component {
   componentWillMount() {
     this.props.fetchPosts(this.props.filter);
+    this.props.fetchCategories();
   }
 
   getCategoryForPost(post) {
@@ -21,10 +22,12 @@ export class PostList extends Component {
     this.props.fetchPage(url);
   };
 
-  onFilter = (filter) => this.props.fetchPosts(filter);
+  onFilter = (filter) => {
+    this.props.fetchPosts(filter);
+  }
 
   render() {
-    const { posts } = this.props;
+    const { posts, categoriesById, categories } = this.props;
     const { prev, next } = posts.links;
 
     return (
@@ -32,7 +35,7 @@ export class PostList extends Component {
         <p>
           <Link to={'/posts/new'}>New Post</Link>
         </p>
-        <PostListFilter onSubmit={this.onFilter}></PostListFilter>
+        <PostListFilter onSubmit={this.onFilter} categories={categories}></PostListFilter>
         {posts.data.map(post =>
           <div key={post.id}>
             <Link to={`/posts/${post.id}`}>{post.attributes.title}</Link>
@@ -51,12 +54,14 @@ export class PostList extends Component {
 export const mapStateToProps = (state) => ({
   filter: get(state, 'form.postListFilter.values') || {},
   categoriesById: getMap(state, 'categories'),
+  categories: getMany(state, 'categories'),
   posts: getList(state, 'posts'),
 });
 
 export const mapDispatchToProps = (dispatch) => ({
   fetchPosts: (filter = {}) => dispatch(fetchList('posts', {include: 'category', filter})),
   fetchPage: (url) => dispatch(fetchList('posts', {include: 'category'}, {url})),
+  fetchCategories: () => dispatch(fetchList('categories', {page: { limit: 999 }})),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(PostList);
diff --git a/client/src/components/Posts/PostListFilter.js b/client/src/components/Posts/PostListFilter.js
index 8fdf31b..7ce2b66 100644
--- a/client/src/components/Posts/PostListFilter.js
+++ b/client/src/components/Posts/PostListFilter.js
@@ -1,17 +1,25 @@
 import React, { Component, PropTypes } from 'react';
 import { isEmpty } from 'lodash';
 import { Field, reduxForm } from 'redux-form';
-import { InputField } from '../Forms';
+import { InputField, SelectField } from '../Forms';
 
 class PostListFilter extends Component {
   render() {
-    const { handleSubmit, onSubmit } = this.props;
+    const { handleSubmit, onSubmit, categories } = this.props;
+
+    const categoriesOptions = categories.map(category => ({
+      id: category.id,
+      name: category.attributes.name,
+    }));
+    categoriesOptions.unshift({ id: "", name: 'All categories'})
 
     return (
       <form onSubmit={handleSubmit}>
         <div>
           <Field name="title_contains" label="Title Contains" component={InputField}
-                 onBlur={() => handleSubmit(onSubmit)()} />
+            onBlur={() => handleSubmit(onSubmit)()} />
+          <Field name="category" label="Category" component={SelectField} options={categoriesOptions}
+            onBlur={() => handleSubmit(onSubmit)()} />
         </div>
       </form>
     );