homework4

src/AC/index.js

@@ -1,4 +1,5 @@
 import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION} from '../constants'
+import {ADD_COMMENT, CHANGE_USERNAME} from "../constants/index";
 
 export function increment() {
     return {
@@ -26,3 +27,17 @@ export function changeSelection(selected) {
         payload: { selected }
     }
 }
+
+export function addComment(articleId, user, text) {
+    return {
+        type: ADD_COMMENT,
+        payload: { articleId, user, text }
+    }
+}
+
+export function changeUsername(username) {
+    return {
+        type: CHANGE_USERNAME,
+        payload: {username}
+    }
+}

src/components/article-list/index.js

@@ -7,7 +7,7 @@ import { filtratedArticles } from '../../selectors'
 
 export class ArticleList extends Component {
     static propTypes = {
-        articles: PropTypes.array.isRequired,
+        articlesId: PropTypes.array.isRequired,
 
         //from accordion decorator
         openItemId: PropTypes.string,
@@ -19,14 +19,14 @@ export class ArticleList extends Component {
     }
 
     render() {
-        const { articles, openItemId, toggleItem } = this.props
+        const { articlesId, openItemId, toggleItem } = this.props
         console.log('---', 'rendering ArticlList')
-        const articleElements = articles.map(article =>
-            <li key = {article.id} className = "test__article-list--item">
+        const articleElements = articlesId.map(id =>
+            <li key = {id} className = "test__article-list--item">
                 <Article
-                    article = {article}
+                    id = {id}
                     onButtonClick = {toggleItem}
-                    isOpen = {openItemId === article.id}
+                    isOpen = {openItemId === id}
                 />
             </li>
         )
@@ -41,6 +41,6 @@ export class ArticleList extends Component {
 export default connect(state => {
     console.log('---', 'article list connect')
     return {
-        articles: filtratedArticles(state)
+        articlesId: filtratedArticles(state)
     }
 })(accordion(ArticleList))

src/components/article/index.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import CommentList from '../comment-list'
 import { deleteArticle } from '../../AC'
 import './style.css'
+import {createArticlesSelector} from "../../selectors/index";
 
 class Article extends PureComponent {
     state = {
@@ -58,7 +59,7 @@ function getBody(article) {
     return (
         <section className = "test__article--body">
             {article.text}
-            <CommentList comments={article.comments}/>
+            <CommentList articleId={article.id} comments={article.comments}/>
         </section>
     )
 }
@@ -73,4 +74,12 @@ Article.propTypes = {
     onButtonClick: PropTypes.func
 }
 
-export default connect(null, { deleteArticle })(Article)
+const createMapStateToProps = () => {
+    const articleSelector = createArticlesSelector()
+
+    return (state, ownProps) => ({
+        article: articleSelector(state, ownProps)
+    })
+}
+
+export default connect(createMapStateToProps, { deleteArticle })(Article)

src/components/comment-input/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import {addComment} from "../../AC/index";
+import {connect} from "react-redux";
+
+class CommentInput extends React.Component{
+    state={
+        newComment:""
+    }
+
+    render(){
+        return (
+            <div>
+                <h3>Add comment</h3>
+                <span>text:
+                <input value={this.state.newComment} onChange={(e)=>{this.setState({newComment:e.target.value})}}/>
+                </span>
+                <button onClick={()=>{
+                    this.props.addComment(this.props.articleId,this.props.username,this.state.newComment);
+                    this.setState({newComment:""})}
+                }>add comment</button>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {username:state.user.username}
+}
+
+export default connect(mapStateToProps,{addComment})(CommentInput);

src/components/comment-list/index.js

@@ -4,6 +4,7 @@ import CSSTransition from 'react-addons-css-transition-group'
 import Comment from '../comment'
 import toggleOpen from '../../decorators/toggleOpen'
 import './style.css'
+import CommentInput from "../comment-input/index";
 
 class CommentList extends Component {
     static defaultProps = {
@@ -45,6 +46,7 @@ class CommentList extends Component {
                         ? this.getComments()
                         : <h3 className="test__comment-list--empty">No comments yet</h3>
                 }
+                <CommentInput articleId={this.props.articleId}/>
             </div>
         )
     }
@@ -55,7 +57,7 @@ class CommentList extends Component {
                 {
                     this.props.comments.map(id =>
                         <li key = {id} className = "test__comment-list--item">
-                            <Comment id = {id}/>
+                            <Comment id = {id} />
                         </li>)
                 }
             </ul>

src/components/filters/select.js

@@ -31,5 +31,5 @@ class SelectFilter extends Component {
 
 export default connect(state => ({
     selected: state.filters.selected,
-    articles: state.articles
+    articles: Object.values(state.articles)
 }), { changeSelection })(SelectFilter)

src/components/user-form.js

@@ -1,18 +1,13 @@
 import React, { Component } from 'react'
+import {changeUsername} from "../AC/index";
+import {connect} from "react-redux";
 
 class UserForm extends Component {
-    static propTypes = {
-
-    };
-
-    state = {
-        username: ''
-    }
 
     render() {
         return (
             <div>
-                username: <input value = {this.state.username} onChange = {this.handleChange}/>
+                username: <input value = {this.props.username} onChange = {this.handleChange}/>
             </div>
         )
     }
@@ -22,10 +17,12 @@ class UserForm extends Component {
             return
         }
 
-        this.setState({
-            username: ev.target.value
-        })
+        this.props.changeUsername(ev.target.value)
     }
 }
 
-export default UserForm
+const mapStateToProps = state => {
+    return {username:state.user.username}
+}
+
+export default connect(mapStateToProps,{changeUsername})(UserForm)

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'
+export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
+export const ADD_COMMENT = 'ADD_COMMENT'
+export const CHANGE_USERNAME = 'CHANGE_USERNAME'

src/middlewares/generateId.js

@@ -0,0 +1,8 @@
+import {ADD_COMMENT} from "../constants/index";
+
+export default store => next => action => {
+    if(action.type === ADD_COMMENT) {
+        action.payload.newCommentId = Math.random().toString(36).slice(2);
+    }
+    next(action)
+}

src/reducer/articles.js

@@ -1,13 +1,27 @@
-import { normalizedArticles as defaultArticles } from '../fixtures'
+import { normalizedArticles } from '../fixtures'
 import { DELETE_ARTICLE } from '../constants'
+import {ADD_COMMENT} from "../constants/index";
 
+const defaultArticles = normalizedArticles.reduce((acc,article)=>({
+    ...acc,
+    [article.id]:article
+}),{})
 export default (articlesState = defaultArticles, action) => {
     const { type, payload } = action
 
     switch (type) {
         case DELETE_ARTICLE:
             return articlesState.filter(article => article.id !== payload.id)
+        case ADD_COMMENT:{
 
+            const {articleId,newCommentId} = action.payload;
+            const article = {...articlesState[articleId]}
+            article.comments.push(newCommentId)
+            return {
+                ...articlesState,
+                [articleId]:article
+            }
+        }
         default:
             return articlesState
     }

src/reducer/comments.js

@@ -1,5 +1,6 @@
 import {} from '../constants'
 import { normalizedComments } from '../fixtures'
+import {ADD_COMMENT} from "../constants/index";
 
 const defaultComments = normalizedComments.reduce((acc, comment) => ({
     ...acc,
@@ -11,7 +12,14 @@ export default (commentsState = defaultComments, action) => {
     const {type} = action
 
     switch (type) {
-
+        case ADD_COMMENT:{
+            console.log(action.payload)
+            const {newCommentId,user,text} = action.payload;
+            return {
+                ...commentsState,
+                [newCommentId]:{id:newCommentId,user,text}
+            }
+        }
         default:
             return commentsState
     }

src/reducer/index.js

@@ -3,8 +3,9 @@ import counterReducer from './counter'
 import articles from './articles'
 import comments from './comments'
 import filters from './filters'
+import user from "./user";
 
 export default combineReducers({
     counter: counterReducer,
-    articles, comments, filters
+    articles, comments, filters,user
 })

src/reducer/user.js

@@ -0,0 +1,17 @@
+import { CHANGE_USERNAME} from "../constants/index";
+
+const initState = {
+    username:""
+}
+
+export default (state = initState, action) => {
+    const { type, payload } = action
+
+    switch (type) {
+        case CHANGE_USERNAME:
+            return {username:payload.username}
+
+        default:
+            return state
+    }
+}

src/selectors/index.js

@@ -9,11 +9,13 @@ export const filtratedArticles = createSelector(articleListSelector, filtersSele
     const {selected, dateRange: {from, to}} = filters
     console.log('---', 'recomputing filtration')
 
-    return articles.filter(article => {
+    return Object.keys(articles).filter(id => {
+        const article = articles[id];
         const published = Date.parse(article.date)
         return (!selected.length || selected.includes(article.id)) &&
             (!from || !to || (published > from && published < to))
     })
 })
 
-export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments[id])
+export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments[id])
+export const createArticlesSelector = () => createSelector(articleListSelector, idSelector, (articles, id) => articles[id])

src/store/index.js

@@ -1,8 +1,9 @@
 import { createStore, applyMiddleware } from 'redux'
 import reducer from '../reducer'
 import logger from '../middlewares/logger'
+import generateId from "../middlewares/generateId";
 
-const enhancer = applyMiddleware(logger)
+const enhancer = applyMiddleware(logger,generateId)
 
 const store = createStore(reducer, enhancer)