HW3

package.json

@@ -30,9 +30,13 @@
     "webpack-dev-server": "^2.0.0"
   },
   "dependencies": {
+    "moment": "^2.18.1",
+    "moment-timezone": "^0.5.13",
     "prop-types": "^15.5.10",
     "react": "^15.5.0",
+    "react-day-picker": "^6.0.2",
     "react-dom": "^15.5.0",
+    "react-moment": "^0.2.4",
     "react-select": "^1.0.0-rc.5",
     "react-transition-group": "^1.2.0"
   }

src/components/AddComment.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class AddComment extends Component {
+    static propTypes = {
+
+    };
+
+    state = {
+        username: '',
+        testMess: ''
+    }
+
+    render() {
+        return (
+            <div>
+                <p>Add new comment</p>
+                <form>
+                    <input type = 'text' placeholder="User Name" value = {this.state.username} onChange = {this.handleUserChange} />
+                    <textarea type = 'text' placeholder="Comments" value = {this.state.testMess} onChange = {this.handleCommentChange}/>
+                </form>
+            </div>
+        )
+    }
+
+
+    handleUserChange = (ev) => {
+        if (ev.target.value.length < 5 || ev.target.value.length > 15){
+            ev.target.style.border = '2px solid red'
+        } else{
+            ev.target.style.border = ''
+        }
+        this.setState({
+            username: ev.target.value
+        })
+    }
+
+    handleCommentChange = (ev) => {
+        if (ev.target.value.length < 20 || ev.target.value.length > 50){
+            ev.target.style.border = '2px solid red'
+        } else{
+            ev.target.style.border = ''
+        }
+
+        this.setState({
+            testMess: ev.target.value
+        })
+    }
+
+}
+
+export default AddComment

src/components/App.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import ArticleList from './ArticleList'
 import ArticlesChart from './ArticlesChart'
 import UserForm from './UserForm'
+import Calendar from './Calendar'
 import Select from 'react-select'
 import 'react-select/dist/react-select.css'
 
@@ -24,8 +25,14 @@ class App extends Component {
 
         return (
             <div>
+                <Calendar />
                 <UserForm />
-                <Select options = {options} value = {this.state.selection} onChange = {this.changeSelection} multi />
+                <Select 
+                    options = {options} 
+                    value = {this.state.selection} 
+                    onChange = {this.changeSelection} 
+                    multi 
+                />
                 <ArticleList articles = {articles} defaultOpenId = {articles[0].id}/>
                 <ArticlesChart articles = {articles} />
             </div>

src/components/Calendar.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import DayPicker, { DateUtils } from 'react-day-picker';
+
+import 'react-day-picker/lib/style.css';
+
+export default class Calendar extends React.Component {
+  state = {
+    from: null,
+    to: null,
+  };
+  handleDayClick = day => {
+    const range = DateUtils.addDayToRange(day, this.state);
+    this.setState(range);
+  };
+  handleResetClick = e => {
+    e.preventDefault();
+    this.setState({
+      from: null,
+      to: null,
+    });
+  };
+  render() {
+    const { from, to } = this.state;
+    return (
+      <div className="RangeExample">
+        {!from && !to && <p>Please select the <strong>first day</strong>.</p>}
+        {from && !to && <p>Please select the <strong>last day</strong>.</p>}
+        {from &&
+          to &&
+          <p>
+            You chose from
+            {' '}
+            {moment(from).format('L')}
+            {' '}
+            to
+            {' '}
+            {moment(to).format('L')}
+            .
+            {' '}<a href="." onClick={this.handleResetClick}>Reset</a>
+          </p>}
+        <DayPicker
+          numberOfMonths={2}
+          selectedDays={[from, { from, to }]}
+          onDayClick={this.handleDayClick}
+          fixedWeeks
+        />
+      </div>
+    );
+  }
+}

src/components/CommentList.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import Comment from './Comment'
+import AddComment from './AddComment'
 import toggleOpen from '../decorators/toggleOpen'
 
 function CommentList({comments = [], isOpen, toggleOpen}) {
@@ -25,9 +26,12 @@ 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>
+            <AddComment />
+        </div>
     )
 }