Wall Comment System with React JS Part Two

Datetime:2016-08-23 00:11:12          Topic: React  JavaScript           Share

This post is continuation of React JSprevious 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.

I personally, would suggest every web developer to learn React andAngular 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 theprevious part, 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.

varCommentBlock=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>
          <CommentsGriddataComments={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.

varCommentsGrid=React.createClass({
 textToLinkHTML: function(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>
       <spandangerouslySetInnerHTML={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>
     )
   }
 });

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>
 <CommentsGriddataComments={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>

Comment Submit Ajax Function

Include this at CommentBlock component.

commentAjaxSubmit: function(dataComment)
 {
   varupdate_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){
       varcomments = reactThis.state.dataComments;
       varnewComments = 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 (<CommentFormonCommentSubmit={this.commentAjaxSubmit} />)

Submit Comment Form

This is almost like WallForm component implementation.

varCommentForm=React.createClass({
   getInitialState: function(){
   return { user_comment: ''};
   },
   commentChange: function(e){
   this.setState({user_comment: e.target.value });
   },
   commentSubmit: function(e){
   e.preventDefault();
   varuser_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>
     )
   }
 });

Delete Comment

Include this function at CommentBlock level.

deleteComment: function(e)
 {
   e.preventDefault();
   varcommentIndex=e.target.getAttribute('value');
   varcom_id=e.target.getAttribute('data');
   varupdate_id=this.props.updateID;
   varreactThis=this;
   vardata='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

<CommentsGriddataComments={this.state.dataComments} />
 
 to
 
 <CommentsGriddataComments={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>

Social Network System with React JS Part One

Thanks! Your feedback helps us to improve 9lessons.info





About List