Hw 4

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}
+    }
+}

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 =>
             <li key = {article.id} className = "test__article-list--item">
                 <Article
                     article = {article}

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>
                 </h2>
+
+                <CommentForm rel={article.id}/>
                 <CSSTransition
                     transitionName = "article"
                     transitionAppear

src/components/comment-form.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { addComment } from '../AC'
+import toggleOpen from '../decorators/toggleOpen'
+
+class CommentForm extends Component {
+    state = {
+        authorname: "",
+        commenttext: ""
+    }
+
+    render() {
+
+        const {rel, isOpen, toggleOpen} = this.props
+
+        return (
+            <div>
+                <button onClick = {toggleOpen}>comment me</button>
+                <form method="post" style={{display: isOpen ? "block": "none"}}>
+
+                    <label htmlFor={"authorname-" + rel}>name: </label>
+                    <input type="text"
+                       name="authorname"
+                       id={"authorname-" + rel}
+                       value={this.state.authorname}
+                       onChange={this.handleInput}
+                    /><br/>
+
+                    <label htmlFor={"newcommenttext-" + rel}>text: </label>
+                    <textarea name="text" id={"newcommenttext-" + rel} onChange={this.handleTextChange}
+                          value={this.state.commenttext}></textarea> <br/>
+                    <input type="button" onClick={this.handleAddcommentClick} value="Add"/>
+                </form>
+            </div>
+        )
+    }
+
+    handleInput = ev => {
+        this.setState({
+            authorname: ev.target.value
+        })
+    }
+
+    handleTextChange = ev => {
+        this.setState({
+            commenttext: ev.target.value
+        })
+    }
+
+    handleAddcommentClick = () => {
+        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 })(toggleOpen(CommentForm))

src/components/filters/select.js

@@ -8,14 +8,14 @@ import 'react-select/dist/react-select.css'
 
 class SelectFilter extends Component {
     static propTypes = {
-        articles: PropTypes.array.isRequired
+        articles: PropTypes.object.isRequired
     };
 
     handleChange = selected => 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
         }))

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'

src/middlewares/randomid.js

@@ -0,0 +1,22 @@
+import { ADD_COMMENT } from '../constants'
+/**
+ * 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 => {
+    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)
+}

src/reducer/articles.js

@@ -1,12 +1,25 @@
-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((wii, article)=>({
+    ...wii,
+    [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)
+            let articles = Object.assign({}, articlesState);
+            delete articles[payload.id]
+            return articles
+
+        case ADD_COMMENT:
+            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

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
     }

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))

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