From 9fc4e339f94fffd924c24d00c6403f6d63eaf4c8 Mon Sep 17 00:00:00 2001
From: Olga Linkevich <volha.linkevich@gmail.com>
Date: Sun, 15 Jul 2018 18:04:27 +0300
Subject: [PATCH 1/5] HT4.1 Add comment form with validation

---
 src/ac/index.js                      | 26 ++++++++++-
 src/app.js                           |  4 +-
 src/components/comment-list/index.js |  2 +
 src/components/forms/comment-form.js | 65 ++++++++++++++++++++++++++++
 src/components/forms/user-form.js    | 51 ++++++++++++++++++++++
 src/components/user-error.js         | 22 ++++++++++
 src/components/user-form.js          | 29 -------------
 src/constants/index.js               |  6 +++
 src/reducer/error.js                 | 12 +++++
 src/reducer/index.js                 |  6 ++-
 src/reducer/user.js                  | 15 +++++++
 src/selectors/index.js               |  3 ++
 12 files changed, 209 insertions(+), 32 deletions(-)
 create mode 100644 src/components/forms/comment-form.js
 create mode 100644 src/components/forms/user-form.js
 create mode 100644 src/components/user-error.js
 delete mode 100644 src/components/user-form.js
 create mode 100644 src/reducer/error.js
 create mode 100644 src/reducer/user.js

diff --git a/src/ac/index.js b/src/ac/index.js
index 6acd6da..45887a1 100644
--- a/src/ac/index.js
+++ b/src/ac/index.js
@@ -2,7 +2,10 @@ import {
   INCREMENT,
   DELETE_ARTICLE,
   CHANGE_DATE_RANGE,
-  CHANGE_SELECTION
+  CHANGE_SELECTION,
+  ADD_COMMENT,
+  LOGIN,
+  USER_ERROR
 } from '../constants'
 
 export function increment() {
@@ -31,3 +34,24 @@ export function changeSelection(selected) {
     payload: { selected }
   }
 }
+
+export function addComment(comment) {
+  return {
+    type: ADD_COMMENT,
+    payload: comment
+  }
+}
+
+export function login(userName) {
+  return {
+    type: LOGIN,
+    payload: userName
+  }
+}
+
+export function showError(message) {
+  return {
+    type: USER_ERROR,
+    payload: message
+  }
+}
diff --git a/src/app.js b/src/app.js
index 36053eb..3b4ade9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import ArticleList from './components/article-list'
-import UserForm from './components/user-form'
+import UserForm from './components/forms/user-form'
+import UserError from './components/user-error'
 import Filters from './components/filters'
 import Counter from './components/counter'
 
@@ -11,6 +12,7 @@ class App extends Component {
     return (
       <div>
         <UserForm />
+        <UserError />
         <Counter />
         <Filters articles={[]} />
         <ArticleList />
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 7412972..fb30c58 100644
--- a/src/components/comment-list/index.js
+++ b/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 CommentForm from '../forms/comment-form'
 
 class CommentList extends Component {
   static propTypes = {
@@ -49,6 +50,7 @@ class CommentList extends Component {
         ) : (
           <h3 className="test--comment-list__empty">No comments yet</h3>
         )}
+        <CommentForm />
       </div>
     )
   }
diff --git a/src/components/forms/comment-form.js b/src/components/forms/comment-form.js
new file mode 100644
index 0000000..81c1eab
--- /dev/null
+++ b/src/components/forms/comment-form.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { userNameSelector } from '../../selectors'
+import { connect } from 'react-redux'
+import { addComment, showError } from '../../ac'
+
+class CommentForm extends Component {
+  state = {
+    text: ''
+  }
+
+  render() {
+    return (
+      <div>
+        <h4>{this.props.userName}</h4>
+        <textarea onChange={this.handleChange} cols="40" rows="5" />
+        <div>
+          <button onClick={this.addComment}>Add</button>
+        </div>
+      </div>
+    )
+  }
+
+  handleChange = (ev) => {
+    ev.preventDefault()
+    this.setState({
+      text: ev.target.value
+    })
+  }
+
+  addComment = () => {
+    const { userName, addComment, showError } = this.props
+    const { text } = this.state
+    const error = this.validate(userName, text)
+    if (error) {
+      showError(error)
+    } else {
+      addComment({
+        user: userName,
+        text: text
+      })
+      this.setState({
+        text: ''
+      })
+    }
+  }
+
+  validate = (userName, text) => {
+    if (!userName || userName.length === 0) {
+      return 'Please login.'
+    }
+
+    if (!text || text.length < 10) {
+      return 'Minimum comment text length is 10.'
+    }
+
+    return ''
+  }
+}
+
+export default connect(
+  (state) => ({
+    userName: userNameSelector(state)
+  }),
+  { addComment, showError }
+)(CommentForm)
diff --git a/src/components/forms/user-form.js b/src/components/forms/user-form.js
new file mode 100644
index 0000000..d66985c
--- /dev/null
+++ b/src/components/forms/user-form.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import { userNameSelector } from '../../selectors'
+import { login } from '../../ac'
+import { connect } from 'react-redux'
+
+class UserForm extends Component {
+  state = {
+    user: ''
+  }
+
+  render() {
+    return <div>Username: {this.getBody()}</div>
+  }
+
+  getBody() {
+    if (this.props.userName && this.props.userName.length > 0) {
+      return <span>{this.props.userName}</span>
+    } else {
+      return (
+        <div>
+          <input value={this.state.user} onChange={this.handleChange} />
+          <button onClick={this.userLoginClick}>Login</button>
+        </div>
+      )
+    }
+  }
+
+  handleChange = (ev) => {
+    ev.preventDefault()
+
+    if (ev.target.value.length > 10)
+      return this.setState({
+        user: ''
+      })
+
+    this.setState({
+      user: ev.target.value
+    })
+  }
+
+  userLoginClick = () => {
+    this.props.login(this.state.user)
+  }
+}
+
+export default connect(
+  (state) => ({
+    userName: userNameSelector(state)
+  }),
+  { login }
+)(UserForm)
diff --git a/src/components/user-error.js b/src/components/user-error.js
new file mode 100644
index 0000000..3f37f96
--- /dev/null
+++ b/src/components/user-error.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { userErrorSelector } from '../selectors'
+import { connect } from 'react-redux'
+
+class UserError extends Component {
+  render() {
+    return <div>{this.getBody()}</div>
+  }
+
+  getBody() {
+    console.log('--- user-error', this.props.userError)
+    if (this.props.userError && this.props.userError.length > 0) {
+      return <div style={{ color: 'red' }}>{this.props.userError}</div>
+    } else {
+      return <div />
+    }
+  }
+}
+
+export default connect((state) => ({
+  userError: userErrorSelector(state)
+}))(UserError)
diff --git a/src/components/user-form.js b/src/components/user-form.js
deleted file mode 100644
index b5514c4..0000000
--- a/src/components/user-form.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component } from 'react'
-
-class UserForm extends Component {
-  state = {
-    user: ''
-  }
-  render() {
-    return (
-      <div>
-        Username: <input value={this.state.user} onChange={this.handleChange} />
-      </div>
-    )
-  }
-
-  handleChange = (ev) => {
-    ev.preventDefault()
-
-    if (ev.target.value.length > 10)
-      return this.setState({
-        user: ''
-      })
-
-    this.setState({
-      user: ev.target.value
-    })
-  }
-}
-
-export default UserForm
diff --git a/src/constants/index.js b/src/constants/index.js
index e1fd7eb..fb962d4 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -4,3 +4,9 @@ export const DELETE_ARTICLE = 'DELETE_ARTICLE'
 
 export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
+
+export const ADD_COMMENT = 'ADD_COMMENT'
+
+export const LOGIN = 'LOGIN'
+
+export const USER_ERROR = 'USER_ERROR'
diff --git a/src/reducer/error.js b/src/reducer/error.js
new file mode 100644
index 0000000..f3ee054
--- /dev/null
+++ b/src/reducer/error.js
@@ -0,0 +1,12 @@
+import { USER_ERROR } from '../constants'
+
+export default ({ userError } = { userError: '' }, action) => {
+  const { type, payload } = action
+  switch (type) {
+    case USER_ERROR:
+      return { userError: payload }
+
+    default:
+      return { userError: '' }
+  }
+}
diff --git a/src/reducer/index.js b/src/reducer/index.js
index 7a565bc..8995630 100644
--- a/src/reducer/index.js
+++ b/src/reducer/index.js
@@ -3,10 +3,14 @@ import counterReducer from './counter'
 import articles from './articles'
 import comments from './comments'
 import filters from './filters'
+import user from './user'
+import error from './error'
 
 export default combineReducers({
   counter: counterReducer,
   articles,
   comments,
-  filters
+  filters,
+  user,
+  error
 })
diff --git a/src/reducer/user.js b/src/reducer/user.js
new file mode 100644
index 0000000..a4011cd
--- /dev/null
+++ b/src/reducer/user.js
@@ -0,0 +1,15 @@
+import { LOGIN } from '../constants'
+
+export default ({ userName } = { userName: '' }, action) => {
+  const { type, payload } = action
+  console.log('--- user reducer')
+  console.log(type)
+  console.log(payload)
+  switch (type) {
+    case LOGIN:
+      return { userName: payload }
+
+    default:
+      return { userName }
+  }
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index c59cd44..d3e380a 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -31,3 +31,6 @@ export const createCommentSelector = () =>
     console.log('---', 'comment selector', id)
     return comments[id]
   })
+
+export const userNameSelector = (state) => state.user.userName
+export const userErrorSelector = (state) => state.error.userError

From 2a83835c9a7de7c7be9490e08452474864bba308 Mon Sep 17 00:00:00 2001
From: Olga Linkevich <volha.linkevich@gmail.com>
Date: Sun, 15 Jul 2018 18:46:42 +0300
Subject: [PATCH 2/5] HT4.2 Generate comment id

---
 package.json                         |  3 ++-
 src/components/article/index.js      |  4 +++-
 src/components/comment-list/index.js |  3 ++-
 src/components/forms/comment-form.js | 17 +++++++++++---
 src/middlewares/add-comment.js       | 33 ++++++++++++++++++++++++++++
 src/store/index.js                   |  4 +++-
 6 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/middlewares/add-comment.js

diff --git a/package.json b/package.json
index 8afed27..720cb0e 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "react-scripts": "1.1.4",
     "react-select": "^2.0.0-beta.6",
     "redux": "^4.0.0",
-    "reselect": "^3.0.1"
+    "reselect": "^3.0.1",
+    "uuid": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/article/index.js b/src/components/article/index.js
index 90eca18..937d878 100644
--- a/src/components/article/index.js
+++ b/src/components/article/index.js
@@ -51,7 +51,9 @@ class Article extends PureComponent {
     return (
       <section className="test--article__body">
         {article.text}
-        {!this.state.error && <CommentList comments={article.comments} />}
+        {!this.state.error && (
+          <CommentList comments={article.comments} articleId={article.id} />
+        )}
       </section>
     )
   }
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index fb30c58..2f7b34b 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -8,6 +8,7 @@ import CommentForm from '../forms/comment-form'
 
 class CommentList extends Component {
   static propTypes = {
+    articleId: PropTypes.string.required,
     comments: PropTypes.array,
     //from toggleOpen decorator
     isOpen: PropTypes.bool,
@@ -50,7 +51,7 @@ class CommentList extends Component {
         ) : (
           <h3 className="test--comment-list__empty">No comments yet</h3>
         )}
-        <CommentForm />
+        <CommentForm articleId={this.props.articleId} />
       </div>
     )
   }
diff --git a/src/components/forms/comment-form.js b/src/components/forms/comment-form.js
index 81c1eab..6076c2b 100644
--- a/src/components/forms/comment-form.js
+++ b/src/components/forms/comment-form.js
@@ -2,8 +2,16 @@ import React, { Component } from 'react'
 import { userNameSelector } from '../../selectors'
 import { connect } from 'react-redux'
 import { addComment, showError } from '../../ac'
+import PropTypes from 'prop-types'
 
 class CommentForm extends Component {
+  static propTypes = {
+    articleId: PropTypes.string.required,
+    userName: PropTypes.string,
+    addComment: PropTypes.func,
+    showError: PropTypes.func
+  }
+
   state = {
     text: ''
   }
@@ -28,15 +36,18 @@ class CommentForm extends Component {
   }
 
   addComment = () => {
-    const { userName, addComment, showError } = this.props
+    const { articleId, userName, addComment, showError } = this.props
     const { text } = this.state
     const error = this.validate(userName, text)
     if (error) {
       showError(error)
     } else {
       addComment({
-        user: userName,
-        text: text
+        articleId: articleId,
+        comment: {
+          user: userName,
+          text: text
+        }
       })
       this.setState({
         text: ''
diff --git a/src/middlewares/add-comment.js b/src/middlewares/add-comment.js
new file mode 100644
index 0000000..da1ede7
--- /dev/null
+++ b/src/middlewares/add-comment.js
@@ -0,0 +1,33 @@
+import { ADD_COMMENT } from '../constants'
+const uuid = require('uuid/v4')
+
+const actionWithCommentId = (action) => {
+  const { payload } = action
+  console.log('-- action', action)
+  const newId = uuid()
+  let newAction = {
+    ...action,
+    payload: {
+      ...payload,
+      comment: {
+        ...payload.comment,
+        id: newId
+      }
+    }
+  }
+  console.log('-- new action', newAction)
+
+  return newAction
+}
+
+export default (store) => (next) => (action) => {
+  const { type } = action
+  if (type === ADD_COMMENT) {
+    const state = store.getState()
+    console.log('-- add comment middleware', state)
+    const newAction = actionWithCommentId(action)
+    next(newAction)
+  } else {
+    next(action)
+  }
+}
diff --git a/src/store/index.js b/src/store/index.js
index 33e60f4..447a4e4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,7 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import reducer from '../reducer'
 import logger from '../middlewares/logger'
+import addComment from '../middlewares/add-comment'
 
 const composeEnhancers =
   typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -10,7 +11,8 @@ const composeEnhancers =
     : compose
 
 const enhancer = composeEnhancers(
-  applyMiddleware(logger)
+  applyMiddleware(logger),
+  applyMiddleware(addComment)
   // other store enhancers if any
 )
 

From dff678176845fff80500c218d43a4c02d9a29f1b Mon Sep 17 00:00:00 2001
From: Olga Linkevich <volha.linkevich@gmail.com>
Date: Sun, 15 Jul 2018 19:34:00 +0300
Subject: [PATCH 3/5] HT4.3 Use articles' key-value object instead of array

---
 src/reducer/articles.js | 15 ++++++++++++---
 src/selectors/index.js  |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/reducer/articles.js b/src/reducer/articles.js
index 87165ef..3d47cce 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -1,12 +1,21 @@
 import { DELETE_ARTICLE } from '../constants'
 import { normalizedArticles } from '../fixtures'
 
-export default (articlesState = normalizedArticles, action) => {
-  const { type, payload } = action
+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)
+      var articles = { ...articlesState }
+      delete articles[payload.id]
+      return articles
 
     default:
       return articlesState
diff --git a/src/selectors/index.js b/src/selectors/index.js
index d3e380a..e9fd56b 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect'
 
 export const filtersSelector = (state) => state.filters
-export const articleListSelector = (state) => state.articles
+export const articleListSelector = (state) => Object.values(state.articles)
 export const commentsSelector = (state) => state.comments
 export const idSelector = (_, props) => props.id
 

From 1c10e266ba59bfb3f28f5b8fa1a7fb1f135a9ef7 Mon Sep 17 00:00:00 2001
From: Olga Linkevich <volha.linkevich@gmail.com>
Date: Sun, 15 Jul 2018 19:57:07 +0300
Subject: [PATCH 4/5] HT4.4 Add new comment to article

---
 src/components/forms/comment-form.js |  7 ++++++-
 src/middlewares/add-comment.js       | 19 +++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/comment-form.js b/src/components/forms/comment-form.js
index 6076c2b..da54c8d 100644
--- a/src/components/forms/comment-form.js
+++ b/src/components/forms/comment-form.js
@@ -20,7 +20,12 @@ class CommentForm extends Component {
     return (
       <div>
         <h4>{this.props.userName}</h4>
-        <textarea onChange={this.handleChange} cols="40" rows="5" />
+        <textarea
+          value={this.state.text}
+          onChange={this.handleChange}
+          cols="40"
+          rows="5"
+        />
         <div>
           <button onClick={this.addComment}>Add</button>
         </div>
diff --git a/src/middlewares/add-comment.js b/src/middlewares/add-comment.js
index da1ede7..eacb4a9 100644
--- a/src/middlewares/add-comment.js
+++ b/src/middlewares/add-comment.js
@@ -3,7 +3,6 @@ const uuid = require('uuid/v4')
 
 const actionWithCommentId = (action) => {
   const { payload } = action
-  console.log('-- action', action)
   const newId = uuid()
   let newAction = {
     ...action,
@@ -15,17 +14,33 @@ const actionWithCommentId = (action) => {
       }
     }
   }
-  console.log('-- new action', newAction)
 
   return newAction
 }
 
+const addComment = (state, comment) => {
+  state.comments[comment.id] = comment
+}
+
+const updateArticle = (state, articleId, commentId) => {
+  var article = { ...state.articles[articleId] }
+  article.comments.push(commentId)
+  state.articles[articleId] = article
+}
+
+const addCommentToArticle = (state, action) => {
+  const { articleId, comment } = action.payload
+  addComment(state, comment)
+  updateArticle(state, articleId, comment.id)
+}
+
 export default (store) => (next) => (action) => {
   const { type } = action
   if (type === ADD_COMMENT) {
     const state = store.getState()
     console.log('-- add comment middleware', state)
     const newAction = actionWithCommentId(action)
+    addCommentToArticle(state, newAction)
     next(newAction)
   } else {
     next(action)

From bcd7f89d3d0ef326261f1c45a7141fee515a3d18 Mon Sep 17 00:00:00 2001
From: Olga Linkevich <volha.linkevich@gmail.com>
Date: Sun, 15 Jul 2018 20:41:16 +0300
Subject: [PATCH 5/5] HT4.1 Add toastr for showing validation error

---
 package-lock.json              | 16 ++++++++++++++++
 package.json                   |  1 +
 src/app.js                     |  5 +++--
 src/components/user-error.js   | 22 ----------------------
 src/middlewares/add-comment.js | 20 ++++++++++++++++++++
 src/middlewares/user-error.js  | 11 +++++++++++
 src/reducer/error.js           | 12 ------------
 src/reducer/index.js           |  4 ++--
 src/store/index.js             |  4 +++-
 9 files changed, 56 insertions(+), 39 deletions(-)
 delete mode 100644 src/components/user-error.js
 create mode 100644 src/middlewares/user-error.js
 delete mode 100644 src/reducer/error.js

diff --git a/package-lock.json b/package-lock.json
index 5cf7457..e820548 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10164,6 +10164,22 @@
         "prop-types": "15.6.2"
       }
     },
+    "react-redux-toastr": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux-toastr/-/react-redux-toastr-7.3.0.tgz",
+      "integrity": "sha512-JyhhzhVqK3J9B+DRwWgXWA66TkLQg7jAgO/SdB+8Pb1QvsnPfQ4EGH9KV4MC7xCVAntPKWDgyRhjqCxZU6QfEg==",
+      "requires": {
+        "classnames": "2.2.6",
+        "eventemitter3": "2.0.3"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
     "react-scripts": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
diff --git a/package.json b/package.json
index 720cb0e..2a7c615 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "react-day-picker": "^7.1.9",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
+    "react-redux-toastr": "^7.3.0",
     "react-scripts": "1.1.4",
     "react-select": "^2.0.0-beta.6",
     "redux": "^4.0.0",
diff --git a/src/app.js b/src/app.js
index 3b4ade9..bf5a16b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react'
 import ArticleList from './components/article-list'
 import UserForm from './components/forms/user-form'
-import UserError from './components/user-error'
+import ReduxToastr from 'react-redux-toastr'
 import Filters from './components/filters'
 import Counter from './components/counter'
+import 'react-redux-toastr/lib/css/react-redux-toastr.min.css'
 
 class App extends Component {
   static propTypes = {}
@@ -11,8 +12,8 @@ class App extends Component {
   render() {
     return (
       <div>
+        <ReduxToastr />
         <UserForm />
-        <UserError />
         <Counter />
         <Filters articles={[]} />
         <ArticleList />
diff --git a/src/components/user-error.js b/src/components/user-error.js
deleted file mode 100644
index 3f37f96..0000000
--- a/src/components/user-error.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Component } from 'react'
-import { userErrorSelector } from '../selectors'
-import { connect } from 'react-redux'
-
-class UserError extends Component {
-  render() {
-    return <div>{this.getBody()}</div>
-  }
-
-  getBody() {
-    console.log('--- user-error', this.props.userError)
-    if (this.props.userError && this.props.userError.length > 0) {
-      return <div style={{ color: 'red' }}>{this.props.userError}</div>
-    } else {
-      return <div />
-    }
-  }
-}
-
-export default connect((state) => ({
-  userError: userErrorSelector(state)
-}))(UserError)
diff --git a/src/middlewares/add-comment.js b/src/middlewares/add-comment.js
index eacb4a9..11f8f94 100644
--- a/src/middlewares/add-comment.js
+++ b/src/middlewares/add-comment.js
@@ -1,4 +1,6 @@
+import React from 'react'
 import { ADD_COMMENT } from '../constants'
+import { toastr } from 'react-redux-toastr'
 const uuid = require('uuid/v4')
 
 const actionWithCommentId = (action) => {
@@ -28,10 +30,28 @@ const updateArticle = (state, articleId, commentId) => {
   state.articles[articleId] = article
 }
 
+const success = (article, comment) => {
+  const toastrOptions = {
+    timeOut: 3000, // by setting to 0 it will prevent the auto close
+    component: (
+      <div>
+        <h4>{article.title}</h4>
+        <div>
+          {comment.text} <b>by {comment.user}</b>
+        </div>
+      </div>
+    )
+  }
+
+  toastr.success('Comment added', '', toastrOptions)
+}
+
 const addCommentToArticle = (state, action) => {
   const { articleId, comment } = action.payload
   addComment(state, comment)
   updateArticle(state, articleId, comment.id)
+
+  success(state.articles[articleId], comment)
 }
 
 export default (store) => (next) => (action) => {
diff --git a/src/middlewares/user-error.js b/src/middlewares/user-error.js
new file mode 100644
index 0000000..66d8980
--- /dev/null
+++ b/src/middlewares/user-error.js
@@ -0,0 +1,11 @@
+import { USER_ERROR } from '../constants'
+import { toastr } from 'react-redux-toastr'
+
+export default (store) => (next) => (action) => {
+  const { type } = action
+  if (type === USER_ERROR) {
+    toastr.error('Error', action.payload)
+  }
+
+  next(action)
+}
diff --git a/src/reducer/error.js b/src/reducer/error.js
deleted file mode 100644
index f3ee054..0000000
--- a/src/reducer/error.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { USER_ERROR } from '../constants'
-
-export default ({ userError } = { userError: '' }, action) => {
-  const { type, payload } = action
-  switch (type) {
-    case USER_ERROR:
-      return { userError: payload }
-
-    default:
-      return { userError: '' }
-  }
-}
diff --git a/src/reducer/index.js b/src/reducer/index.js
index 8995630..29a066c 100644
--- a/src/reducer/index.js
+++ b/src/reducer/index.js
@@ -4,7 +4,7 @@ import articles from './articles'
 import comments from './comments'
 import filters from './filters'
 import user from './user'
-import error from './error'
+import { reducer as toastr } from 'react-redux-toastr'
 
 export default combineReducers({
   counter: counterReducer,
@@ -12,5 +12,5 @@ export default combineReducers({
   comments,
   filters,
   user,
-  error
+  toastr
 })
diff --git a/src/store/index.js b/src/store/index.js
index 447a4e4..52ea429 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,6 +2,7 @@ import { createStore, applyMiddleware, compose } from 'redux'
 import reducer from '../reducer'
 import logger from '../middlewares/logger'
 import addComment from '../middlewares/add-comment'
+import userError from '../middlewares/user-error'
 
 const composeEnhancers =
   typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -12,7 +13,8 @@ const composeEnhancers =
 
 const enhancer = composeEnhancers(
   applyMiddleware(logger),
-  applyMiddleware(addComment)
+  applyMiddleware(addComment),
+  applyMiddleware(userError)
   // other store enhancers if any
 )