From cba7b490e5cc29ed3438a8946e52e4da5c64e7f1 Mon Sep 17 00:00:00 2001 From: boombarashk Date: Fri, 9 Mar 2018 18:08:27 +0300 Subject: [PATCH 1/5] HW-4 1:4 --- src/AC/index.js | 9 ++++++- src/components/article/index.js | 3 +++ src/components/comment-form.js | 48 +++++++++++++++++++++++++++++++++ src/constants/index.js | 4 ++- src/reducer/articles.js | 7 +++++ 5 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/components/comment-form.js diff --git a/src/AC/index.js b/src/AC/index.js index dda2dd6..6d323a2 100644 --- a/src/AC/index.js +++ b/src/AC/index.js @@ -1,4 +1,4 @@ -import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION} from '../constants' +import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT} from '../constants' export function increment() { return { @@ -26,3 +26,10 @@ export function changeSelection(selected) { payload: { selected } } } + +export function addComment(data) { + return { + type: ADD_COMMENT, + payload: {data} + } +} diff --git a/src/components/article/index.js b/src/components/article/index.js index 96261d8..50a2ec9 100644 --- a/src/components/article/index.js +++ b/src/components/article/index.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import CSSTransition from 'react-addons-css-transition-group' import { connect } from 'react-redux' import CommentList from '../comment-list' +import CommentForm from '../comment-form' import { deleteArticle } from '../../AC' import './style.css' @@ -34,6 +35,8 @@ class Article extends PureComponent { delete me + /* button comment me*/ + + + +
+ + +
+ + + ) + } + + handleInput = ev =>{ + this.setState({ + authorname: ev.target.value + }) + } + + handleTextChange = ev =>{ + this.setState({ + commenttext: ev.target.value + }) + } + + handleAddcommentClick = () => { + const {rel} = this.props + console.log(rel, "\n", this.state) + } +} + +export default CommentForm \ No newline at end of file diff --git a/src/constants/index.js b/src/constants/index.js index a2f0a80..dfd51bf 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -3,4 +3,6 @@ export const INCREMENT = 'INCREMENT' export const DELETE_ARTICLE = 'DELETE_ARTICLE' export const CHANGE_SELECTION = 'CHANGE_SELECTION' -export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE' \ No newline at end of file +export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE' + +export const ADD_COMMENT = 'ADD_COMMENT' \ No newline at end of file diff --git a/src/reducer/articles.js b/src/reducer/articles.js index 1c2e629..909d4cd 100644 --- a/src/reducer/articles.js +++ b/src/reducer/articles.js @@ -1,7 +1,14 @@ import { normalizedArticles as defaultArticles } from '../fixtures' import { DELETE_ARTICLE } from '../constants' +const commentsObj = defaultArticles.reduce((wii, article)=>({ + ...wii, + [article.id]: article +}), {}) + export default (articlesState = defaultArticles, action) => { + console.log("! ", commentsObj) + const { type, payload } = action switch (type) { From 753df636187d5b746ca3cc1c2927c7d66fb77580 Mon Sep 17 00:00:00 2001 From: boombarashk Date: Sat, 10 Mar 2018 12:06:33 +0300 Subject: [PATCH 2/5] HW-4 3:14 --- src/middlewares/randomid.js | 16 ++++++++++++++++ src/store/index.js | 5 ++++- 2 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 src/middlewares/randomid.js diff --git a/src/middlewares/randomid.js b/src/middlewares/randomid.js new file mode 100644 index 0000000..46bfdb1 --- /dev/null +++ b/src/middlewares/randomid.js @@ -0,0 +1,16 @@ +/** + * Shuffles array in place. ES6 version + * @param {Array} a items An array containing the items. + */ +function shuffle(a) { + for (let i = a.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [a[i], a[j]] = [a[j], a[i]]; + } + return a; +} + +export default store => next => action => { + console.log('RANDOMIZER ' + shuffle((new Date).toLocaleString('en-US').split('').filter((symbol)=>{return symbol != ' '})).join('')) + next(action) +} \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index e3ddcc8..400bc89 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,10 +1,13 @@ import { createStore, applyMiddleware } from 'redux' import reducer from '../reducer' import logger from '../middlewares/logger' +import randomstringid from '../middlewares/randomid' const enhancer = applyMiddleware(logger) -const store = createStore(reducer, enhancer) +const saidtodo = applyMiddleware(randomstringid) + +const store = createStore(reducer, enhancer, saidtodo) //dev only, no need in prod window.store = store From 8f6e70f55dba51aafd0d98946b311f72f037ed7c Mon Sep 17 00:00:00 2001 From: boombarashk Date: Sat, 10 Mar 2018 15:14:38 +0300 Subject: [PATCH 3/5] HW-4 v3 --- src/components/comment-form.js | 30 ++++++++++++++++++------------ src/middlewares/randomid.js | 8 +++++++- src/reducer/articles.js | 15 +++++++++------ src/reducer/comments.js | 9 ++++++--- 4 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/components/comment-form.js b/src/components/comment-form.js index 252e592..ba2c635 100644 --- a/src/components/comment-form.js +++ b/src/components/comment-form.js @@ -1,4 +1,6 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' +import { addComment } from '../AC' class CommentForm extends Component { state = { @@ -6,7 +8,7 @@ class CommentForm extends Component { commenttext: "" } - render (){ + render() { const {rel} = this.props return ( @@ -15,34 +17,38 @@ class CommentForm extends Component {
-
- +
+ ) } - - handleInput = ev =>{ + + handleInput = ev => { this.setState({ authorname: ev.target.value }) } - handleTextChange = ev =>{ + handleTextChange = ev => { this.setState({ commenttext: ev.target.value }) } - + handleAddcommentClick = () => { - const {rel} = this.props - console.log(rel, "\n", this.state) + const {addComment, rel} = this.props + if (this.state.authorname.length && this.state.commenttext.length ) { + addComment({articleid: rel, user: this.state.authorname, text: this.state.commenttext}) + this.setState({authorname: '', commenttext:''}) + } } } -export default CommentForm \ No newline at end of file +export default connect(null, { addComment })(CommentForm) \ No newline at end of file diff --git a/src/middlewares/randomid.js b/src/middlewares/randomid.js index 46bfdb1..0fb0911 100644 --- a/src/middlewares/randomid.js +++ b/src/middlewares/randomid.js @@ -1,3 +1,4 @@ +import { ADD_COMMENT } from '../constants' /** * Shuffles array in place. ES6 version * @param {Array} a items An array containing the items. @@ -11,6 +12,11 @@ function shuffle(a) { } export default store => next => action => { - console.log('RANDOMIZER ' + shuffle((new Date).toLocaleString('en-US').split('').filter((symbol)=>{return symbol != ' '})).join('')) + if (action.type === ADD_COMMENT) { + const randomId = shuffle((new Date()).toLocaleString('en-US').split('').filter((symbol)=> { + return symbol !== ' ' + })).join('') + action.payload.data['id'] = randomId + } next(action) } \ No newline at end of file diff --git a/src/reducer/articles.js b/src/reducer/articles.js index 909d4cd..41b15a1 100644 --- a/src/reducer/articles.js +++ b/src/reducer/articles.js @@ -1,20 +1,23 @@ -import { normalizedArticles as defaultArticles } from '../fixtures' -import { DELETE_ARTICLE } from '../constants' +import { normalizedArticles } from '../fixtures' +import { DELETE_ARTICLE, ADD_COMMENT } from '../constants' -const commentsObj = defaultArticles.reduce((wii, article)=>({ +const defaultArticles = normalizedArticles.reduce((wii, article)=>({ ...wii, [article.id]: article }), {}) -export default (articlesState = defaultArticles, action) => { - console.log("! ", commentsObj) +export const listArticles = normalizedArticles + +export default (articlesState = normalizedArticles, action) => { + console.log("! ", defaultArticles) const { type, payload } = action switch (type) { case DELETE_ARTICLE: return articlesState.filter(article => article.id !== payload.id) - + case ADD_COMMENT: + //articlesState default: return articlesState } diff --git a/src/reducer/comments.js b/src/reducer/comments.js index 0bd398a..0cf409a 100644 --- a/src/reducer/comments.js +++ b/src/reducer/comments.js @@ -1,4 +1,4 @@ -import {} from '../constants' +import { ADD_COMMENT } from '../constants' import { normalizedComments } from '../fixtures' const defaultComments = normalizedComments.reduce((acc, comment) => ({ @@ -8,10 +8,13 @@ const defaultComments = normalizedComments.reduce((acc, comment) => ({ , {}) export default (commentsState = defaultComments, action) => { - const {type} = action + const {type, payload} = action switch (type) { - + case ADD_COMMENT: + const {id, user, text} = payload.data + commentsState[id] = {id: id, user: user, text: text} + //break default: return commentsState } From f5ec63fc0c101dc37727f0deb7803c27b437b44f Mon Sep 17 00:00:00 2001 From: boombarashk Date: Sat, 10 Mar 2018 17:50:56 +0300 Subject: [PATCH 4/5] HW-4 prefinal --- src/components/article-list/index.js | 2 +- src/components/article/index.js | 2 +- src/components/filters/select.js | 4 ++-- src/reducer/articles.js | 15 +++++++++------ src/selectors/index.js | 4 ++-- 5 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/article-list/index.js b/src/components/article-list/index.js index f2cebc8..8895d72 100644 --- a/src/components/article-list/index.js +++ b/src/components/article-list/index.js @@ -21,7 +21,7 @@ export class ArticleList extends Component { render() { const { articles, openItemId, toggleItem } = this.props console.log('---', 'rendering ArticlList') - const articleElements = articles.map(article => + const articleElements = Object.values(articles).map(article =>
  • - /* button comment me*/ + this.props.changeSelection(selected.map(option => option.value)) render() { const { articles, selected } = this.props - const options = articles.map(article => ({ + const options = Object.values(articles).map(article => ({ label: article.title, value: article.id })) diff --git a/src/reducer/articles.js b/src/reducer/articles.js index 41b15a1..743f8eb 100644 --- a/src/reducer/articles.js +++ b/src/reducer/articles.js @@ -6,18 +6,21 @@ const defaultArticles = normalizedArticles.reduce((wii, article)=>({ [article.id]: article }), {}) -export const listArticles = normalizedArticles - -export default (articlesState = normalizedArticles, action) => { - console.log("! ", defaultArticles) +export default (articlesState = defaultArticles, action) => { const { type, payload } = action + let articles = Object.assign({}, articlesState); switch (type) { case DELETE_ARTICLE: - return articlesState.filter(article => article.id !== payload.id) + delete articles[payload.id] + return articles + case ADD_COMMENT: - //articlesState + let comments = articles[payload.data.articleid].comments + typeof comments !== 'undefined' ? comments.push(payload.data.id) : comments = new Array(payload.data.id) + return articles + default: return articlesState } diff --git a/src/selectors/index.js b/src/selectors/index.js index d503ae7..1b19d61 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -8,8 +8,8 @@ const idSelector = (_, props) => props.id export const filtratedArticles = createSelector(articleListSelector, filtersSelector, (articles, filters) => { const {selected, dateRange: {from, to}} = filters console.log('---', 'recomputing filtration') - - return articles.filter(article => { + + return Object.values(articles).filter(article => { const published = Date.parse(article.date) return (!selected.length || selected.includes(article.id)) && (!from || !to || (published > from && published < to)) From 08ffcb89389b1c0db524c985c8cf98f4305e2265 Mon Sep 17 00:00:00 2001 From: boombarashk Date: Sat, 10 Mar 2018 23:41:34 +0300 Subject: [PATCH 5/5] HW-4 --- src/components/comment-form.js | 28 +++++++++++++++++----------- src/reducer/articles.js | 8 ++++---- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/components/comment-form.js b/src/components/comment-form.js index ba2c635..dbe9567 100644 --- a/src/components/comment-form.js +++ b/src/components/comment-form.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import { addComment } from '../AC' +import toggleOpen from '../decorators/toggleOpen' class CommentForm extends Component { state = { @@ -10,23 +11,27 @@ class CommentForm extends Component { render() { - const {rel} = this.props + const {rel, isOpen, toggleOpen} = this.props + return ( -
    +
    + + - - name: +
    + />
    - -
    - - + + +
    ) } @@ -43,12 +48,13 @@ class CommentForm extends Component { } handleAddcommentClick = () => { - const {addComment, rel} = this.props + const {addComment, rel, toggleOpen} = this.props if (this.state.authorname.length && this.state.commenttext.length ) { + toggleOpen() addComment({articleid: rel, user: this.state.authorname, text: this.state.commenttext}) this.setState({authorname: '', commenttext:''}) } } } -export default connect(null, { addComment })(CommentForm) \ No newline at end of file +export default connect(null, { addComment })(toggleOpen(CommentForm)) \ No newline at end of file diff --git a/src/reducer/articles.js b/src/reducer/articles.js index 743f8eb..f02661c 100644 --- a/src/reducer/articles.js +++ b/src/reducer/articles.js @@ -10,16 +10,16 @@ export default (articlesState = defaultArticles, action) => { const { type, payload } = action - let articles = Object.assign({}, articlesState); switch (type) { case DELETE_ARTICLE: + let articles = Object.assign({}, articlesState); delete articles[payload.id] return articles case ADD_COMMENT: - let comments = articles[payload.data.articleid].comments - typeof comments !== 'undefined' ? comments.push(payload.data.id) : comments = new Array(payload.data.id) - return articles + let comments = articlesState[payload.data.articleid].comments + typeof comments !== 'undefined' ? comments.push(payload.data.id) : articlesState[payload.data.articleid].comments = new Array(payload.data.id) + //break default: return articlesState