[Improvement] resolve open comment menu and remove anti pattern editorStatus property from comment

src/actions/commentActions.ts

@@ -130,7 +130,6 @@ export const dbGetComments = (ownerUserId: string, postId: string) => {
  */
 export const dbUpdateComment = (comment: Comment) => {
   return (dispatch: any, getState: Function) => {
-    delete comment.editorStatus
     dispatch(globalActions.showTopLoading())
 
     return commentService.updateComment(comment)

src/actions/globalActions.ts

@@ -112,6 +112,9 @@ export const hideMessage = () => {
  * @param {string} message
  */
 export const showMessage = (message: string) => {
+  if (!message || message === '' || (message && message.trim() === '')) {
+    message = 'Bad request'
+  }
   return {
     type: GlobalActionType.SHOW_MESSAGE_GLOBAL,
     payload: message

src/actions/postActions.ts

@@ -113,7 +113,7 @@ export const dbAddImagePost = (newPost: Post, callBack: Function) => {
  */
 export const dbUpdatePost = (updatedPost: Post, callBack: Function) => {
   return (dispatch: any, getState: Function) => {
-
+console.trace('update post ', updatedPost)
     dispatch(globalActions.showTopLoading())
 
     return postService.updatePost(updatedPost).then(() => {

src/components/comment/CommentComponent.tsx

@@ -221,7 +221,6 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
    */
   handleUpdateComment = (evt: any) => {
     const { comment } = this.props
-    comment.editorStatus = undefined
     comment.text = this.state.text
     this.props.update!(comment)
     this.setState({
@@ -291,11 +290,11 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
     /**
      * Comment object from props
      */
-    const { comment, classes, fullName, avatar, translate } = this.props
+    const { comment, classes, fullName, avatar, translate , editorStatus} = this.props
 
     const { openMenu } = this.state
 
-    const RightIconMenu = () => (
+    const rightIconMenu = (
       <Manager
         className={classes.iconButton}
       >
@@ -336,7 +335,7 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
         }}>{moment.unix(comment.creationDate!).fromNow()}</span>
       </div>
     )
-    const { userId, editorStatus } = comment
+    const { userId } = comment
     const commentBody = (
       <div style={{ outline: 'none', flex: 'auto', flexGrow: 1 }}>
       { editorStatus ? <TextField
@@ -373,7 +372,7 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
               title={editorStatus ? '' : <Author />}
               subheader={commentBody}
               avatar={<NavLink to={`/${userId}`}><UserAvatar fullName={fullName!} fileName={avatar!} size={24} /></NavLink>}
-              action={(!this.props.isCommentOwner && !this.props.isPostOwner && this.props.disableComments) || editorStatus ? '' : (<RightIconMenu />)}
+              action={(!this.props.isCommentOwner && !this.props.isPostOwner && this.props.disableComments) || editorStatus ? '' : rightIconMenu}
             >
             </CardHeader>
 

src/components/comment/ICommentComponentProps.ts

@@ -95,6 +95,11 @@ export interface ICommentComponentProps {
    */
   disableComments?: boolean
 
+  /**
+   * Whether comment edit is open
+   */
+  editorStatus: boolean
+
   /**
    * Styles
    */

src/components/commentGroup/CommentGroupComponent.tsx

@@ -317,7 +317,7 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
     const showComments = ( comments && Object.keys(comments).length > 0
     ? (
     <Paper elevation={0} style={open ? { display: 'block', padding: '0px 0px' } : { display: 'none', padding: '12px 16px' }}>
-      <CommentListComponent comments={comments!} isPostOwner={this.props.isPostOwner} disableComments={this.props.disableComments} />
+      <CommentListComponent comments={comments!} isPostOwner={this.props.isPostOwner} disableComments={this.props.disableComments} postId={postId}/>
     </Paper>)
     : '')
     const loadComments = (( getCommentsRequest === undefined || (getCommentsRequest && getCommentsRequest!.status !== ServerRequestStatusType.OK)) ? <LinearProgress style={this.styles.progressbar} variant='indeterminate' /> : showComments)

src/components/commentList/CommentListComponent.tsx

@@ -54,7 +54,7 @@ export class CommentListComponent extends Component<ICommentListComponentProps,
    * @return {DOM} list of comments' DOM
    */
   commentList = () => {
-    let comments = this.props.comments
+    let {comments, commentsEditorStatus} = this.props
     if (comments) {
 
       let parsedComments: Comment[] = []
@@ -68,7 +68,15 @@ export class CommentListComponent extends Component<ICommentListComponentProps,
 
       return sortedComments.map((comment: Comment, index: number, array: Comment) => {
 
-        return <CommentComponent key={comment.id!} comment={comment} isPostOwner={this.props.isPostOwner} disableComments={this.props.disableComments}/>
+        return (
+             <CommentComponent 
+                key={comment.id!} 
+                comment={comment} 
+                isPostOwner={this.props.isPostOwner} 
+                disableComments={this.props.disableComments}
+                editorStatus={(commentsEditorStatus![comment.id!]) || false}
+              />
+              )
 
       })
 
@@ -116,9 +124,11 @@ const mapDispatchToProps = (dispatch: any, ownProps: ICommentListComponentProps)
  * @param  {object} ownProps is the props belong to component
  * @return {object}          props of component
  */
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: any, ownProps: ICommentListComponentProps) => {
+  const { comment } = state
+  const commentsEditorStatus: { [commentId: string]: Comment } = comment.editorStatus[ownProps.postId] || {}
   return {
-
+    commentsEditorStatus
   }
 }
 

src/components/commentList/ICommentListComponentProps.ts

@@ -10,6 +10,11 @@ export interface ICommentListComponentProps {
    */
   comments: {[commentId: string]: Comment}
 
+  /**
+   * Comments editor status
+   */
+  commentsEditorStatus?: {[commentId: string]: boolean}
+
   /**
    * Current user is post the post owner {true} or not false
    *
@@ -18,6 +23,11 @@ export interface ICommentListComponentProps {
    */
   isPostOwner: boolean
 
+  /**
+   * The post identifier comments belong to
+   */
+  postId: string
+
   /**
    * Comment on the post is disabled {false} or not {true}
    *

src/components/home/HomeComponent.tsx

@@ -160,7 +160,6 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
    * Handle drawer toggle
    */
   handleDrawerToggle = () => {
-    console.trace('toggle')
     this.setState({ drawerOpen: !this.state.drawerOpen })
   }
 

src/components/post/PostComponent.tsx

@@ -340,7 +340,7 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
   render () {
     const { post, setHomeTitle, goTo, fullName, isPostOwner, commentList, avatar, classes , translate} = this.props
     const { postMenuAnchorEl, isPostMenuOpen } = this.state
-    const RightIconMenu = () => (
+    const rightIconMenu = (
       <Manager>
         <Target>
           <IconButton
@@ -355,10 +355,10 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
         <Popper
           placement='bottom-start'
           eventsEnabled={isPostMenuOpen!}
-          className={classNames({ [classes.popperClose]: !isPostMenuOpen! }, { [classes.popperOpen]: isPostMenuOpen! })}
+          className={classNames({ [classes.popperClose]: !isPostMenuOpen }, { [classes.popperOpen]: isPostMenuOpen })}
         >
           <ClickAwayListener onClickAway={this.closePostMenu}>
-            <Grow in={isPostMenuOpen!} >
+            <Grow in={isPostMenuOpen} >
               <Paper>
                 <MenuList role='menu'>
                   <MenuItem onClick={this.handleOpenPostWrite} > {translate!('post.edit')} </MenuItem>
@@ -387,7 +387,7 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
           title={<NavLink to={`/${ownerUserId}`}>{ownerDisplayName}</NavLink>}
           subheader={moment.unix(creationDate!).fromNow() + ' | ' + translate!('post.public')}
           avatar={<NavLink to={`/${ownerUserId}`}><UserAvatar fullName={fullName!} fileName={avatar!} size={36} /></NavLink>}
-          action={isPostOwner ? <RightIconMenu /> : ''}
+          action={isPostOwner ? rightIconMenu : ''}
         >
         </CardHeader>
         {image ? (

src/core/domain/comments/comment.ts

@@ -66,13 +66,4 @@ export class Comment extends BaseDomain {
    */
   public userId?: string
 
-  /**
-   * Comment is in edit state {true} or not {false}
-   *
-   * @type {boolean}
-   * @memberof Comment
-   */
-  // TODO: Should be changed to reuseable component and remove this property
-  editorStatus?: boolean
-
 }

src/reducers/comments/CommentState.ts

@@ -17,6 +17,11 @@ export class CommentState {
      */
   postComments: {[postId: string]: {[commentId: string]: Comment}} = {}
 
+  /**
+   * Whether comment editor is open
+   */
+  editorStatus: {[postId: string]: {[commentId: string]: boolean}} = {}
+
     /**
      * If the comments are loaded {true} or not {false}
      *

src/reducers/comments/commentReducer.ts

@@ -85,28 +85,22 @@ export let commentReducer = (state: CommentState = new CommentState(), action: I
     case CommentActionType.CLOSE_COMMENT_EDITOR:
       return {
         ...state,
-        postComments: {
+        editorStatus: {
-          ...state.postComments,
+          ...state.editorStatus,
           [payload.postId]: {
-            ...state.postComments![payload.postId],
+            ...state.editorStatus![payload.postId],
-            [payload.id]: {
+            [payload.id]: false
-              ...state.postComments![payload.postId][payload.id],
-              editorStatus: false
-            }
           }
         }
       }
     case CommentActionType.OPEN_COMMENT_EDITOR:
       return {
         ...state,
-        postComments: {
+        editorStatus: {
-          ...state.postComments,
+          ...state.editorStatus,
           [payload.postId]: {
-            ...state.postComments![payload.postId],
+            ...state.editorStatus![payload.postId],
-            [payload.id]: {
+            [payload.id]: true
-              ...state.postComments![payload.postId][payload.id],
-              editorStatus: true
-            }
           }
         }
       }