-
Notifications
You must be signed in to change notification settings - Fork 271
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
new campground show comment section #4
Open
zarkomaslaric
wants to merge
11
commits into
nax3t:master
Choose a base branch
from
zarkomaslaric:comment-section
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
dacfe0d
add new comment section for campground show page
zarkomaslaric b0d51d3
Update readme.md
zarkomaslaric f0cc06c
Update readme.md
zarkomaslaric 9984e01
Update readme.md
zarkomaslaric 8b629c7
Update readme.md
zarkomaslaric bc348b9
Update readme.md
zarkomaslaric d32e534
Update readme.md
zarkomaslaric b19d8fc
Update readme.md
zarkomaslaric bbbec9b
Update readme.md
zarkomaslaric dd03479
Update readme.md
zarkomaslaric 21835e9
Fix comment update form
zarkomaslaric File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,151 @@ | ||
| # YelpCamp | ||
| # Collapsible Comment Section Upgrade | ||
|
|
||
| ### Refactored by Ian Schoonover | ||
|  | ||
|
|
||
| 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: | ||
|
|
||
| ``` | ||
| <!--COMMENT SECTION START--> | ||
| <div class="well"> | ||
| <!--Setting up the add new comment button that is used for collapsing--> | ||
| <div class="text-right"> | ||
| <a class="btn btn-success pull-right" role="button" data-toggle="collapse" href="#collapseComment" aria-expanded="false" aria-controls="collapseComment"> | ||
| <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add new comment</a> | ||
| </div> | ||
| ``` | ||
|
|
||
| - 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. | ||
|
|
||
| ``` | ||
| <!--Comment section title--> | ||
| <h4><strong>Comments <span class="glyphicon glyphicon glyphicon-comment" aria-hidden="true"></span></strong></h4> | ||
|
|
||
| <!--Collapse Add a comment form START--> | ||
| <div class="collapse" id="collapseComment"> | ||
| <div class="well" style="border-left: 5px solid #00C851;"> | ||
| <% if(!currentUser) { %> | ||
| <!--If the user is not logged in, direct him to the login page--> | ||
| <h5>You need to login before you can comment. <a href="/login">Click here</a> to go to the login page.</h5> | ||
| <% } %> | ||
| <% if(currentUser) { %> | ||
| <!--If the user is logged in, show the new comment form--> | ||
| <h4>Write your comment <span class="glyphicon glyphicon glyphicon-pencil" aria-hidden="true"></span></h4> | ||
| <form id="add-comment-form" action="/campgrounds/<%= campground._id %>/comments" method="POST"> | ||
| <div class="form-group"> | ||
| <input class="form-control" type="text" disabled value="<%= currentUser.username %>"> | ||
| </div> | ||
| <div class="form-group"> | ||
| <textarea class="form-control" name="comment[text]" placeholder="Write your comment..." form="add-comment-form" rows="5" cols="70"></textarea> | ||
| </div> | ||
| <div class="form-group"> | ||
| <button class="btn btn-success btn-sm">Comment <span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button> | ||
| </div> | ||
| </form> | ||
| <% } %> | ||
| </div> | ||
| </div> | ||
| <!--Collapse Add a comment form END--> | ||
| ``` | ||
|
|
||
| - 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. | ||
|
|
||
| ``` | ||
| <hr> | ||
|
|
||
| <!--Check if there are comments, if there are none say no comments.--> | ||
| <% if (campground.comments.length === 0) { %> | ||
| <em style="color: grey;">No comments yet.</em> | ||
| <% } %> | ||
|
|
||
| <!--Display comments by looping through them--> | ||
| <% campground.comments.forEach(function(comment) { %> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <strong> | ||
| <% if (currentUser && currentUser._id.equals(comment.author.id)) { %> | ||
| <!--If the current user owns the comment, change the color of the user icon--> | ||
| <span style="color: orange;" class="glyphicon glyphicon-user" aria-hidden="true"></span> | ||
| <% } else { %> | ||
| <!--Else just display it black--> | ||
| <span class="glyphicon glyphicon-user" aria-hidden="true"></span> | ||
| <% } %> | ||
| <!--Print out the author username--> | ||
| <%= comment.author.username %> | ||
| </strong> | ||
|
|
||
| <!--Show when the comment was made--> | ||
| <span class="pull-right"><%= moment(comment.createdAt).fromNow() %></span> | ||
|
|
||
| <!--Printing the comment--> | ||
| <p><%= comment.text %></p> | ||
|
|
||
| <!--If the visitor is logged in and the owner of the comment, show the edit and delete buttons--> | ||
| <% 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 button used for collapsing the edit comment form--> | ||
| <a class="btn btn-xs btn-warning" role="button" data-toggle="collapse" href="#collapseEdit<%= comment._id %>" aria-expanded="false" aria-controls="collapse<%= comment._id %>"> | ||
| Edit</a> | ||
|
|
||
| <!--Delete comment button--> | ||
| <form id="delete-form" action="/campgrounds/<%= campground._id %>/comments/<%= comment._id %>?_method=DELETE" method="POST" style="display: inline;"> | ||
| <button class="btn btn-xs btn-danger">Delete</button> | ||
| </form> | ||
|
|
||
| <!--Edit comment form--> | ||
| <div class="collapse" id="collapseEdit<%= comment._id %>"> | ||
| <div class="well" style="border-left: 5px solid #ffbb33; margin-top: 15px;"> | ||
| <h4>Edit your comment <span class="glyphicon glyphicon-edit" aria-hidden="true"></span></h4> | ||
| <form id="edit-comment-form<%= comment._id %>" action="/campgrounds/<%= campground._id %>/comments/<%= comment._id %>?_method=PUT" method="POST"> | ||
| <div class="form-group"> | ||
| <input class="form-control" type="text" disabled value="<%= currentUser.username %>"> | ||
| </div> | ||
| <div class="form-group"> | ||
| <textarea class="form-control" name="comment[text]" placeholder="Your comment text..." form="edit-comment-form<%= comment._id %>" rows="5" cols="70"><%= comment.text %></textarea> | ||
| </div> | ||
| <div class="form-group"> | ||
| <button class="btn btn-warning btn-sm">Edit comment <span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <% } %> | ||
| <hr> | ||
| </div> | ||
| </div> | ||
| <% }) %> | ||
| </div> | ||
| <!--COMMENT SECTION END--> | ||
| ``` | ||
|
|
||
| - 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): | ||
|
|
||
| `<div class="collapse" id="collapseEdit<%= comment._id %>">` | ||
|
|
||
| - 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. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.