Week 11: YelpCamp Comments
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-07-07 19:52:48

---
title: Week 11: YelpCamp Comments  
published: true
description: 
tags: javascript, webdev, codenewbie, beginners
---


####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.  
```javascript 
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](https://dev-to-uploads.s3.amazonaws.com/i/rm5cmdxpit0t2460apue.png)

 
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](https://dev-to-uploads.s3.amazonaws.com/i/u8kq88fv3r3n8j4t4mr6.png)


###YelpCamp: Creating Comments 
Create the comment file 
```javascript 

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](https://dev-to-uploads.s3.amazonaws.com/i/4wi0dl3sv9ju8k0on9l1.png)



we clicked on Cloud’s Rest 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2utzs98mhwf5lf9bw4v.png)


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](https://dev-to-uploads.s3.amazonaws.com/i/ceh5rtlx4dlbz94tkh52.png)



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 
```javascript 
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. 
```javascript 
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); 
});

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jqxzigrcc0afbmzvkc4y.png)






###YelpCamp: Styling Comments  
This is our current progress on this project. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j9g9388oi5plzst2tblm.png)





This is the end goal   
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ozsqau6a4jbngm614jew.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dm1jnrty7x5s7gofn1b4.png)