Nesting of comments in view, disabling comment form display button on button click

app.js

@@ -303,17 +303,22 @@ app.get(
 );
 
 app.post(
-    '/stories/comment/submit',
+    '/stories/comment/',
     storyController.commentSubmit
 );
 
+app.post(
+    '/stories/comment/:id/comment',
+    storyController.commentOnCommentSubmit
+);
+
 app.get(
     '/stories/submit',
     storyController.submitNew
 );
 
 app.post(
-    '/stories/submit',
+    '/stories/',
     storyController.storySubmission
 );
 

controllers/story.js

@@ -183,15 +183,36 @@ exports.commentSubmit = function(req, res, next) {
         rank: 0,
         upvotes: 0,
         author: data.author,
-        comments: []
+        comments: [],
+        topLevel: true
     });
+    commentSave(comment, Story, res);
+};
 
+exports.commentOnCommentSubmit = function(req, res, next) {
+    var idToFind = req.params.id;
+    debug('idToFind', idToFind);
+    var data = req.body.data;
+    var comment = new Comment({
+        associatedPost: data.associatedPost,
+        body: data.body,
+        rank: 0,
+        upvotes: 0,
+        author: data.author,
+        comments: [],
+        topLevel: false
+    });
+    commentSave(comment, Comment, res);
+};
+
+function commentSave(comment, Context, res) {
     comment.save(function(err, data) {
         if (err) {
             return res.status(500);
         }
         debug('this is data from save', data);
-        Story.find({'_id': comment.associatedPost}, function(err, associatedStory) {
+        try {
+            Context.find({'_id': comment.associatedPost}, function (err, associatedStory) {
                 if (err) {
                     return res.status(500);
                 }
@@ -206,5 +227,9 @@ exports.commentSubmit = function(req, res, next) {
                     });
                 }
             });
+        } catch (e) {
+            // delete comment
+            return res.status(500);
+        }
     });
-};
+}

models/Comment.js

@@ -22,6 +22,10 @@ var commentSchema = new mongoose.Schema({
     comments: {
         type: Array,
         default: []
+    },
+    toplevel: {
+        type: Boolean,
+        default: false
     }
 });
 

public/js/main.js

@@ -158,7 +158,7 @@ $(document).ready(function() {
             upVotedByUsername: user.profile.username
         };
         $('#story-submit').unbind('click');
-        $.post('/stories/submit',
+        $.post('/stories/',
             {
                 data: {
                     link: link,
@@ -192,7 +192,7 @@ $(document).ready(function() {
         var data = $('#comment-box').val();
 
         $('#comment-button').unbind('click');
-        $.post('/stories/comment/submit',
+        $.post('/stories/comment/',
             {
                 data: {
                     associatedPost: storyId,

seed_data/comments.json

@@ -9,6 +9,7 @@
       "picture": "https://thedrinkingtraveler.files.wordpress.com/2015/02/24127-funny-grumpy-cat-memesvery-bad-morning-meme-0rlh4r5c-wallpaper-1024x1024.jpg",
       "id" : "ade671aa0756dc61bd485f45"
     },
-    "comments": []
+    "comments": [],
+    "topLevel": true
   }
 ]

views/stories/comments.jade

@@ -1,13 +1,15 @@
-p.text-left
+.text-left
     div#comment-list.comment-list
 
         script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
         script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js")
         script.
             var sentinel = 0;
+            var renderComments = function renderComments(comments, containerSelector, level) {
                 var commentDetails;
+                var offSetClass = level ? 'col-xs-offset-' + level : '';
+                var rowClass = level ? 'col-xs-' + (12 - level) : 'col-xs-12';
                 R.forEach(function displayComments(comment) {
-                console.log('this is the comment id', comment);
                     $.ajax({
                         type: 'GET',
                         url: '/stories/comments/' + comment,
@@ -19,12 +21,10 @@ p.text-left
                             }
                         },
                         success: function (data, textStatus, xhr) {
-                        console.log(data);
                             commentDetails = data;
                             var div = document.createElement('div');
                             $(div)
-                                .html("<p>" +
+                                    .html(
-                                        "<div class='row col-xs-12'>" +
                                     "<div class='col-xs-2 text-center'>" +
                                     "<div class='row'>" +
                                     "<div class='col-xs-12'>" +
@@ -56,30 +56,69 @@ p.text-left
                                     "<button id='" + commentDetails._id + "'>This is the world's best button</button>" +
                                     "</div>" +
                                     "</div>" +
-                                            "</div>" +
+                                    "</div>"
-                                        "</div>" +
+                            )
-                                    "</p>" +
+                                    .addClass('comment row ' + offSetClass + ' ' + rowClass + ' comment_' + commentDetails._id)
-                                "</div>")
+                                    .appendTo($(containerSelector));
-                                .appendTo($('#comment-list'));
+
+                            sentinel += commentDetails.comments.length;
+
+                            renderComments(commentDetails.comments, '.comment_' + commentDetails._id, ++level);
 
                         },
                         complete: function () {
-                        sentinel++;
+                            sentinel--;
-                        console.log(sentinel, comments.length);
+                            if (!sentinel) {
-                        if (sentinel < comments.length) {
+                                console.log('Binding click handler');
-                            return;
-                        }
                                 $('.comment-a-comment').on('click', 'button', function () {
-                            console.log('clicked');
+                                    $(this).attr('disabled', 'disabled');
-                            console.log($(this));
+                                    console.log('Unbinding click handler');
-                        });
+
+                                    var div = document.createElement('div');
+                                    var commentId = $(this).attr('id');
+                                    $(div).html(
+                                            "<textarea id='comment-to-comment-textarea'></textarea>" +
+                                            "<button id='submit-comment-to-comment'>Submit it sucka</button>"
+                                    )
+                                            .addClass('col-xs-6 col-xs-offset-3')
+                                            .appendTo($(this).closest('.comment'));
+                                    var submitCommentToCommentHandler = function submitCommentToCommentHandler() {
+                                        $('#submit-comment-to-comment').unbind('click');
+                                        $.post('/stories/comment/' + commentId + '/comment',
+                                                {
+                                                    data: {
+                                                        associatedPost: commentId,
+                                                        body: $('#comment-to-comment-textarea').val(),
+                                                        author: {
+                                                            picture: user.profile.picture,
+                                                            userId: user._id,
+                                                            username: user.profile.username
                                                         }
+                                                    }
+                                                })
+                                                .fail(function (xhr, textStatus, errorThrown) {
+                                                    $('#submit-comment-to-comment').bind('click', submitCommentToCommentHandler);
+                                                })
+                                                .done(function (data, textStatus, xhr) {
+                                                    //window.location = '/stories/' + JSON.parse(data).storyLink;
+                                                });
 
+                                    };
 
+                                    $('#submit-comment-to-comment').on('click', submitCommentToCommentHandler);
+                                });//
+                            }
+                        }
                     })
 
 
                 }, comments);
+            }
+            sentinel += comments.length;
+
+            renderComments(comments, $('#comment-list'), 0);
+
+