Nesting of comments in view, disabling comment form display button on button click
This commit is contained in:
9
app.js
9
app.js
@ -303,17 +303,22 @@ app.get(
|
|||||||
);
|
);
|
||||||
|
|
||||||
app.post(
|
app.post(
|
||||||
'/stories/comment/submit',
|
'/stories/comment/',
|
||||||
storyController.commentSubmit
|
storyController.commentSubmit
|
||||||
);
|
);
|
||||||
|
|
||||||
|
app.post(
|
||||||
|
'/stories/comment/:id/comment',
|
||||||
|
storyController.commentOnCommentSubmit
|
||||||
|
);
|
||||||
|
|
||||||
app.get(
|
app.get(
|
||||||
'/stories/submit',
|
'/stories/submit',
|
||||||
storyController.submitNew
|
storyController.submitNew
|
||||||
);
|
);
|
||||||
|
|
||||||
app.post(
|
app.post(
|
||||||
'/stories/submit',
|
'/stories/',
|
||||||
storyController.storySubmission
|
storyController.storySubmission
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -183,22 +183,43 @@ exports.commentSubmit = function(req, res, next) {
|
|||||||
rank: 0,
|
rank: 0,
|
||||||
upvotes: 0,
|
upvotes: 0,
|
||||||
author: data.author,
|
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) {
|
comment.save(function(err, data) {
|
||||||
if (err) {
|
if (err) {
|
||||||
return res.status(500);
|
return res.status(500);
|
||||||
}
|
}
|
||||||
debug('this is data from save', data);
|
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) {
|
if (err) {
|
||||||
return res.status(500);
|
return res.status(500);
|
||||||
}
|
}
|
||||||
associatedStory = associatedStory.pop();
|
associatedStory = associatedStory.pop();
|
||||||
if (associatedStory) {
|
if (associatedStory) {
|
||||||
associatedStory.comments.push(data._id);
|
associatedStory.comments.push(data._id);
|
||||||
associatedStory.save(function(err, data) {
|
associatedStory.save(function (err, data) {
|
||||||
if (err) {
|
if (err) {
|
||||||
res.status(500);
|
res.status(500);
|
||||||
}
|
}
|
||||||
@ -206,5 +227,9 @@ exports.commentSubmit = function(req, res, next) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// delete comment
|
||||||
|
return res.status(500);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
@ -22,6 +22,10 @@ var commentSchema = new mongoose.Schema({
|
|||||||
comments: {
|
comments: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: []
|
default: []
|
||||||
|
},
|
||||||
|
toplevel: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -158,7 +158,7 @@ $(document).ready(function() {
|
|||||||
upVotedByUsername: user.profile.username
|
upVotedByUsername: user.profile.username
|
||||||
};
|
};
|
||||||
$('#story-submit').unbind('click');
|
$('#story-submit').unbind('click');
|
||||||
$.post('/stories/submit',
|
$.post('/stories/',
|
||||||
{
|
{
|
||||||
data: {
|
data: {
|
||||||
link: link,
|
link: link,
|
||||||
@ -192,7 +192,7 @@ $(document).ready(function() {
|
|||||||
var data = $('#comment-box').val();
|
var data = $('#comment-box').val();
|
||||||
|
|
||||||
$('#comment-button').unbind('click');
|
$('#comment-button').unbind('click');
|
||||||
$.post('/stories/comment/submit',
|
$.post('/stories/comment/',
|
||||||
{
|
{
|
||||||
data: {
|
data: {
|
||||||
associatedPost: storyId,
|
associatedPost: storyId,
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
"picture": "https://thedrinkingtraveler.files.wordpress.com/2015/02/24127-funny-grumpy-cat-memesvery-bad-morning-meme-0rlh4r5c-wallpaper-1024x1024.jpg",
|
"picture": "https://thedrinkingtraveler.files.wordpress.com/2015/02/24127-funny-grumpy-cat-memesvery-bad-morning-meme-0rlh4r5c-wallpaper-1024x1024.jpg",
|
||||||
"id" : "ade671aa0756dc61bd485f45"
|
"id" : "ade671aa0756dc61bd485f45"
|
||||||
},
|
},
|
||||||
"comments": []
|
"comments": [],
|
||||||
|
"topLevel": true
|
||||||
}
|
}
|
||||||
]
|
]
|
@ -1,17 +1,19 @@
|
|||||||
p.text-left
|
.text-left
|
||||||
div#comment-list.comment-list
|
div#comment-list.comment-list
|
||||||
|
|
||||||
script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
|
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(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js")
|
||||||
script.
|
script.
|
||||||
var sentinel = 0;
|
var sentinel = 0;
|
||||||
|
var renderComments = function renderComments(comments, containerSelector, level) {
|
||||||
var commentDetails;
|
var commentDetails;
|
||||||
|
var offSetClass = level ? 'col-xs-offset-' + level : '';
|
||||||
|
var rowClass = level ? 'col-xs-' + (12 - level) : 'col-xs-12';
|
||||||
R.forEach(function displayComments(comment) {
|
R.forEach(function displayComments(comment) {
|
||||||
console.log('this is the comment id', comment);
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: '/stories/comments/' + comment,
|
url: '/stories/comments/' + comment,
|
||||||
error: function(xhr, textStatus, errorThrown) {
|
error: function (xhr, textStatus, errorThrown) {
|
||||||
console.log('got error');
|
console.log('got error');
|
||||||
commentDetails = {
|
commentDetails = {
|
||||||
error: true,
|
error: true,
|
||||||
@ -19,12 +21,10 @@ p.text-left
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
success: function (data, textStatus, xhr) {
|
success: function (data, textStatus, xhr) {
|
||||||
console.log(data);
|
|
||||||
commentDetails = data;
|
commentDetails = data;
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
$(div)
|
$(div)
|
||||||
.html("<p>" +
|
.html(
|
||||||
"<div class='row col-xs-12'>" +
|
|
||||||
"<div class='col-xs-2 text-center'>" +
|
"<div class='col-xs-2 text-center'>" +
|
||||||
"<div class='row'>" +
|
"<div class='row'>" +
|
||||||
"<div class='col-xs-12'>" +
|
"<div class='col-xs-12'>" +
|
||||||
@ -53,33 +53,72 @@ p.text-left
|
|||||||
"</div>" +
|
"</div>" +
|
||||||
"<div class='row'>" +
|
"<div class='row'>" +
|
||||||
"<div class='col-xs-6 comment-a-comment'>" +
|
"<div class='col-xs-6 comment-a-comment'>" +
|
||||||
"<button id='" + commentDetails._id +"'>This is the world's best button</button>" +
|
"<button id='" + commentDetails._id + "'>This is the world's best button</button>" +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
"</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() {
|
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 () {
|
||||||
|
$(this).attr('disabled', 'disabled');
|
||||||
|
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
|
||||||
}
|
}
|
||||||
$('.comment-a-comment').on('click', 'button', function() {
|
}
|
||||||
console.log('clicked');
|
})
|
||||||
console.log($(this));
|
.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);
|
}, comments);
|
||||||
|
}
|
||||||
|
sentinel += comments.length;
|
||||||
|
|
||||||
|
renderComments(comments, $('#comment-list'), 0);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user