Episode completed

Next epsiode starting in 3 seconds

Published at


You can write comments for posts now, but they are displayed seemingly random. Also, we have no way of deleting or editing a comment. The fixes for that are pretty easy. To sort comments by creation, we once again need to add a createdAt field in the schema editor. To sort comments by creation time, we can use this intimidating line. This statement takes a list and modifies it with this statement. Then, the pure returns that modified list and writes it to the query we are running. This way, the fetchRelated function gets our sorted comments. The dot does the same as brackets around the rest of the line. Not so intimidating now. And that’s it. We can create comments now, with the latest being at the top. But we still can’t edit or delete comments. To fix that, we can add buttons with the corresponding actions to the renderComment function. To make the buttons blend in and not stand out, let’s use the text-secondary class from bootstrap. This will give the link a muted look. To give the Buttons a function, we just need to add the Action to the hypertext reference of the link. Note, that buttons with DeleteActions need the js-delete class. This shows a deletion warning, which sends a delete request when you confirm it. Now we have working edit and delete buttons, but they are stuck together and too far away from the actual comment. To fix the general design of the comments let’s add some bootstrap classes for margin, padding, a border and shadows. When we try to edit a comment it’s apparent we did not adjust the edit view and the edit controller for the comments, so let’s hide the postId field and change the redirect action to show the post again. The same thing happens with the delete button, so let’s adjust the DeleteCommentAction to also redirect back to the post after deleting a comment. Now our comments are rendered nicely and have edit and delete buttons.