diff --git a/readme.md b/readme.md index 24a1fec..d9f6db6 100644 --- a/readme.md +++ b/readme.md @@ -1,3 +1,151 @@ -# YelpCamp +# Collapsible Comment Section Upgrade -### Refactored by Ian Schoonover +![Comment Section Screenshot](https://i.imgur.com/qZZJxNX.png) + +This tutorial uses technologies that we've learned in the course to make an upgraded comment section with collapsible new comment and edit comment forms on the campground's show page. + +To make the tutorial as straightforward as possible, all the changes are made only to the show.ejs file. But, do make sure that jQuery and Bootstrap JS script elements are included in your [views/partials/footer.ejs](https://github.com/fewsion/yelp-camp-refactored/blob/comment-section/views/partials/footer.ejs). + +### Markup +- Open the `views/campgrounds/show.ejs` page file and edit the comment section code to look like the following: + +``` + +
+ +
+ +
+``` + +- For starters, we will place all our content inside of a div element with the Bootstrap class of 'well'. +- After that, we are adding the 'Add new comment button' code, which will have the ability to collapse the new comment form. + +``` + +

Comments

+ + +
+
+ <% if(!currentUser) { %> + +
You need to login before you can comment. Click here to go to the login page.
+ <% } %> + <% if(currentUser) { %> + +

Write your comment

+
+
+ +
+
+ +
+
+ +
+
+ <% } %> +
+
+ +``` + +- The comment section title is added via an h4 element. +- After, the new comment form is added which is a familiar piece of code from our `views/campgrounds/new.ejs`. +- We also make a check if the user is logged in before showing the form. + +``` +
+ + + <% if (campground.comments.length === 0) { %> + No comments yet. + <% } %> + + + <% campground.comments.forEach(function(comment) { %> +
+
+ + <% if (currentUser && currentUser._id.equals(comment.author.id)) { %> + + + <% } else { %> + + + <% } %> + + <%= comment.author.username %> + + + + <%= moment(comment.createdAt).fromNow() %> + + +

<%= comment.text %>

+ + + <% if (currentUser && currentUser._id.equals(comment.author.id)) { %> +``` + +- In the above part of the code, we are dealing with showing the existing comments. +- First, we check if the campground has any comments - if it doesn't, we make our page say: `No comments yet`. +- After, we write a forEach loop similar to the one that we've had before, to print all the comments. +- We also add some small details, like changing the user icon color if the current user owns a particular comment. +- If you haven't still implemented Moment.js in your code, please see [Ian's tutorial on how to implement it.](http://slides.com/nax3t/yelpcamp-refactor-moment#/) + +``` + + + + +
+ +
+ + +
+
+

Edit your comment

+
+
+ +
+
+ +
+
+ +
+
+
+
+ <% } %> +
+
+
+ <% }) %> +
+ +``` + +- We end the comment section refactor by adding the edit comment and delete comment buttons. +- Also, we add the edit comment form (familiar from `views/campgrounds/edit.ejs` which is collapsible when the comment owner presses the edit comment button. + +- The tricky part worth mentioning here was the bug that happened when there were multiple comments that the current user owns: +- The problem was that the connection of the collapsible content and the button is made by an id. +- A collapse bug would happen because there would be multiple elements with the same id that triggers it, and the collapse button wouldn't work. +- It's also against the rules to use id more than once in a page as we know, so I used the power of EJS and this nifty trick to make each `id` attribute unique for the edit comment collapsible forms (more precisely, the parent div element holding the form): + +`
` + +- Now we are generating an id attribute based on the comment._id field from MongoDB, which will ensure it's uniqueness. + +# And that would be it! +Now we have a new comment section with some smooth collapsible create/edit forms. I tried to keep all the code inside this one file, but feel free to refactor the code further and put the CSS styles in it's own file, for example. + +[Click here](https://github.com/fewsion/yelp-camp-refactored/blob/comment-section/views/campgrounds/show.ejs) to see the full, updated `views/campgrounds/show.ejs` file. diff --git a/views/campgrounds/show.ejs b/views/campgrounds/show.ejs index 8112757..60e062e 100644 --- a/views/campgrounds/show.ejs +++ b/views/campgrounds/show.ejs @@ -21,69 +21,146 @@

Submitted by: <%= campground.author.username %>, <%= moment(campground.createdAt).fromNow() %>

- <% if(currentUser && campground.author.id.equals(currentUser._id) || currentUser && currentUser.isAdmin){ %> + <% if(currentUser && campground.author.id.equals(currentUser._id) || currentUser && currentUser.isAdmin){ %> Edit
- <% } %> + <% } %>
+ +
+
- Add New Comment +
+ + +

Comments

+ + +
+
+ <% if(!currentUser) { %> + +
You need to login before you can comment. Click here to go to the login page.
+ <% } %> + <% if(currentUser) { %> + +

Write your comment

+
+
+ +
+
+ +
+
+ +
+
+ <% } %> +
+
+ +
- <% campground.comments.forEach(function(comment){ %> + + + <% if (campground.comments.length === 0) { %> + No comments yet. + <% } %> + + + <% campground.comments.forEach(function(comment) { %>
- <%= comment.author.username %> + + <% if (currentUser && currentUser._id.equals(comment.author.id)) { %> + + + <% } else { %> + + + <% } %> + + <%= comment.author.username %> + + + <%= moment(comment.createdAt).fromNow() %> -
- <%= comment.text %> - <% if(currentUser && comment.author.id.equals(currentUser._id) || currentUser && currentUser.isAdmin){ %> -
- EDIT -
- + +

<%= comment.text %>

+ + + <% if (currentUser && currentUser._id.equals(comment.author.id)) { %> + + + + + + + +
+ + +
+
+

Edit your comment

+
+
+ +
+
+ +
+
+ +
- <% } %> +
+ <% } %>
+ <% }) %>
- <% }) %> + +
- <% include ../partials/footer %> \ No newline at end of file