This is for a Node.js blog project.

I have a blog. I know how to create a new post. This post has a date of deadline. And every post has an 'Apply' button. I would like the project to disable the Apply button after the deadline.

This is my approach:

1. Create a post schema with the date to apply.
2. Create a logic using the routes.
3. Use it in handlebars. I tried but does not work.

This is the schema:

const {Schema, model} = require('mongoose');
const UrlSlugs = require('mongoose-url-slugs');

const PostSchema = new Schema({
    user: {
        type: Schema.Types.ObjectId,
        ref: 'users'
    },
    category: {
        type: Schema.Types.ObjectId,
        ref: 'categories'
    },
    title: {
        type: String,
        require: true
    },
    slug: {
        type: String
    },
    status: {
        type: String,
        default: 'public'
    },
    allowComments: {
        type: Boolean,
        require: true
    },
    body: {
        type: String,
        require: true
    },
    file: {
        type: String
    },
    date: {
        type: Date,
        default: Date.now()
    },
    dateToApply: {
        type: Date
    },
    comments: [{
        type: Schema.Types.ObjectId,
        ref: 'comments'
    }]
}, {usePushEach: true});

PostSchema.plugin(UrlSlugs('title', {field: 'slug'}));

try {
    module.exports = model('posts', PostSchema);
} catch (e) {
    module.exports = model('posts');
}

This is the route:

router.get('/', (req, res)=>{
    const perPage = 10;
    const page = req.query.page || 1;

    let dateNow = Date.now();
    let applyDate = req.body.dateToApply;
    let button = document.getElementById('applyButton');

    function showButton() {
        if (dateNow > applyDate) {
            button.disabled = true;
        }
    }
    

    Post.find({})
        .sort({date: 'desc'})
        .skip((perPage*page)-perPage)
        .limit(perPage)
        .then(posts => {
            Post.count().then(postCount=>{
                Category.find({}).then(categories => {
                    res.render('home/index', {
                        posts: posts,
                        categories: categories,
                        current: parseInt(page),
                        pages: Math.ceil(postCount/perPage)
                    });
                });
            });
        });
});

This is the Handlebars:

<div class="row">
    <div class="col-12">
        <h1>Home page</h1>
        {{#each posts}}
            <div class="card mb-4">
                <img class="img-fluid" src="/uploads/{{ file }}" alt="Kep">
            </div>
            <div class="card-body">
                <h2 class="card-title">{{title}}</h2>
                <p class="card-text">{{body}}</p>
                <p>{{generateDate dateToApply 'MMMM DD YYYY'}}</p>
                <a href="/post/{{id}}" class="btn btn-primary">More</a>
                {{#if showButton}}
                <button id="applyBtn" class="btn btn-info">Apply</button>
                {{/if}}
            </div>
            <div class="card-footer">
                Date of post {{ generateDate date 'MMMM DD YYYY'}}
            </div>
        {{/each}}
        <ul class="pagination justify-content-center">
            {{#pagination current=current pages=pages}}{{/pagination}}
        </ul>
    </div>
</div>

CodePudding user response：

Something like this:

    router.get('/', (req, res)=>{
    const perPage = 10;
    const page = req.query.page || 1;

    let dateNow = Date.now();
    
    Post.find({})
        .sort({date: 'desc'})
        .skip((perPage*page)-perPage)
        .limit(perPage)
        .then(posts => {
            posts.forEach(post => {
                post.deadlinePassed = dateNow > post.dateToApply
            })
            Post.count().then(postCount=>{
                Category.find({}).then(categories => {
                    res.render('home/index', {
                        posts: posts,
                        categories: categories,
                        current: parseInt(page),
                        pages: Math.ceil(postCount/perPage)
                    });
                });
            });
        });
    });

And in the template:

<div class="row">
    <div class="col-12">
        <h1>Home page</h1>
        {{#each posts}}
            <div class="card mb-4">
                <img class="img-fluid" src="/uploads/{{ file }}" alt="Kep">
            </div>
            <div class="card-body">
                <h2 class="card-title">{{title}}</h2>
                <p class="card-text">{{body}}</p>
                <p>{{generateDate dateToApply 'MMMM DD YYYY'}}</p>
                <a href="/post/{{id}}" class="btn btn-primary">More</a>
                {{#if showButton}}
                <button id="applyBtn" class="btn btn-info" {{#if deadlinePassed}} disabled {{/if}}>Apply</button>
                {{/if}}
            </div>
            <div class="card-footer">
                Date of post {{ generateDate date 'MMMM DD YYYY'}}
            </div>
        {{/each}}
        <ul class="pagination justify-content-center">
            {{#pagination current=current pages=pages}}{{/pagination}}
        </ul>
    </div>
</div>