CODEWITHSUNDEEP
javascriptnode.jsexpresshandlebars.js
user3719458
user3719458

Reputation: 386

Struggling to set up a logic to display detailed page in express.js (node.js)

I'm struggling to pull up a working logic that will display a detailed page showing title of the post, image and details. So far I have manage to display the list page which actually lists all the post by a current login user with the title, image and details. When I click on the image I'm suppose to be taken to the link that will display the details of a particular post. Btw the link will look like this http://192.168.1.250:5000/ideas/detail/5d491f36886a56259bad2580 alright the strange thing with my code is that when I clink on the image i'm taken to the detailed page as expected but funny enough the title, image and the details of the post are not displayed and to make it worse on my detail.handlebars view page I have a dummy text "No video ideas listed" well this text is rendered. Below is my code for route ideas.js, and views index.handlebars, detail.handlebars respectively. I highly appreciate for your help and support.

ideas.js (route)

const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();
const {ensureAuthenticated} = require('../helpers/auth');

// Load Idea Model
require('../models/Idea');
const Idea = mongoose.model('ideas');

// Idea Index Page
router.get('/', ensureAuthenticated, (req, res) => {
  Idea.find({user: req.user.id})
    .sort({date:'desc'})
    .then(ideas => {
      res.render('ideas/index', {
        ideas:ideas
      });
    });
});

// Idea Detail Page
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne ({
  _id: req.params.id
  })
  .then(idea => {
   if(idea.user != req.user.id){
      req.flash('error_msg', 'Not Authorized');
      res.redirect('/ideas');
   } else {
      res.render('ideas/detail', {
       idea:idea
     });
    }

  });
});

// Process Detail
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne({
    _id: req.params.id
  })
  .then(idea => {
    // new values
    idea.title = req.body.title;
    idea.imageUrl = req.file.path;
    idea.details = req.body.details

 })
  });


// Add Idea Form
router.get('/add', ensureAuthenticated, (req, res) => {
  res.render('ideas/add');
});

// Edit Idea Form
router.get('/edit/:id', ensureAuthenticated, (req, res) => {
  Idea.findByIdAndUpdate({
    _id: req.params.id
  })
  .then(idea => {
    if(idea.user != req.user.id){
      req.flash('error_msg', 'Not Authorized');
      res.redirect('/ideas');
    } else {
      res.render('ideas/edit', {
        idea:idea
      });
    }

  });
});

// Process Form
router.post('/', ensureAuthenticated, (req, res) => {
  let errors = [];

  if(!req.body.title){
    errors.push({text:'Please add a title'});
  }
  if(!req.body.details){
    errors.push({text:'Please add some details'});
  }

  if(errors.length > 0){
    res.render('/add', {
      errors: errors,
      title: req.body.title,
      imageUrl: req.file.path,
      details: req.body.details

    });
  } else {
    const newUser = {
      title: req.body.title,
      imageUrl: req.file.path,
      details: req.body.details,
      user: req.user.id
    }
    new Idea(newUser)
      .save()
      .then(idea => {
        req.flash('success_msg', 'Video idea added');
        res.redirect('/ideas');
      })
  }
});

// Edit Form process
router.put('/:id', ensureAuthenticated, (req, res) => {
  Idea.findByIdAndUpdate({
    _id: req.params.id
  })
  .then(idea => {
    // new values
    idea.title = req.body.title;
    idea.imageUrl = req.file.path;
    idea.details = req.body.details

    idea.save()
      .then(idea => {
        req.flash('success_msg', 'Video idea updated');
        res.redirect('/ideas');
      })
  });
});

// Delete Idea
router.delete('/:id', ensureAuthenticated, (req, res) => {
  Idea.deleteOne({_id: req.params.id})
    .then(() => {
      req.flash('success_msg', 'Video idea removed');
      res.redirect('/ideas');
    });
});

module.exports = router;

index.handlebars(view)

{{#each ideas}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>

    <a href="/ideas/detail/{{id}}"><img class="ind1Class"  src="{{imageUrl}}" alt="thumbnail" class="img-thumbnail"
  style="width: 200px">

    <p>{{details}}</p>
    <a class="btn btn-dark btn-block mb-2" href="/ideas/edit/{{id}}">Edit</a>
    <form method="post" action="/ideas/{{id}}?_method=DELETE">
      <input type="hidden" name="_method" value="DELETE">
      <input type="submit" class="btn btn-danger btn-block" value="Delete">
    </form>
  </div>
{{else}}
  <p>No video ideas listed</p>
{{/each}}

detail.handlebars (view)

{{#each ideas}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>
     <img class="detaClass" src="{{imageUrl}}">
    <p>{{details}}</p>
    <a class="btn btn-dark btn-block mb-2" href="/ideas/edit/{{id}}">Edit</a>
    <form method="post" action="/ideas/{{id}}?_method=DELETE">
      <input type="hidden" name="_method" value="DELETE">
      <input type="submit" class="btn btn-danger btn-block" value="Delete">
    </form>
  </div>
{{else}}
  <p>No video ideas listed</p>
{{/each}}

Upvotes: 1

Views: 151

Answers (1)

user3719458
user3719458

Reputation: 386

I final got my head wrap around this, I wasn't paying attention too much tension... specially if just blew a milli' anyway let's cut the chase, few things went wrong on the route ideas.js and views detail.handlebars on the // Idea Detail Page section it should be like this, 

   // Idea Detail Page
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne ({
  _id: req.params.id
  })
    .then(idea => {
      res.render('ideas/detail', {
       idea:idea


  });
});  
});

and on the views (detail.handlebars) some adjustments needs to be made since on the app.js I have used static method to save image directory so that the request is handled automatically and the file is returned by express. We need to add / on <div class="name"><img src="{{{imageUrl}}}"</div> so that it looks like this <div class="name"><img src="/{{{imageUrl}}}"</div> Other wise if you click on the broken image and say open image on new tab you will realize it's trying to reach to the path which is /ideas/detail/images/2019-08-16T11:13:17.831Z-flask.png and it will complain Cannot GET /ideas/detail/images/2019-08-16T11:13:17.831Z-flask.png to over come that relative path issues add that / as suggested above. Below is the edited views (detail.handlebars)

{{#idea}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>

    <div class="name"><img src="/{{{imageUrl}}}"</div>

    <p>{{details}}</p>

  </div>
{{/idea}}

Upvotes: 1

Related Questions