Start working on using ReactJS to reply to comments

social/comments.py

@@ -110,7 +110,7 @@ def post(request, url):
     return HttpResponseRedirect('/dashboard/')
 
 @login_required
-def reply(request, url, comment_id):
+def reply(request, comment_id):
     user = request.user
     prof = get_object_or_404(UserProfile, url=url)
     other_user = prof.user

social/static/js/comment.js

@@ -1,3 +1,30 @@
+var CommentForm = React.createClass({
+	getInitialState: function() {
+		return {text: ''};
+	},
+	handleTextChange: function(e) {
+		this.setState({text: e.target.value});
+	},
+	handleSubmit: function(e) {
+		e.preventDefault();
+		var text = this.state.text.trim();
+		if (!text) {
+			return;
+		}
+		this.props.onCommentSubmit({text: text});
+		this.setState({text: ''});
+	},
+
+	render: function() {
+		return (
+			<form className="commentForm" onSubmit={this.handleSubmit}>
+				<input className="form-control" type="text" value={this.state.text} onChange={this.handleTextChange} />
+				<input className="btn btn-primary btns-sm" type="submit" value="Reply" />
+			</form>
+		);
+	}
+});
+
 var CommentBox = React.createClass({displayName: 'CommentBox',
 	getInitialState: function() {
 		return {data: []};
@@ -18,15 +45,15 @@ var CommentBox = React.createClass({displayName: 'CommentBox',
 	},
 
 	componentDidMount: function() {
-    this.loadCommentsFromServer();
-    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
-  },
+		this.loadCommentsFromServer();
+		setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+	},
 
 	render: function() {
 		return (
 			<div class="commentBox">
 				<h2>Comments</h2>
-				<CommentList data={this.state.data} />
+				<CommentList url={this.props.url} data={this.state.data} />
 			</div>
 		)
 	}
@@ -51,6 +78,20 @@ var CommentList = React.createClass({
 });
 
 var SubcommentList = React.createClass({
+	handleCommentSubmit: function(comment) {
+		$.ajax({
+			url: "/comment/"+comment.id+"/reply",
+			dataType: 'json',
+			type: 'POST',
+			data: comment,
+			success: function(data) {
+				this.setState({data: data});
+			}.bind(this),
+			error: function(xhr, status, err) {
+				console.error(this.props.url, status, err.toString());
+			}.bind(this)
+		});
+	},
 	render: function() {
 		var commentNodes = this.props.data.map(function(comment) {
 			return (
@@ -62,6 +103,7 @@ var SubcommentList = React.createClass({
 		return (
 			<div className="commentList">
 				{commentNodes}
+				<CommentForm onCommentSubmit={this.handleCommentSubmit}/>
 			</div>
 		)
 	}

social/templates/profile/comment.html

@@ -14,7 +14,7 @@
         {% endfor %}
         <a class="btn btn-primary btn-sm" href="javascript:showSubcommentForm('{{ c.id }}', '{{ c.author.userprofile.url }}')">Reply</a>
         {% if c in user.userprofile.comments.all or user == c.author %}
-            <a class="btn btn-default btn-sm" href="{% url 'comment_delete' user.userprofile.url c.id %}">Delete</a>
+            <a class="btn btn-default btn-sm" href="{% url 'comment_delete' c.id %}">Delete</a>
         {% endif %}
     </div>
 </div>

social/templates/profile/profile.html

@@ -47,10 +47,8 @@ <h3>Comments</h3>
     {% endif %}
     <br/>
 
-    {% for c in other_user.userprofile.comments.all %}
-        {% if c.public or user == other_user or user in other_user.userprofile.friends.all %}
-            {% include "profile/comment.html" %}
-        {% endif %}
-    {% endfor %}
+    {% load staticfiles %}
+    <div id="comments"></div>
+    <script type="text/babel" src="{% static 'js/comment.js' %}"></script>
 {% endblock %}
 

social/urls.py

@@ -24,8 +24,8 @@
 	url(r'^settings/friends/group/(?P<id>\d+)/edit/$', views.edit_group, name='edit_group'),
 	url(r'^settings/friends/group/set_order/$', views.sort_group, name='sort_group'),
 	url(r'^profile/(?P<url>\w+)/subscribe/$', views.subscribe, name='subscribe'),
-	url(r'^profile/(?P<url>\w+)/comment/(?P<comment_id>\d+)/reply/$', comments.reply, name='comment_reply'),
-	url(r'^profile/(?P<url>\w+)/comment/(?P<comment_id>\d+)/delete/$', comments.delete, name='comment_delete'),
+	url(r'^comment/(?P<comment_id>\d+)/reply/$', comments.reply, name='comment_reply'),
+	url(r'^comment/(?P<comment_id>\d+)/delete/$', comments.delete, name='comment_delete'),
 	url(r'^profile/(?P<url>\w+)/friends/$', views.view_friends, name='view_friends'),
 	url(r'^profile/(?P<url>\w+)/albums/create/$', images.create_album, name='create_album'),
 	url(r'^profile/(?P<url>\w+)/albums/(?P<album_id>\d+)/$', images.album, name='album'),