Wall Comment System with React JS Part Two
Wall Script
Wall Script
Wednesday, August 17, 2016

Wall Comment System with React JS Part Two

This post is continuation of React JS previous post. React JS is lighter and faster. It needs less coding and as mentioned in the earlier post, React suites best for one page application, front-end and single page websites. The article explains how to post a comment, delete a comment and also toggle(hide/show) a comment using React JS. React JS and Angular JS are two prominent frameworks in JavaScript now-a-days. As its a new series in my blog, I would appreciate for any doubts or your feedback in the comments so that I could explain it to you in a better way.

Social Network System with React JS


Download Script     Live Demo

I personally, would suggest every web developer to learn React and Angular JS to design easy and make your web application work much awesome. Have a look at the demo - to post, delete and toggle a comment using React JS.

Implementing Commenting System
Hope you liked the previous part Social Network System with React JS part 1 , most of the concepts will repeat again.

Step 6
Now go to WallUpdates component, replace and include CommentBlock component in following way. Created an attribute called dataCommentsBlock, assigned update.comments data from the news feed json data. Take a look the step 1
//Comments Block
to
<CommentBlock  dataComentsBlock={update.comments} updateID={update.update_id}/>

CommentBlock Component
This is comment container component, this contains CommentsGrid and CommentForm. Here you have to initialize the dataComments value from the CommentBlock component attribute this.props.dataCommentsBlock going to implement main operations.
var CommentBlock=React.createClass({
getInitialState: function() {
  return {
  dataComments: this.props.dataCommentsBlock,
  showComment: false //Default value for comment
  };
},
render:function(){
  return (
         <div>
         <div className="feedLinks"> <a href="#">Comment</a></div>
         <CommentsGrid dataComments={this.state.dataComments} />
         <CommentForm/>
         </div>
         )
}
});

CommentsGrid Component
This component will render all of the comments information based on this news feed update ID, steps almost list WallUpdates component.
var CommentsGrid=React.createClass({
textToLinkHTMLfunction(content){
  var finalContent=textToLink(content);
  return {__html: finalContent}
 },
render: function(){
var comments=this.props.dataComments.map(function(comment,index){
return(
      <div className="feedCommentGrid" key={comment.com_id}>
      <img src={comment.profile_pic} className="commentImg" />
      <div className="commentText">
      <b>{comment.name}</b>
      <a href="#"  data={comment.com_id} className="commetDelete"
       value={index} >X</a>
      <div>
      <span dangerouslySetInnerHTML={this.textToLink(comment.comment)}  />
      </div>
      </div>
      </div>
)
}.bind(this));
  return(
   <div id="commnetsFeed"  >
      {comments}
     </div>
  );
  }
});


CommentForm Component
Comment form template, it HTML form contains textarea and submit button.
var CommentForm=React.createClass({
  render: function(){
  return(
    <div className="feedCommentForm" >
    <form >
    <textarea className="commentInput" ></textarea>
    <input type="submit" value="Comment" className="commentSubmit"/>
    </form>
    </div>
    )
  }
});

Demo Step 6

React Toggle Implementation
Here we are going to implement toggle system for comment form, based on the comment link click action.

CommentBlock Component
Go to CommentBlock and include following functions. Here CommentLink function changing the showComment default value from false to true, renderCommentForm operates the CommentForm component based on showComment value.
commentLink: function()
{
  this.setState({ showComment: !this.state.showComment });
  this.renderCommentForm();
},
renderCommentForm: function()
{
    if(this.state.showComment)
    {
    return (<CommentForm/>)
    }
}

Now modify the CommentBlock render template, applying onClick event to the Comment hyperlink.
<div>
<div className="feedLinks">
<a href="#">Comment</a></div>
<CommentsGrid dataComments={this.state.dataComments} />
<CommentForm/>
</div>

to

<div>
<div className="feedLinks">
<a href="#"  onClick={this.commentLink}>Comment</a></div>
<CommentsGrid dataComments={this.state.dataComments} />
{this.renderCommentForm()}
</div>


Demo Step 7


Comment Submit Ajax Function
Include this at CommentBlock component.
commentAjaxSubmit: function(dataComment)
{
  var update_id=this.props.updateID;
  var reactThis=this;
  var data='updateID='+update_id+'&user_comment='+dataComment.user_comment;
  var  reactThis=this;
  ajaxPostReact('updateComment.php', data, reactThis, function(data){
      var comments = reactThis.state.dataComments;
      var newComments = comments.concat([data.comments[0]]);
      reactThis.setState({dataComments: newComments});
  });
},a\

Now apply onCommentSubmit attribute for CommentForm in renderCommentForm function return value.
return (<CommentForm/>)
to
return (<CommentForm onCommentSubmit={this.commentAjaxSubmit} />)

Submit Comment Form
This is almost like WallForm component implementation.
var CommentForm=React.createClass({
  getInitialState: function(){
  return { user_comment: ''};
  },
  commentChange: function(e){
  this.setState({user_comment: e.target.value });
  },
  commentSubmit: function(e){
  e.preventDefault();
  var user_comment= this.state.user_comment.trim();
  if(!user_comment)
  {
  return;
  }
  else
  {
  this.props.onCommentSubmit({ user_comment: user_comment});
  this.setState({ user_comment:''});
  }
  },
  componentDidMount: function(){
    ReactDOM.findDOMNode(this.refs.commentInput).focus();
  },
  render: function(){
  return(
        <div className="feedCommentForm" >
        <form onSubmit={this.commentSubmit} >
        <textarea className="commentInput" onChange={this.commentChange}  
        value={this.state.user_comment} ref="commentInput">
        </textarea>
        <input type="submit" value="Comment" className="commentSubmit"/>
        </form>
        </div>
    )
  }
});

Demo Step 8

Delete Comment
Include this function at CommentBlock level.
deleteComment: function(e)
{
  e.preventDefault();
  var commentIndex=e.target.getAttribute('value');
  var com_id=e.target.getAttribute('data');
  var update_id=this.props.updateID;
  var reactThis=this;
  var data='updateID='+update_id+'&commentID='+com_id;
  ajaxPostReact('deleteComment.php', data , reactThis, function(data){
      reactThis.state.dataComments.splice(commentIndex,1);
      reactThis.setState({dataComments: reactThis.state.dataComments});
  });
},

Apply deleteComment function to the CommentsGrid component
<CommentsGrid dataComments={this.state.dataComments} />

to

<CommentsGrid dataComments={this.state.dataComments} deleteComment={this.deleteComment}/>


Apply onClick event call deleteComment function using this.props
<a href="#"  data={comment.com_id} className="commetDelete" value={index} >X</a>
to
<a href="#"  data={comment.com_id} className="commetDelete"  value={index}
onClick={this.props.deleteComment} >X</a>


Demo Step 9

Social Network System with React JS Part One

web notification

15 comments:

  1. I am interested in comparing angular 2 and reactjs...

    Can provide a link or ur valuable thoughts in deciding which one is the better Js framework

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi, nice example... ;)

    But if my comment have 2 lines (or more) this comment is not added.

    ReplyDelete
    Replies
    1. Can you explain more about this issue.

      Delete
    2. If I write to comment example this:

      Hi, this is first line.
      And this is second line.

      And if I clicked to comment button, the comment is not added.

      Delete
    3. Fixed, issue with my server side file.

      Delete
  4. Thank you for this awesome work, I really appreciate your tutorials! :) Just a question, Can you make it to update automatically? Like a user doesn't have to refresh his/her browser to see what's new.

    ReplyDelete
  5. It's excellent tips. It working well on testing purpose.

    ReplyDelete
  6. I found this blog in a list of top earning blog in India. but now i am sure it is. This blog deserve it. Nice tips

    ReplyDelete
  7. Just one question, where they store message! is not store in database, but where store the message!

    ReplyDelete
    Replies
    1. Demo is connected to database, try download the script you will understand the database API connections.

      Delete
  8. Its great to know about this. Thanks for sharing

    ReplyDelete
  9. Is it different from the simple jQuery codes to doing the same function????

    ReplyDelete

mailxengine Youtueb channel
Make in India
X