add a new recipe feature

Ghalia98 · Feb 15, 2022 · 0aee314 · 0aee314
1 parent fdb7a9c
commit 0aee314
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 90 deletions.
diff --git a/app.js b/app.js
@@ -41,6 +41,12 @@ app.use(
     })
 )
 
+app.use(function(req, res, next) {
+    res.locals.session = req.session;
+
+    next();
+});
+
 // end of session configuration
 
 // 👇 Start handling routes here
@@ -53,9 +59,6 @@ app.use("/recipe", recipes);
 const auth = require("./routes/auth");
 app.use("/auth", auth);
 
-const newRecipe = require("./routes/new-recipe");
-app.use("/", newRecipe);
-
 // ❗ To handle errors. Routes that don't exist or errors that you handle in specific routes
 require("./error-handling")(app);
 

diff --git a/db/index.js b/db/index.js
@@ -8,12 +8,12 @@ const mongoose = require("mongoose");
 const MONGO_URI = process.env.MONGODB_URI || "mongodb://localhost/recipe-app";
 
 mongoose
-  .connect(MONGO_URI)
-  .then((x) => {
-    console.log(
-      `Connected to Mongo! Database name: "${x.connections[0].name}"`
-    );
-  })
-  .catch((err) => {
-    console.error("Error connecting to mongo: ", err);
-  });
+    .connect(MONGO_URI)
+    .then((x) => {
+        console.log(
+            `Connected to Mongo! Database name: "${x.connections[0].name}"`
+        );
+    })
+    .catch((err) => {
+        console.error("Error connecting to mongo: ", err);
+    });
diff --git a/models/Recipe.js b/models/Recipe.js
@@ -5,6 +5,7 @@ const recipeSchema = new Schema({
         type: String,
         required: true
     },
+    description: String,
     source: String,
     cooktime: Number,
     servings: Number,

diff --git a/routes/auth.js b/routes/auth.js
@@ -10,9 +10,9 @@ router.get('/signup', (req, res, next) => {
 
 router.post('/signup', uploader.single('imageUrl'), (req, res, next) => {
     const { name, username, password, email, gender, age, city } = req.body
-    // res.send(req.body)
+        // res.send(req.body)
     const imageUrl = req.file.path
-    // is the password + 4 chars
+        // is the password + 4 chars
     console.log(req.file)
     if (password.length < 4) {
         res.render('signup', { message: 'Your password needs to be min 4 chars' })
@@ -33,7 +33,7 @@ router.post('/signup', uploader.single('imageUrl'), (req, res, next) => {
                 // and hash the password
                 const salt = bcrypt.genSaltSync()
                 const hash = bcrypt.hashSync(password, salt)
-                // create the user
+                    // create the user
                 User.create({ name, username, password: hash, email, gender, age, city, imageUrl })
                     .then(createdUser => {
                         console.log(createdUser)
@@ -61,7 +61,7 @@ router.post('/login', (req, res, next) => {
             if (bcrypt.compareSync(password, userFromDB.password)) {
                 console.log('authenticated')
                 req.session.user = userFromDB
-                // res.send(req.session.user)
+                    // res.send(req.session.user)
                 res.redirect('/profile')
             } else {
                 res.render('authentication/login', {

diff --git a/routes/index.js b/routes/index.js
@@ -4,27 +4,28 @@ const User = require("../models/User")
 
 /* GET home page */
 router.get("/", (req, res, next) => {
-    res.render("index");
-})
 
+    // render a view
+    res.render("index");
 
+})
 
 function loginCheck() {
-  return (req, res, next) => {
-    if (req.session.user) {
-      // then the user making the request is logged in
-      // therefore user can proceed
-      next()
-    } else {
-      res.redirect('/login')
+    return (req, res, next) => {
+        if (req.session.user) {
+            // then the user making the request is logged in
+            // therefore user can proceed
+            next()
+        } else {
+            res.redirect('/login')
+        }
     }
-  }
 
 }
 
 router.get('/profile', loginCheck(), (req, res, next) => {
-  const user = req.session.user
-  res.render('user/profile', { user })
+    const user = req.session.user
+    res.render('user/profile', { user })
 })
 
 module.exports = router;
diff --git a/routes/new-recipe.js b/routes/new-recipe.js
diff --git a/routes/recipes.js b/routes/recipes.js
@@ -3,16 +3,44 @@ const Recipe = require("../models/Recipe");
 const User = require("../models/User")
 
 
+//user want to add a new recipe
+router.get("/new", (req, res, next) => {
+    console.log(req.session);
+    // res.render("new-recipe");
+    User.find({})
+        .then(userfromDB => {
+            res.render('recipe/newRecipe', { userfromDB })
+        })
+        .catch(err => next(err))
+})
+
+router.post('/new', (req, res, next) => {
+    // get the values from request body. Create an object with keys.
+    const { url, name, description, source, cooktime, servings, calories, ingredients, instructions, tags } = req.body;
+    //create a new recipe in the db
+    Recipe.create({ url, name, description, source, cooktime, servings, calories, ingredients, instructions, tags })
+        .then(recipeFromDB => {
+            console.log(recipeFromDB)
+            res.redirect('/recipe/' + recipeFromDB._id)
+        })
+        .catch(err => {
+            console.log(err);
+            res.render('recipe/newRecipe')
+        })
+});
+
+
 router.get("/:id", (req, res, next) => {
 
     const id = req.params.id
-	console.log(id)
-	Recipe.findById(id)
-		.then(recipe => {
-			console.log(recipe)
-			res.render("../views/recipe/detail.hbs", {recipe: recipe})
-		})
-		.catch(err => next(err))
-  })
-
-  module.exports = router;
+    console.log(id)
+    Recipe.findById(id)
+        .then(recipe => {
+            console.log(recipe)
+            res.render("recipe/detail", { recipe: recipe })
+        })
+        .catch(err => next(err))
+})
+
+
+module.exports = router;
diff --git a/seed.js b/seed.js
@@ -1,6 +1,6 @@
 const mongoose = require('mongoose')
 require('dotenv').config()
-const connectionString = process.env.MONGO_URI || 'mongodb://localhost:27017/recipe-app'
+const connectionString = process.env.MONGODB_URI || 'mongodb://localhost:27017/recipe-app'
 console.log('this is the key: ', connectionString)
 mongoose.connect(connectionString)
     .then(db => console.log(`Connected to database ${db.connections[0].name}`))

diff --git a/views/authentication/login.hbs b/views/authentication/login.hbs
@@ -8,4 +8,4 @@
 {{#if message}}
 <p>{{message}}</p>
 {{/if}}
-</form>
+</form>
diff --git a/views/authentication/signup.hbs b/views/authentication/signup.hbs
@@ -42,4 +42,4 @@
 {{#if message}}
 <p>{{message}}</p>
 {{/if}}
-</form>
+</form>
diff --git a/views/index.hbs b/views/index.hbs
@@ -1,6 +1,13 @@
 
 {{!-- https://getbootstrap.com/docs/5.1/components/carousel/ --}}
 {{!-- https://blossomthemes.com/theme-demo/?theme=blossom-recipe --}}
+
+<div>
+    <form class="d-flex">
+        <input class="form-control me-2" type="search" placeholder="Search for recipes" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
+    </form>
+</div>
 <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Recipe 1"></button>

diff --git a/views/layout.hbs b/views/layout.hbs
@@ -36,7 +36,7 @@
                      </ul>
                         <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            {{#if true}}
-                              <a href="/new-recipe"><button class="btn btn-primary" type="button">Create a new recipe</button></a>
+                              <a href="/recipe/new"><button class="btn btn-primary" type="button">Create a new recipe</button></a>
                               <a href="/users"><button class="btn btn-primary" type="button">My profile</button></a>
                               <a href="/auth/login"><button class="btn btn-primary" type="button">Login</button></a>
                               <a href="/auth/signup"><button class="btn btn-primary" type="button">Signup</button></a>
@@ -45,12 +45,6 @@
                   </div>
                </div>
             </nav>
-            <div>
-               <form class="d-flex">
-                  <input class="form-control me-2" type="search" placeholder="Search for recipes" aria-label="Search">
-                  <button class="btn btn-outline-success" type="submit">Search</button>
-               </form>
-            </div>
          </div>
       </section>
 

diff --git a/views/partials.hbs b/views/partials.hbs
@@ -0,0 +1,42 @@
+
+{{!-- nav-bar --}}
+<section>
+    <div>
+        <button type="button" class="btn btn-elegant"><i class="far fa-user pr-2" aria-hidden="true"></i>User</button>
+        <button><a href="/login">Login</a></button>
+        <button><a href="/signup">Signup</a></button>
+        <button><a href="/new-recipe">Create a new recipe</a></button>
+    </div>
+    <h1>Fit & Food</h1>
+    <div>
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li>Recipes</li>
+                <li>Fun Facts about Food</li>
+                <li>Events</li>
+            </ul>
+        </nav>
+    </div>
+</section>
+
+<section>
+    {}
+</section>
+
+<section>
+    <p>Subscribe to receive recipes from over the world for FREE!</p>
+    <form action="">
+        <div class="row">
+            <div class="col">
+                <input type="text" class="form-control" name="subscribe-name" required="required" placeholder="Your name">
+            </div>
+            <div class="col">
+                <input type="text" class="form-control" name="subscribe-email" required="required" placeholder="Your email address">
+            </div>
+        </div>
+    </form>
+</section>
+<footer>
+    <p>Copyright {{getCurrentYear}}</p>
+</footer>
diff --git a/views/new-recipe.hbs → views/recipe/newRecipe.hbs b/views/new-recipe.hbs → views/recipe/newRecipe.hbs
@@ -2,41 +2,36 @@
 {{!-- https://getbootstrap.com/docs/5.0/layout/columns/ --}}
 {{!-- <p>Inspire others to cook your dish</p> --}}
 
-<form action="" class="col-6 justify-content-center">
+<form action="/recipe/new" class="col-6 justify-content-center" method="POST">
     <div class="input-group mb-3">
-        <input type="file" class="form-control">
+        <input type="file" class="form-control" name="url">
         <label class="input-group-text" for="recipe-image">Upload your recipe photo</label>
     </div>
     <div class="mb-3">
-        <label for="title" class="form-label">Title</label>
-        <input type="text" class="form-control" name="title" placeholder="Grandma's dumpling" required="required">
+        <label for="name" class="form-label">Name</label>
+        <input type="text" class="form-control" name="name" placeholder="Grandma's dumpling" required="required">
     </div>
     <div class="mb-3">
       <label for="description" class="form-label">Description</label>
       <textarea class="form-control" name="description" rows="3" placeholder="Introduce us about your recipe - who inspired it, who you cooked it for, on which occasion you cooked or why it's special... "></textarea>
     </div>
     <div class="mb-3">
-      <label for="origin" class="form-label">Origin</label>
-      <select class="form-control" name="origin">
-        <option></option>
-        <option></option>
-        <option></option>
-      </select>
+        <label for="source" class="form-label">Origin (optional)</label>
+        <input type="text" class="form-control" name="source" placeholder="get inspired from...">
+    </div>
+    <div class="mb-3">
+      <label for="cooktime" class="form-label">Cook time</label>
+      <input type="number" class="form-control" name="cooktime" placeholder="">
     </div>
     <div class="mb-3">
       <label for="servings" class="form-label">Servings</label>
-      <select class="form-control" name="serves">
-        <option>2 people</option>
-        <option>3 people</option>
-        <option>4 people</option>
-        <option>5 people and more</option>
-      </select>
+      <input type="number" class="form-control" name="servings" placeholder="">
     </div>
     <div class="mb-3">
-      <label for="cook-time" class="form-label">Cook time</label>
-      <input type="text" class="form-control" name="cook-time" placeholder="1hr30mins">
+      <label for="calories" class="form-label">Calories</label>
+      <input type="number" class="form-control" name="calories" placeholder="">
     </div>
-       <div class="mb-3">
+    <div class="mb-3">
       <label for="ingredients" class="form-label">Ingredients</label>
       <input type="text" class="form-control" name="ingredients" placeholder="250gr flour">
       <input type="text" class="form-control" name="ingredients" placeholder="100ml milk">
@@ -48,13 +43,19 @@
         <button class="btn btn-primary" type="button">Add more ingredients</button>
     </div>
     <div class="mb-3">
-      <label for="instruction" class="form-label">Instruction</label>
-      <textarea class="form-control" name="instruction" rows="3" placeholder="Step1"></textarea>
-      <textarea class="form-control" name="instruction" rows="3" placeholder="Step2"></textarea>
-      <textarea class="form-control" name="instruction" rows="3" placeholder="Step3"></textarea>
+      <label for="instructions" class="form-label">Instructions</label>
+      <textarea class="form-control" name="instructions" rows="3" placeholder="Step1"></textarea>
+      <textarea class="form-control" name="instructions" rows="3" placeholder="Step2"></textarea>
+      <textarea class="form-control" name="instructions" rows="3" placeholder="Step3"></textarea>
     </div>
         <div class="d-grid gap-2">
         <button class="btn btn-primary" type="button">Add more steps</button>
     </div>
-
+    <div class="mb-3">
+      <label for="tags" class="form-label">Tags</label>
+      <input type="text" class="form-control" name="tags" placeholder="">
+    </div>
+    <div class="d-grid gap-2 col-6 mx-auto">
+      <button class="btn btn-primary" type="submit">Add a new recipe</button>
+    </div>
 </form>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,4 +8,4 @@ @@
     {{#if message}}
     <p>{{message}}</p>
     {{/if}}
-    </form>
+    </form>