more fixes

Author: Parth Shah

package.json

@@ -35,6 +35,7 @@
     "classnames": "^2.2.3",
     "draft-js": "^0.7.0",
     "draft-js-export-html": "^0.4.0",
+    "draft-js-export-markdown": "^0.2.1",
     "fbemitter": "^2.1.1",
     "filepicker-js": "^2.4.17",
     "filesize": "^3.3.0",

src/components/ActionCard/AddComment.jsx

@@ -22,7 +22,7 @@ export default class AddComment extends React.Component {
     this.props.onAdd(this.props.content)
     this.refs.input.focus()
   }
-  
+
   render() {
     const { className, avatarUrl, authorName, onChange, content, placeholder, isAdding } = this.props
     const { isFocused } = this.state
@@ -63,4 +63,4 @@ AddComment.propTypes = {
   className: PropTypes.string,
   content: PropTypes.string,
   avatarUrl: PropTypes.string
-}
+}

src/components/Feed/FeedComments.jsx

@@ -4,6 +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'
 
 const getCommentCount = (totalComments) => {
   if (!totalComments) {
@@ -15,21 +16,38 @@ const getCommentCount = (totalComments) => {
   return `${totalComments} comments`
 }
 
-const FeedComments = (props) => {
-  const {
-    comments, currentUser, totalComments, onLoadMoreComments, isLoadingComments, hasMoreComments, onAdd,
-    onChange, content, avatarUrl, isAddingComment
-  } = props
-  let authorName = currentUser.firstName
-  if (authorName && currentUser.lastName) {
-    authorName += ' ' + currentUser.lastName
+class FeedComments extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { showAll: false }
   }
-  const handleLoadMoreClick = () => {
-    if (!isLoadingComments) {
-      onLoadMoreComments()
+
+  render() {
+    const {
+    comments, currentUser, totalComments, /*onLoadMoreComments,*/ isLoadingComments, hasMoreComments, onAdd,
+    onChange, content, avatarUrl, isAddingComment
+  } = this.props
+    let authorName = currentUser.firstName
+    if (authorName && currentUser.lastName) {
+      authorName += ' ' + currentUser.lastName
     }
-  }
-  return (
+    const handleLoadMoreClick = () => {
+      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()
+    // }
+    }
+
+    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>
       <Panel.Body className="comment-count-container">
         <div className="portrait" />
@@ -39,17 +57,17 @@ const FeedComments = (props) => {
               {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) =>
+      {_comments.map((item, idx) =>
         <Comment
-          key={item.id}
+          key={idx}
           avatarUrl={item.author.photoURL}
           authorName={item.author.firstName + ' ' + item.author.lastName}
           date={moment(item.date).fromNow()}
@@ -70,8 +88,8 @@ const FeedComments = (props) => {
       />
     </div>
   )
+  }
 }
-
 FeedComments.propTypes = {
   comments: PropTypes.array.isRequired
 }

src/components/Feed/NewPost.jsx

@@ -1,15 +1,14 @@
 import React, {PropTypes} from 'react'
 import {Editor, EditorState, RichUtils} from 'draft-js'
-import {stateToHTML} from 'draft-js-export-html'
+import {stateToMarkdown} from 'draft-js-export-markdown'
 import cn from 'classnames'
 import './draftjs.scss'
 import { Avatar } from 'appirio-tech-react-components'
-// import { Icons } from 'appirio-tech-react-components'
 
 const styles = [
   {className: 'bold', style: 'BOLD'},
-  {className: 'italic', style: 'ITALIC'},
-  {className: 'underline', style: 'UNDERLINE'}
+  {className: 'italic', style: 'ITALIC'}
+  // {className: 'underline', style: 'UNDERLINE'}
 ]
 
 const blocks = [
@@ -41,13 +40,13 @@ class NewPost extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = {editorState: EditorState.createEmpty(), expandedEditor: false}
-    this.onChange = (editorState) => this.setState({editorState})
-
+    this.state = {editorState: EditorState.createEmpty(), expandedEditor: false, canSubmit: false}
+    this.onEditorChange = this.onEditorChange.bind(this)
     this.handleKeyCommand = this.handleKeyCommand.bind(this)
     this.toggleBlockType = this.toggleBlockType.bind(this)
     this.toggleInlineStyle = this.toggleInlineStyle.bind(this)
     this.onClickOutside = this.onClickOutside.bind(this)
+    this.onNewPostChange = this.onNewPostChange.bind(this)
   }
 
   componentDidMount() {
@@ -64,7 +63,7 @@ class NewPost extends React.Component {
     let isEditor = false
     let isCloseButton = false
     const title = this.refs.title.value
-    const content = stateToHTML(this.state.editorState.getCurrentContent())
+    const hasContent = this.state.editorState.getCurrentContent().hasText()
 
     do {
       if(currNode.className
@@ -87,7 +86,7 @@ class NewPost extends React.Component {
     // if any of title and content, is non empty, do not proceed
     if (!isEditor
       && !isCloseButton
-      && ((title && title.length > 0) || (content && content !== '<p><br></p>'))) {
+      && ((title && title.trim().length > 0) || hasContent)) {
       return
     }
 
@@ -102,23 +101,34 @@ class NewPost extends React.Component {
     const {editorState} = this.state
     const newState = RichUtils.handleKeyCommand(editorState, command)
     if (newState) {
-      this.onChange(newState)
+      this.onEditorChange(newState)
       return true
     }
     return false
   }
 
   toggleBlockType(blockType) {
-    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType))
+    this.onEditorChange(RichUtils.toggleBlockType(this.state.editorState, blockType))
   }
 
   toggleInlineStyle(inlineStyle) {
-    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle))
+    this.onEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle))
+  }
+
+  onEditorChange(editorState) {
+    this.setState({editorState})
+    this.onNewPostChange()
+  }
+
+  onNewPostChange() {
+    this.setState({
+      canSubmit: !!this.refs.title.value.trim().length && this.state.editorState.getCurrentContent().hasText()
+    })
   }
 
   render() {
-    const {currentUser, heading, titlePlaceholder} = this.props
-    const {editorState} = this.state
+    const {currentUser, titlePlaceholder, isCreating} = this.props
+    const {editorState, canSubmit} = this.state
     const currentStyle = editorState.getCurrentInlineStyle()
     const selection = editorState.getSelection()
     let authorName = currentUser.firstName
@@ -137,7 +147,7 @@ class NewPost extends React.Component {
         return
       }
       const title = this.refs.title.value
-      const content = stateToHTML(editorState.getCurrentContent())
+      const content = stateToMarkdown(editorState.getCurrentContent())
       if (title && content) {
         this.props.onPost({title, content})
         this.setState({editorState: EditorState.createEmpty()})
@@ -159,9 +169,11 @@ class NewPost extends React.Component {
         {/* No need to handle click event of the close button as its already
          handled in onClickOutside handler */}
         <a href="javascript:" className="btn-close" />
+        {/*
         <div className="modal-title title-muted">
-          { heading || 'NEW STATUS POST' } 
+          { heading || 'NEW STATUS POST' }
         </div>
+        */}
         <div className="modal-row">
           <div className="portrait">
             <Avatar avatarUrl={ currentUser.photoURL } userName={ authorName } />
@@ -171,13 +183,14 @@ class NewPost extends React.Component {
               ref="title"
               className="new-post-title"
               type="text"
+              onChange={this.onNewPostChange}
               placeholder={ titlePlaceholder || 'Title of the post'}
             />
             <div className="draftjs-editor tc-textarea">
               <Editor
                 ref="editor"
                 editorState={editorState}
-                onChange={this.onChange}
+                onChange={this.onEditorChange}
                 handleKeyCommand={this.handleKeyCommand}
               />
               <div className="textarea-footer">
@@ -206,7 +219,7 @@ class NewPost extends React.Component {
                   {/*<div className="separator"/>
                   <button className="attach"/>*/}
                 </div>
-                <button className="tc-btn tc-btn-primary tc-btn-sm" onClick={onPost} disabled={ this.props.isCreating }>
+                <button className="tc-btn tc-btn-primary tc-btn-sm" onClick={onPost} disabled={isCreating || !canSubmit }>
                   { this.props.isCreating ? 'Posting...' : 'Post'  }
                 </button>
               </div>

src/components/Feed/draftjs.scss

@@ -51,7 +51,7 @@
 }
 
 .public-DraftStyleDefault-ul,
-.public-DraftStyleDefault-ol {  
+.public-DraftStyleDefault-ol {
   margin: $base-unit*2 0 $base-unit*2 $base-unit*6
 }
 
@@ -75,7 +75,7 @@
     list-style-type: disc;
   }
   ol {
-    list-style-type: disc;
+    list-style-type: decimal;
   }
   blockquote {
     @include roboto-medium;
@@ -95,4 +95,4 @@
   em {
     font-style: italic;
   }
-}
+}

src/components/FileList/FileIcons.jsx

@@ -24,9 +24,15 @@ const Gzip = ({ width = '42px', height = '42px' }) => {
     </svg>
   )
 }
-
+const Default = ({width = '42px', height = '42px'}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width={width} height={height} viewBox="0 0 48 48"><g >
+  <path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+  <path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+  </g></svg>
+)
 const FileIcons = {
-  Gzip
+  Gzip,
+  Default
 }
 
 export default FileIcons

src/components/FileList/FileListItem.jsx

@@ -49,7 +49,7 @@ export default class FileListItem extends React.Component {
             <a href="javascript:" className="icon-close" onClick={onExitEdit}><CloseIcon /></a>
           </div>
         </div>
-        <textarea defaultValue={description} ref="desc" className="tc-textarea" />
+        <textarea defaultValue={description} ref="desc" maxLength={250} className="tc-textarea" />
       </div>
     )
   }
@@ -72,24 +72,15 @@ export default class FileListItem extends React.Component {
       </div>
     )
   }
-
-  getFileIcon(type) {
-    switch (type) {
-    case 'application/zip':
-    case 'applicatin/archive':
-      return <FileIcons.Gzip />
-    default:
-      return <FileIcons.Gzip /> // TODO add more
-    }
-  }
+  
   render() {
     const {isEditing} = this.state
-    const icon = this.getFileIcon(this.props.contentType)
+    // const Icon = this.getFileIcon(this.props.contentType)
 
     return (
       <div className="file-list-item">
         <div className="icon-col">
-          {icon}
+          <FileIcons.Default width={42} height={42}/>
         </div>
         <div className="content-col">
           {isEditing ? this.renderEditing() : this.renderReadOnly()}