HT3

package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "prop-types": "^15.5.10",
     "react": "^15.5.0",
+    "react-day-picker": "^6.0.2",
     "react-dom": "^15.5.0",
     "react-select": "^1.0.0-rc.5",
     "react-transition-group": "^1.2.0"

src/components/AddCommentForm.js

@@ -0,0 +1,50 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class UserForm extends PureComponent {
+    constructor(props){
+        super(props);
+
+        this.state = {
+            userName: '',
+            commentText: ''
+        }
+        this.handleUserChange = this.handleInputChange('userName');
+        this.handleCommentChange = this.handleInputChange('commentText');
+    }
+
+    render() {
+        let {
+            userName,
+            commentText
+        } = this.state;
+        return (
+            <div>
+                User:
+                <input
+                    style = {(userName.length < 5 || userName.length > 15) ? {
+                       'color':'red'
+                    } : {'color':'black'}}
+                    type = 'text'
+                    value = {userName}
+                    onChange = {this.handleUserChange}
+                />
+                Comment text:
+                <input
+                    style = {(commentText.length < 20 || commentText.length > 50) ? {
+                        'color':'red'
+                    } : {'color':'black'}}
+                    type = 'text'
+                    value = {commentText}
+                    onChange = {this.handleCommentChange}
+                />
+            </div>
+        )
+    }
+
+    handleInputChange = target => ev => {
+        this.setState({
+            [target]: ev.target.value
+        })
+    }
+}

src/components/App.js

@@ -5,6 +5,7 @@ import ArticlesChart from './ArticlesChart'
 import UserForm from './UserForm'
 import Select from 'react-select'
 import 'react-select/dist/react-select.css'
+import DayPicker from './DayPicker.js'
 
 class App extends Component {
     static propTypes = {
@@ -24,6 +25,7 @@ class App extends Component {
 
         return (
             <div>
+                <DayPicker />
                 <UserForm />
                 <Select options = {options} value = {this.state.selection} onChange = {this.changeSelection} multi />
                 <ArticleList articles = {articles} defaultOpenId = {articles[0].id}/>
@@ -35,4 +37,4 @@ class App extends Component {
     changeSelection = selection => this.setState({ selection })
 }
 
-export default App
+export default App

src/components/CommentList.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import Comment from './Comment'
 import toggleOpen from '../decorators/toggleOpen'
+import AddCommentForm from './AddCommentForm'
 
 function CommentList({comments = [], isOpen, toggleOpen}) {
     const text = isOpen ? 'hide comments' : 'show comments'
@@ -25,10 +26,13 @@ function getBody({comments, isOpen}) {
     if (!comments.length) return <p>No comments yet</p>
 
     return (
-        <ul>
-            {comments.map(comment => <li key={comment.id}><Comment comment={comment}/></li>)}
-        </ul>
+        <div>
+            <ul>
+                {comments.map(comment => <li key={comment.id}><Comment comment={comment}/></li>)}
+            </ul>
+            <AddCommentForm />
+        </div>
     )
 }
 
-export default toggleOpen(CommentList)
+export default toggleOpen(CommentList)

src/components/DayPicker.js

@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react' 
+import ReactDayPicker from 'react-day-picker'
+import 'react-day-picker/lib/style.css'
+
+export default class DayPicker extends PureComponent {
+    state = {
+        first: null,
+        second: null
+    }
+
+    handleDayClick = day => {
+        let {
+            first,
+            second
+        } = this.state;
+
+        if (!first) {
+            this.setState({
+                first: day
+            })    
+        } else if (!second) {
+            this.setState({
+                second: day
+            })
+        } else {
+            this.setState({
+                first: day,
+                second: null
+            })
+        }        
+    };
+
+    render() {
+        let {
+            first,
+            second
+        } = this.state;
+        let day;
+        let str = first
+            ? (second
+               ? `Выбранный временной интервал: ${day = Math.abs(second - first)/86400000} ${day < 5 ? (day === 1 ? 'день' : 'дня') : 'дней'}`
+               : 'Выберите вторую дату'
+              )
+            : 'Выберите первую дату'; 
+
+        return <div>
+            <div>{ str }</div>
+            <ReactDayPicker
+        onDayClick={this.handleDayClick}
+        selectedDays={this.state.selectedDay}
+            />
+        </div>
+    }
+}