From b69c90d0ce8596999f6c825a7fdc236a230b0f2c Mon Sep 17 00:00:00 2001 From: Jose Buitron Date: Wed, 16 May 2018 22:37:24 -0500 Subject: [PATCH] Remove posts, filters --- app/posts/NewPost.js | 80 +++++++++++++++++++++++++++--------- app/posts/Posts.js | 41 ++++++++++++++++-- app/posts/posts.actions.js | 4 +- app/posts/posts.constants.js | 8 ++++ app/posts/posts.reducer.js | 54 +++++++++++++++++++++--- package-lock.json | 5 +++ package.json | 6 ++- 7 files changed, 167 insertions(+), 31 deletions(-) create mode 100644 app/posts/posts.constants.js diff --git a/app/posts/NewPost.js b/app/posts/NewPost.js index 1d303a6..ea19759 100644 --- a/app/posts/NewPost.js +++ b/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 => ( @@ -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 {
- + @@ -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) diff --git a/app/posts/Posts.js b/app/posts/Posts.js index facb9da..e94717e 100644 --- a/app/posts/Posts.js +++ b/app/posts/Posts.js @@ -8,27 +8,57 @@ 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 ( {props.description} - + ) } +const Filters = props => { + const onVisibilityChange = option => () => { + props.addFilter({ + key: 'visibility', + value: option.value + }) + } + const visibilityFilters = constants.VISIBILITY.map(option => ( + + )) + return ( +
+ {visibilityFilters} +
+ ) +} + class Posts extends React.Component { render() { const { props } = this return (
- {props.list.map(post => ( - + + {props.filteredList.map(post => ( + ))}
) @@ -36,5 +66,8 @@ class Posts extends React.Component { } 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) diff --git a/app/posts/posts.actions.js b/app/posts/posts.actions.js index 1f0ce3b..de6c418 100644 --- a/app/posts/posts.actions.js +++ b/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') diff --git a/app/posts/posts.constants.js b/app/posts/posts.constants.js new file mode 100644 index 0000000..bf6faee --- /dev/null +++ b/app/posts/posts.constants.js @@ -0,0 +1,8 @@ + +export const VISIBILITY = [{ + value: 'friends', + label: 'Friends' +}, { + value: 'public', + label: 'Public' +}] diff --git a/app/posts/posts.reducer.js b/app/posts/posts.reducer.js index 9adc1ed..f2b89ca 100644 --- a/app/posts/posts.reducer.js +++ b/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) diff --git a/package-lock.json b/package-lock.json index 39a645e..ae07d74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7814,6 +7814,11 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, + "uuid": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz", + "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==" + }, "v8-compile-cache": { "version": "1.1.2", "resolved": "https://artifacts.riotgames.com:443/artifactory/api/npm/npm/v8-compile-cache/-/v8-compile-cache-1.1.2.tgz", diff --git a/package.json b/package.json index 38e7c51..65e97c0 100644 --- a/package.json +++ b/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" } }