Merge branch 'dev'

Author: Parth Shah

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.21",
   "description": "Customer pages in React and Redux",
   "scripts": {
-    "start": "webpack-dev-server --history-api-fallback --dev --hot --inline --progress --tc --port 3000",
+    "start": "webpack-dev-server --history-api-fallback --dev --hot --inline --progress --tc --port 3000 --host 0.0.0.0",
     "build": "webpack --bail --progress --build --tc",
     "lint": "eslint --fix --format table --ext .js,.jsx .",
     "test": "cross-env NODE_ENV=test mocha  --colors --reporter nyan --compilers js:babel-core/register --require ignore-styles --recursive \"./src/**/*.spec.js\"",
@@ -42,6 +42,7 @@
     "formsy-react": "^0.18.1",
     "history": "^1.17.0",
     "isomorphic-fetch": "^2.2.1",
+    "lodash": "^4.16.4",
     "moment": "^2.14.1",
     "react": "^15.3.1",
     "react-addons-css-transition-group": "^15.3.1",

src/api/messages.js

@@ -28,7 +28,8 @@ export function getTopicPosts(topicId, postIds) {
     .then( resp => {
       return {
         totalCount: _.get(resp.data, 'result.metadata.totalCount', 0),
-        posts: _.get(resp.data, 'result.content', [])
+        posts: _.get(resp.data, 'result.content', []),
+        topicId
       }
     })
 }
@@ -51,4 +52,4 @@ export function addTopicPost(topicId, post) {
       }
     })
 }
-/*eslint-enable*/
+/*eslint-enable*/

src/assets/images/check-white.svg

@@ -4,6 +4,9 @@
   padding: $base-unit*4 0;
   box-shadow: 0px 1px 3px 0px #C3C3C8;
 
+  // FIXME: Hide the top border on the new post composer to be better looking
+  .new-post-title + .tc-textarea .textarea-footer {border-top: none;}
+
   .panel-row,
   .modal-row{
     padding: $base-unit*2 $base-unit*6;
@@ -187,7 +190,7 @@
       padding: 12px 15px;
       background: $tc-gray-neutral-light;
       border: 1px solid $tc-gray-20;
-      border-top: none;
+      border-top: 1px solid $tc-dark-blue-90;
       display: flex;
       .textarea-buttons{
         display: flex;
@@ -357,13 +360,6 @@
       height: 40px;
       border-radius: 33px;
     }
-    &:empty {
-      border: 2px solid $tc-gray-50;
-      background: url('../../assets/images/user-add.svg') no-repeat;
-      background-position: center;
-      background-size: 16px;
-      border-radius: 33px;
-    }
   }
   .buttons{
     display: flex;

src/assets/images/ui-16px-1_check-simple.svg

@@ -8,9 +8,11 @@ export default class AddComment extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      isFocused: false
+      isFocused: false,
+      canSubmit: false
     }
     this.onAdd = this.onAdd.bind(this)
+    this.onTextAreaChange = this.onTextAreaChange.bind(this)
   }
 
   onAdd(e) {
@@ -23,9 +25,15 @@ export default class AddComment extends React.Component {
     this.refs.input.focus()
   }
 
+  onTextAreaChange(evt) {
+    const val = evt.target.value
+    this.setState({canSubmit: val && val.trim().length})
+    this.props.onChange(val, evt)
+  }
+
   render() {
-    const { className, avatarUrl, authorName, onChange, content, placeholder, isAdding } = this.props
-    const { isFocused } = this.state
+    const { className, avatarUrl, authorName, content, placeholder, isAdding } = this.props
+    const { isFocused, canSubmit } = this.state
     const isCollapsed = !isFocused && !content
 
     return (
@@ -42,10 +50,10 @@ export default class AddComment extends React.Component {
                 value={content}
                 onFocus={() => this.setState({isFocused: true})}
                 onBlur={() => this.setState({isFocused: false})}
-                onChange={(e) => onChange(e.target.value, e)}
+                onChange={this.onTextAreaChange}
               />
               {!isCollapsed && <div className="textarea-footer">
-                <button className="tc-btn tc-btn-primary tc-btn-sm" onClick={this.onAdd} disabled={ this.props.isAdding }>
+                <button className="tc-btn tc-btn-primary tc-btn-sm" onClick={this.onAdd} disabled={ isAdding || !canSubmit }>
                  { isAdding ? 'Posting...' : 'Post' }
                 </button>
               </div>}

src/assets/images/ui-16px-e_round-e-alert.svg

@@ -23,6 +23,7 @@
     z-index: 2;
     right: 0;
     top: 50px;
+    width: 340px;
     background: white;
     position: absolute;
     display: flex;

src/components/ActionCard/ActionCard.scss

@@ -4,7 +4,7 @@ import Panel from '../Panel/Panel'
 import AddComment from '../ActionCard/AddComment'
 import Comment from '../ActionCard/Comment'
 import cn from 'classnames'
-import { THREAD_MESSAGES_PAGE_SIZE } from '../../config/constants'
+// import { THREAD_MESSAGES_PAGE_SIZE } from '../../config/constants'
 
 const getCommentCount = (totalComments) => {
   if (!totalComments) {
@@ -24,7 +24,7 @@ class FeedComments extends React.Component {
 
   render() {
     const {
-    comments, currentUser, totalComments, /*onLoadMoreComments,*/ isLoadingComments, hasMoreComments, onAdd,
+    comments, currentUser, totalComments, onLoadMoreComments, isLoadingComments, hasMoreComments, onAdd,
     onChange, content, avatarUrl, isAddingComment
   } = this.props
     let authorName = currentUser.firstName
@@ -35,17 +35,17 @@ class FeedComments extends React.Component {
       this.setState({showAll: true})
     // TODO - handle the case when a topic has more than 20 comments
     // since those will have to retrieved from the server
-    // if (!isLoadingComments) {
-    //   onLoadMoreComments()
-    // }
+      if (!isLoadingComments) {
+        onLoadMoreComments()
+      }
     }
 
-    let _comments = comments
-    let _hasMoreComments = hasMoreComments
-    if (!this.state.showAll && _comments.length > THREAD_MESSAGES_PAGE_SIZE) {
-      _comments = _comments.slice(-THREAD_MESSAGES_PAGE_SIZE)
-      _hasMoreComments = true
-    }
+    // let _comments = comments
+    // let _hasMoreComments = hasMoreComments
+    // if (!this.state.showAll && _comments.length > THREAD_MESSAGES_PAGE_SIZE) {
+    //   _comments = _comments.slice(-THREAD_MESSAGES_PAGE_SIZE)
+    //   _hasMoreComments = true
+    // }
 
     return (
     <div>
@@ -57,15 +57,15 @@ class FeedComments extends React.Component {
               {getCommentCount(totalComments)}
             </div>
             <hr className={cn({'no-margin': !comments.length})} />
-            {_hasMoreComments && <div className={cn('comment-collapse', {'loading-comments': isLoadingComments})}>
+            {hasMoreComments && <div className={cn('comment-collapse', {'loading-comments': isLoadingComments})}>
               <a href="javascript:" onClick={ handleLoadMoreClick } className="comment-collapse-button">
                 {isLoadingComments ? 'Loading...' : 'View older comments'}
               </a>
             </div>}
           </div>
         </div>
       </Panel.Body>
-      {_comments.map((item, idx) =>
+      {comments.map((item, idx) =>
         <Comment
           key={idx}
           avatarUrl={item.author.photoURL}

src/components/ActionCard/AddComment.jsx

@@ -58,6 +58,14 @@ class NewPost extends React.Component {
     document.removeEventListener('click', this.onClickOutside)
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (!(nextProps.isCreating || nextProps.hasError && !nextProps.isCreating)) {
+      this.setState({editorState: EditorState.createEmpty()})
+      this.refs.title.value = ''
+    }
+    this.onNewPostChange()
+  }
+
   onClickOutside(evt) {
     let currNode = evt.target
     let isEditor = false
@@ -122,7 +130,7 @@ class NewPost extends React.Component {
 
   onNewPostChange() {
     this.setState({
-      canSubmit: !!this.refs.title.value.trim().length && this.state.editorState.getCurrentContent().hasText()
+      canSubmit: this.refs.title && !!this.refs.title.value.trim().length && this.state.editorState.getCurrentContent().hasText()
     })
   }
 
@@ -150,8 +158,8 @@ class NewPost extends React.Component {
       const content = stateToMarkdown(editorState.getCurrentContent())
       if (title && content) {
         this.props.onPost({title, content})
-        this.setState({editorState: EditorState.createEmpty()})
-        this.refs.title.value = ''
+        // this.setState({editorState: EditorState.createEmpty()})
+        // this.refs.title.value = ''
       }
     }