Next and Previous Buttons for Blog Post Page

Ask the community
, ,
1

Hi all! We have faced a buggy situation and wonder if there is a method to eliminate this. When we use the below code, after 3 iterations, post page ends up showing the related strip background and texts which were placed at the top of the page. Also, browser seems like it tries to fix something we couldn’t handle. Pages are still being changed during our tries. Also, when we click on the posts from the blog posts page, sometimes it doesn’t initiate the process. I think there is caching issue.

Urgent help is needed. If you have 10 minutes or so, could you check below code?

Page code:

import wixLocation from 'wix-location';

let currentPost

$w.onReady(function () {

    wixLocation.onChange((location) => {
        return initPage();
    })
    initPage()
    //previousAndNext()
});

async function initPage() {

    $w("#post1").getPost().then(async post => {
        currentPost = post;
        assignPostDataToUIElements()
        previousAndNext()
    });
}

function assignPostDataToUIElements() {
    $w("#postTitle").text = currentPost.title
    $w("#postHeaderStrip").background.src = currentPost.coverImage
    //$w("#postcategory").text = currentPost.categories.split(',');
    $w("#postHeaderStrip").show("fade")
}

function previousAndNext() {
    $w("#previousPostbutton").disable();
    $w("#nextPostbutton").disable();

    const linkField = "postPageUrl"
    $w("#postsdataset").onReady(() => {
        const numberOfItems = $w("#postsdataset").getTotalCount();

        $w("#postsdataset").getItems(0, numberOfItems)
            .then((result) => {

                let blogPosts = result.items.map(item => item[linkField]);
                blogPosts = blogPosts.toString().split(',');
                console.log(blogPosts);
                let pageUrl = currentPost.postPageUrl //.toString()
                let currentPage = pageUrl;

                console.log(currentPage);
                let currentPageIndex = blogPosts.indexOf(currentPage);
                console.log(currentPageIndex);

                if (currentPageIndex > 0) {
                    let previousPage = blogPosts[currentPageIndex - 1];
                    console.log(previousPage);
                    //$w("#previousPostbutton").link = wixLocation.baseUrl + previousPage;
                    $w("#previousPostbutton").onClick(() => {
                        wixLocation.to(previousPage);
                    })
                    $w("#previousPostbutton").enable();
                }

                if (currentPageIndex < blogPosts.length - 1) {
                    let nextPage = blogPosts[currentPageIndex + 1];
                    console.log(nextPage);
                    //$w("#nextPostbutton").link = wixLocation.baseUrl + nextPage;
                    $w("#nextPostbutton").onClick(() => {
                        wixLocation.to(nextPage);
                    })
                    $w("#nextPostbutton").enable();
                }
            })
            .catch((err) => {
                console.log(err.code, err.message);
            });
    });

}