Cover image for Week 11: YelpCamp Comments

Week 11: YelpCamp Comments

code_regina profile image Regina ・3 min read

This week was Yelp Camp Comments from Colt Steele The Web Developer Bootcamp.

   -YelpCamp: Refactoring App.js 
   -YelpCamp: Seeding the Database 
   -YelpCamp: Comment Model 
   -YelpCamp: Creating Comments 
   -YelpCamp: Styling Comments  

Because there is a lot going on within the project, I tried to reduce the complexity by including snapshot from the video series. I omitted a lot of code for this post.

YelpCamp: Refactoring app.js

The three main steps to refactoring our current code base is:
Create a models directory
Use module.exports
Require everything correctly

To refactor, we need to push this campground schema into a separate model directory that will pave the way for us to do the same with our other models such as user and comment for future iterations.

var campgroundSchema = new mongoose.Schema({
    name: String, 
    image: String, 
    description: String

Var Campground = mongoose.model(Campground, campgroundSchema); 

YelpCamp: Seeding the Database

For our current code base, we have a list of all the campgrounds that do not have the comment section that we need as well as a section to accept new reviews from future users.
Therefore we must create a comment section that will list all the comments or reviews for each campground site for the user to read.
We need to create a comment model and then associate with the campground model. We must require all the files correctly, then we have to create all the routes then we have to create all the views.
But first, we must start by creating a seed file. A seed file can seed information into our database with data.

Alt Text

Currently, we have four campgrounds in the database.
We need to write a file that will run and empty everything in the database to start then it will go and add in three or four campgrounds and each one will have a few comments. So that we will have some sample data to work with.

YelpCamp: Comment Model

Error driven development is when you write some code that we want to work but we get an error and then we write some more code to make that error go away and then we keep doing that until all the errors have been fixed.

Alt Text

YelpCamp: Creating Comments

Create the comment file

Var mongoose = require(mongoose); 

Var commentSchema = mongoose.Schema({
    Text: String,
     Author: String
Module.exports = mongoose.model(Comment, commentSchema); 

Comment creation functionality

Three main objectives:
-Discuss nested routes
-Add the comment new and create routes
-Add the new comment form
Here is a snapshot from the course video series of what we have currently in the project.

Alt Text

we clicked on Cloud’s Rest
Alt Text

We still need to add a button to submit new comments or leave review. Then we will go to a new page that shows a form and then on that form we could submit a new comment with an author name and some text and hit submit and then it would take us back here where we will see the new comment.
To get to that point, we need to learn about nested routes.

Alt Text

This is a snapshot of a review of the restful routes.
INDEX /campgrounds
NEW /campgrounds/new
CREATE /campgrounds
SHOW /campgrounds/:id

We can take restful routes and combine them.
NEW campgrounds/:id/comments/new GET
CREATE campgrounds/:id/comments POST
Comments are dependent on the campground. We don’t want comments that exist away from campgrounds.
The comments are linked to the campgrounds.
We are going to make a comment and then associate it with that campground.

These are the comment routes

app.get(/campgrounds/:id/comments/new, function(req, res) {

Now we need to set up the post route where we can submit the form to.
Functionality of the post route is to lookup campground using ID, create new comment, connect new comment to campground, redirect campground show page.

App.post(/campgrounds/:id/comments, function(req, res){
Campground.findByID(req.params.id, function(err, campground){
} else {
Comment.create(req.body.comment, function(err, comment))  
If(err) {
} else { 
res.redirect(/campgrounds/ + campground._id); 

Alt Text

YelpCamp: Styling Comments

This is our current progress on this project.

Alt Text

This is the end goal

Alt Text

Alt Text

Posted on by:

code_regina profile



I am currently documenting my journey with Colt Steele Web Developer Bootcamp to become a software developer. My end goal is to contribute to open-source projects to advance the software community.


markdown guide