Remove posts, filters

app/posts/NewPost.js

@@ -9,23 +9,18 @@ import {
 	CardActions,
 } from 'material-ui'
 import { connect } from 'react-redux'
+import _ from 'lodash'
 
 import * as actions from './posts.actions'
+import * as constants from './posts.constants'
 
-const postOptions = [{
-  value: 'friends',
-  label: 'Friends'
-}, {
-  value: 'public',
-  label: 'Public'
-}]
 
-const PostOptions = props => (
+const VisibilityOptions = props => (
 	<Select
-    value="friends"
+    value={props.value}
     onChange={props.onChange}
 	>
-    {postOptions.map(option => (
+    {constants.VISIBILITY.map(option => (
 		  <MenuItem value={option.value}>{option.label}</MenuItem>
     ))}
 	</Select>
@@ -36,23 +31,67 @@ class NewPost extends React.Component {
     super(props)
 
     this.state = {
-      description: '',
-      options: ''
+      data: {
+        description: '',
+        visibility: 'friends'
+      },
+      errors: {
+        description: null,
+        visibility: null
+      }
     }
   }
 
+  validate() {
+    const { data, errors } = this.state
+    const { description } = data
+
+    const newErrors = {
+        description: null,
+        visibility: null
+    }
+    if (!description) {
+      newErrors.description = 'Ingresa una descripcion'
+    }
+
+    this.setState({ errors: newErrors })
+
+    return newErrors
+  }
+
   render() {
     const { state, props } = this
+    const { errors, data } = state
     const onPublish = () => {
-      props.addPost(state)
+      const errors = this.validate()
+      if (_.some(errors)) {
+        return
+      }
+      props.addPost(data)
+      this.setState({
+        data: {
+          description: '',
+          visibility: 'friends'
+        }
+      })
     }
 
     const onDescriptionChange = (event) => {
-      this.setState({ description: event.target.value })
+      this.setState({
+        data: {
+          ...state.data,
+          description: event.target.value
+        }
+      })
     }
 
-    const onPostOptionsChange = (event) => {
-      this.setState({ options: event.target.value })
+    const onVisibilityChange = (event) => {
+      this.setState({
+        data: {
+          ...state.data,
+          visibility: event.target.value
+        }
+      })
     }
 
     return (
@@ -62,15 +101,18 @@ class NewPost extends React.Component {
             <div>
               <TextField
                 label="Que esta pasando?"
+                value={state.data.description}
                 multiline
                 rows={4}
+                error={!_.isEmpty(errors) && errors.description}
                 onChange={onDescriptionChange}/>      
             </div>
           </form>
         </CardContent>
         <CardActions>
-          <PostOptions
-            onChange={onPostOptionsChange}/>			
+          <VisibilityOptions
+            value={state.data.visibility}
+            onChange={onVisibilityChange}/>			
           <Button onClick={onPublish}>Publicar</Button>
         </CardActions>
       </Card>
@@ -79,5 +121,5 @@ class NewPost extends React.Component {
 }
 
 export default connect(null, dispatch => ({
-  addPost: post => dispatch(actions.postAdd(post))
+  addPost: post => dispatch(actions.addPost(post))
 }))(NewPost)

app/posts/Posts.js

@@ -8,33 +8,66 @@ import {
 import { connect } from 'react-redux'
 
 import * as actions from './posts.actions'
+import * as constants from './posts.constants'
+
 
 const Post = props => {
+  const onRemove = () => {
+    if (!confirm(`Deseas eleminar este post: ${props.description}`)) {
+      return
+    }
+    props.removePost(props.id)
+  }
   return (
     <Card style={{ marginTop: 10 }}>
       <CardContent>
         {props.description}
       </CardContent>
       <CardActions>
-        <Button>Borrar</Button>
+        <Button onClick={onRemove}>Borrar</Button>
       </CardActions>
     </Card>
   )
 }
 
+const Filters = props => {
+  const onVisibilityChange = option => () => {
+    props.addFilter({
+      key: 'visibility',
+      value: option.value
+    })
+  }
+  const visibilityFilters = constants.VISIBILITY.map(option => (
+    <Button onClick={onVisibilityChange(option)} >{option.label}</Button>
+  ))
+  return (
+    <div>
+      {visibilityFilters}
+    </div>
+  )
+}
+
 class Posts  extends React.Component {
   render() {
     const { props } = this
     return (
       <div>
-        {props.list.map(post => (
-          <Post {...post} />
+        <Filters
+          addFilter={props.addFilter}
+        />
+        {props.filteredList.map(post => (
+          <Post {...post} 
+            removePost={props.removePost}
+          />
         ))}
       </div>
     )
   }
 }
 
 export default connect(state => ({
-  list: state.posts.list
+  filteredList: state.posts.filteredList
+}), dispatch => ({
+  removePost: postId => dispatch(actions.removePost(postId)),
+  addFilter: filter => dispatch(actions.addFilter(filter))
 }))(Posts)

app/posts/posts.actions.js

@@ -1,3 +1,5 @@
 import { createAction } from 'redux-actions'
 
-export const postAdd = createAction('POST_ADD')
+export const addPost = createAction('ADD_POST')
+export const removePost = createAction('REMOVE_POST')
+export const addFilter = createAction('ADD_FILTER')

app/posts/posts.constants.js

@@ -0,0 +1,8 @@
+
+export const VISIBILITY = [{
+  value: 'friends',
+  label: 'Friends'
+}, {
+  value: 'public',
+  label: 'Public'
+}]

app/posts/posts.reducer.js

@@ -1,15 +1,59 @@
 import { handleActions } from 'redux-actions'
+import uuid from 'uuid/v4' 
+import _ from 'lodash'
 
 import * as actions from './posts.actions'
 
 const initialState = {
-	list: []
+	list: [],
+  filters: {},
+  filteredList: []
+}
+
+const filterList = (list, filters) => {
+  const filteredList = list.filter(post => 
+    _.every(_.toPairs(filters).map(([key, value]) =>
+      post[key] === value
+    )) && true
+  )
+  return filteredList
 }
 
 export default handleActions({
-  [actions.postAdd]: (state, action) => ({
-    ...state,
-    list: [ ...state.list, action.payload ]
-  })
+  [actions.addPost]: (state, action) => {
+    const list = [ ...state.list, {
+      ...action.payload,
+      id: uuid()
+    }]
+    const filteredList = filterList(list, state.filters) 
+    return ({
+      ...state,
+      list,
+      filteredList
+    })
+  },
+  [actions.removePost]: (state, action) => {
+    const id = action.payload
+    const list = state.list.filter(post => post.id !== id )
+    const filteredList = filterList(list, state.filters) 
+    return {
+      ...state,
+      list,
+      filteredList
+    }
+  },
+  [actions.addFilter]: (state, action) => {
+    const { key, value } = action.payload
+    const filters = {
+      ...state.filters,
+      [key]: value
+    }
+    const filteredList = filterList(state.list, filters) 
+    return {
+      ...state,
+      filters,
+      filteredList
+    }
+  }
 }, initialState)
 

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch"
   },
   "keywords": [],
   "author": "",
@@ -29,6 +30,7 @@
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "^4.0.0",
-    "redux-actions": "^2.3.2"
+    "redux-actions": "^2.3.2",
+    "uuid": "^3.2.1"
   }
 }