sei-ec-remote / project-2-issues

1 stars 0 forks source link

Mines Route not Showing #331

Closed drnepal closed 1 year ago

drnepal commented 1 year ago

What's the problem you're trying to solve?

Trying to display my blog on indiviudual accounts.

Post any code you think might be relevant (one fenced block per file)

html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- link in bootstrap stylesheet from the CDN-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <!-- Link in my CSS -->
        <link rel="stylesheet" href="/styles.css" />
        <title>Blog App</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <div class="container-fluid">
                <a href="/" class="navbar-brand">myBlogApp</a>
                {% if loggedIn %}
                    <a href="/blogs/mine" class="nav-link text-warning me-3">Hello {{username}}</a>
                {% endif %}
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    {% if loggedIn %}
                        <a href="/blogs" class="nav-link text-light me-3">All Blogs</a>
                        <a href="/blogs/new" class="nav-link text-light me-3">New Blog</a>

                        <a href="/users/logout" class="nav-link text-light me-3">Log Out</a>
                    {% else %}
                        <a href="/blogs" class="nav-link text-light me-3">All Blogs</a>
                        <a href="/users/signup" class="nav-link text-light me-3">Sign Up</a>
                        <a href="/users/login" class="nav-link text-light me-3">Log In</a>
                    {% endif %}
                </div>
            </div>
        </nav>
        <main class="container-md">
            {% block content %}
                default content
            {% endblock %}
        </main>
        <!-- link in our bootstrap scripts -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>
router.get('/mine', (req, res) => {
    // find blog by ownership, using the req.session info
    const { username, loggedIn, userId } = req.session
    console.log(req.session)
    Blog.find({ owner: userId })
        .populate('owner', 'username')
        .populate('comments.author', '-password')
        .then(blog => {
            // if found, display the blog
            // res.status(200).json({ blog: blog })
            res.render('blogs/mine', { blog, username, loggedIn })
        })
        .catch(err => {
            // otherwise throw an error
            console.log(err)
            // res.status(400).json(err)
            res.redirect(`/error?error=${err}`)
        })
})`

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

=> Created new blog with signed in user. But cannot see the blog Under the User Name

What is your best guess as to the source of the problem?

No idea

What things have you already tried to solve the problem?

=>opened mine.liquid page

Paste a link to your repository here

=> https://github.com/drnepal/mynewsblog

asands94 commented 1 year ago

Share your server.js please

drnepal commented 1 year ago
//// Import Dependencies         ////
/////////////////////////////////////
const express = require('express') // import the express framework
const morgan = require('morgan') // import the morgan request logger
require('dotenv').config() // Load my ENV file's variables
const path = require('path') // import path module
const BlogRouter = require('./controllers/blogControllers')
const UserRouter = require('./controllers/userControllers')
const CommentRouter = require('./controllers/commentControllers')
const middleware = require('./utils/middleware')

/////////////////////////////////////
//// Create our Express App Object //
/////////////////////////////////////
// this was fine for building an API that sends and receives json
// const app = express()
// but now, our app is going to be Full-Stack. That means handling front-end and back-end from the same server(in this case).
// so, we're utilizing an npm package `liquid-express-views` to add the 'view' layer to our MVC framework.
// in short, we need to update our app object and tell it to use that package, as stated by the documentation. 
const app = require('liquid-express-views')(express())
// what liquid-express-views really does for us, is make it easy to path to our .liquid files(which will serve our html). This package says to look inside the 'views' folder for files with the .liquid name.

/////////////////////////////////////
//// Middleware                  ////
/////////////////////////////////////
// middleware runs before all the routes.
// every request is processed through our middleware before mongoose can do anything with it
// our middleware is now processed by a function in the utils directory. This middleware function takes one argument, app, and processes requests through our middleware
middleware(app)

/////////////////////////////////////
//// Routes                      ////
/////////////////////////////////////
// HOME route
app.get('/', (req, res) => {
    // destructure our user info
    const { username, loggedIn, userId } = req.session
    res.render('home.liquid', { username, loggedIn, userId })
})

// This is now where we register our routes, this is how server.js knows to send the correc response. 
// app.use, when we register a route, needs two arguments
// the first arg is the base URL, second arg is the file to use.
app.use('/blogs', BlogRouter)
app.use('/comments', CommentRouter)
app.use('/users', UserRouter)

///////////

// this renders our error page
// gets the error from a url req query
app.get('/error', (req, res) => {
    const error = req.query.error || 'This page does not exist'
    // const { username, loggedIn, userId } = req.session
    // instead of destructuring this time, we show we can also
    // use the spread operator, which says "use all the parts of req.session" when you type ...req.session
    res.render('error.liquid', { error, ...req.session })
})

// this catchall route will redirect a user to the error page
app.all('*', (req, res) => {
    res.redirect('/error')
})

/////////////////////////////////////
//// Server Listener             ////
/////////////////////////////////////
const PORT = process.env.PORT
app.listen(PORT, () => console.log(`Now listening to the sweet sounds of port: ${PORT}`))

// END
asands94 commented 1 year ago

Are you getting any error messages?

drnepal commented 1 year ago

No error message but doesn't show anything from the lists of new created blog.I could see on the All list but not in individual account.

scarletpuma commented 1 year ago

You may want to compare your code to what is in the boilerplate as a reference, since that code is already working it's a good way to see what may be causing bugs in your own code.

drnepal commented 1 year ago

It works now compared with the code in the Boilerplate(Classroom Note) on controllers.js


    // find blogs by ownership, using the req.session info
    Blog.find({ owner: req.session.userId })
        .populate('owner', 'username')
        .populate('comments.author', '-password')
        .then(blogs => {
            // if found, display the blogs
            // res.status(200).json({ blogs: blogs })
            res.render('blogs/index', { blogs, ...req.session })
        })
        .catch(err => {
            // otherwise throw an error
            console.log(err)
            // res.status(400).json(err)
            res.redirect(`/error?error=${err}`)
        })
})```
drnepal commented 1 year ago

Thank You