Week 11: YelpCamp Comments

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.

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.

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.

we clicked on Cloud’s Rest

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.

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) {
res.render(“comments/new”);
})

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){
If(err){
Console.log(err)
res.redirect(“/campgrounds”)
} else {
Comment.create(req.body.comment, function(err, comment))  
If(err) {
Console.log(err);
} else { 
campgrounds.comments.push(comment)
campground.save();
res.redirect(“/campgrounds/” + campground._id); 
});

YelpCamp: Styling Comments

This is our current progress on this project.

This is the end goal