HT-4 Anton Sitnikov

src/ac/index.js

@@ -2,7 +2,8 @@ import {
   INCREMENT,
   DELETE_ARTICLE,
   CHANGE_DATE_RANGE,
-  CHANGE_SELECTION
+  CHANGE_SELECTION,
+  ADD_COMMENT
 } from '../constants'
 
 export function increment() {
@@ -18,6 +19,13 @@ export function deleteArticle(id) {
   }
 }
 
+export function addComment(comment) {
+  return {
+    type: ADD_COMMENT,
+    payload: comment
+  }
+}
+
 export function changeDateRange(dateRange) {
   return {
     type: CHANGE_DATE_RANGE,

src/components/article-list.js

@@ -22,11 +22,12 @@ export class ArticleList extends Component {
 
   get items() {
     const { articles, openItemId, toggleOpenItem } = this.props
-    return articles.map((article) => (
-      <li key={article.id} className="test--article-list__item">
+    console.log(Object.keys(articles))
+    return articles.map((articleId) => (
+      <li key={articleId} className="test--article-list__item">
         <Article
-          article={article}
-          isOpen={openItemId === article.id}
+          id={articleId}
+          isOpen={openItemId === articleId}
           toggleOpen={toggleOpenItem}
         />
       </li>

src/components/article/index.js

@@ -8,6 +8,7 @@ import './style.css'
 
 class Article extends PureComponent {
   static propTypes = {
+    id: PropTypes.string,
     article: PropTypes.shape({
       title: PropTypes.string.isRequired,
       text: PropTypes.string
@@ -63,13 +64,17 @@ class Article extends PureComponent {
     return (
       <section className="test--article__body">
         {article.text}
-        <CommentList comments={article.comments} />
+        <CommentList articleId={article.id} />
       </section>
     )
   }
 }
 
+const createMapStateToProps = (state, ownProps) => {
+  return { article: state.articles[ownProps.id] }
+}
+
 export default connect(
-  null,
+  createMapStateToProps,
   { deleteArticle }
 )(Article)

src/components/comment-form.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class CommentForm extends Component {
+  static propTypes = {
+    addComment: PropTypes.func
+  }
+
+  state = { text: '', user: 'Jane Dow' }
+
+  handleSubmit = (e) => {
+    e.preventDefault()
+    const { addComment } = this.props
+    addComment({ text: this.state.text, user: this.state.user })
+  }
+
+  handleTextChange = (e) => {
+    this.setState({ text: e.target.value })
+  }
+
+  handleUserChange = (e) => {
+    this.setState({ user: e.target.value })
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input
+          type="text"
+          value={this.state.user}
+          onChange={this.handleUserChange}
+        />
+        <textarea value={this.state.text} onChange={this.handleTextChange} />
+        <input type="submit" value="Submit" />
+      </form>
+    )
+  }
+}
+
+export default CommentForm

src/components/comment-list/index.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import CSSTransition from 'react-addons-css-transition-group'
+import { connect } from 'react-redux'
+import { addComment } from '../../ac'
 import Comment from '../comment'
+import CommentForm from '../comment-form'
 import toggleOpen from '../../decorators/toggleOpen'
 import './style.css'
 
@@ -18,6 +21,10 @@ class CommentList extends Component {
     comments: []
   }
 */
+  handleAddComment = (comment) => {
+    const { addComment, articleId } = this.props
+    addComment({ articleId, ...comment })
+  }
 
   render() {
     const { isOpen, toggleOpen } = this.props
@@ -49,6 +56,7 @@ class CommentList extends Component {
         ) : (
           <h3 className="test--comment-list__empty">No comments yet</h3>
         )}
+        <CommentForm addComment={this.handleAddComment} />
       </div>
     )
   }
@@ -66,4 +74,9 @@ class CommentList extends Component {
   }
 }
 
-export default toggleOpen(CommentList)
+export default connect(
+  (state, ownProps) => ({
+    comments: state.articles[ownProps.articleId].comments
+  }),
+  { addComment }
+)(toggleOpen(CommentList))

src/components/filters/index.js

@@ -8,7 +8,7 @@ class Filters extends Component {
   render() {
     return (
       <div>
-        <SelectFilter articles={this.props.articles} />
+        <SelectFilter />
         <DateRange />
       </div>
     )

src/components/filters/select.js

@@ -6,17 +6,19 @@ import { changeSelection } from '../../ac'
 
 class SelectFilter extends Component {
   static propTypes = {
-    articles: PropTypes.array.isRequired
+    articles: PropTypes.object.isRequired
   }
 
   handleChange = (selected) => {
     this.props.changeSelection(selected)
   }
 
   get options() {
-    return this.props.articles.map((article) => ({
-      label: article.title,
-      value: article.id
+    const { articles } = this.props
+
+    return Object.keys(articles).map((articleId) => ({
+      label: articles[articleId].title,
+      value: articleId
     }))
   }
 

src/constants/index.js

@@ -2,5 +2,7 @@ export const INCREMENT = 'INCREMENT'
 
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
 
+export const ADD_COMMENT = 'ADD_COMMENT'
+
 export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'

src/middlewares/generateId.js

@@ -0,0 +1,12 @@
+import { ADD_COMMENT } from '../constants'
+
+export default (store) => (next) => (action) => {
+  if (action.type === ADD_COMMENT) action.payload.id = '' + randomizer(1, 10000)
+  console.log('---', 'addRandomId: ', action)
+  next(action)
+}
+
+function randomizer(min, max) {
+  let rand = min + Math.random() * (max + 1 - min)
+  return Math.floor(rand)
+}

src/reducer/articles.js

@@ -1,12 +1,41 @@
-import { normalizedArticles as defaultArticles } from '../fixtures'
-import { DELETE_ARTICLE } from '../constants'
+import { normalizedArticles } from '../fixtures'
+import { DELETE_ARTICLE, ADD_COMMENT } from '../constants'
+
+const defaultArticles = normalizedArticles.reduce(
+  (acc, article) => ({
+    ...acc,
+    [article.id]: article
+  }),
+  {}
+)
 
 export default (articlesState = defaultArticles, action) => {
   const { type, payload } = action
-
+  console.log('article', type)
   switch (type) {
+    case ADD_COMMENT:
+      return Object.keys(articlesState).reduce((acc, articleId) => {
+        if (articleId === payload.articleId) {
+          const comments = articlesState[articleId].comments || []
+          acc[articleId] = {
+            ...articlesState[articleId],
+            comments: [...comments, payload.id]
+          }
+        } else {
+          acc[articleId] = articlesState[articleId]
+        }
+
+        return acc
+      }, {})
+
     case DELETE_ARTICLE:
-      return articlesState.filter((article) => article.id !== payload.id)
+      return Object.keys(articlesState).reduce((acc, articleId) => {
+        if (articleId !== payload.id) {
+          acc[articleId] = articlesState[articleId]
+        }
+
+        return acc
+      }, {})
 
     default:
       return articlesState

src/reducer/comments.js

@@ -1,4 +1,4 @@
-import {} from '../constants'
+import { ADD_COMMENT } from '../constants'
 import { normalizedComments } from '../fixtures'
 
 const defaultComments = normalizedComments.reduce(
@@ -11,8 +11,19 @@ const defaultComments = normalizedComments.reduce(
 
 export default (state = defaultComments, action) => {
   const { type } = action
-
   switch (type) {
+    case ADD_COMMENT:
+      console.log('addComment', action)
+      console.log('commentsList', state)
+      const { payload } = action
+      const newComment = {}
+      newComment[payload.id] = {
+        id: payload.id,
+        text: payload.text,
+        user: payload.user
+      }
+      return { ...state, ...newComment }
+
     default:
       return state
   }

src/selectors/index.js

@@ -4,6 +4,7 @@ export const selectionSelector = (state) => state.filters.selected
 export const dateRangeSelector = (state) => state.filters.dateRange
 export const articleListSelector = (state) => state.articles
 export const commentsSelector = (state) => state.comments
+export const articlesSelector = (state) => state.articles
 export const idSelector = (_, props) => props.id
 
 export const filtratedArticlesSelector = createSelector(
@@ -14,11 +15,11 @@ export const filtratedArticlesSelector = createSelector(
     console.log('---', 'article list selector')
     const { from, to } = dateRange
 
-    return articles.filter((article) => {
-      const published = Date.parse(article.date)
+    return Object.keys(articles).filter((articleId) => {
+      const published = Date.parse(articles[articleId].date)
       return (
         (!selected.length ||
-          selected.find((selected) => selected.value === article.id)) &&
+          selected.find((selected) => selected.value === articleId)) &&
         (!from || !to || (published > from && published < to))
       )
     })

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)