Pleas help infinit scroll with query ascending _creatDate

Ask the community
,
1

First i implement load first data before change drop down but I have some eror when change dropdown to loadOldPost.

Page Code

const DEFAULT_LIMIT = 2;
const START_LOADING_NEXT = 2;

let Skip = 0;
let Channel = "Entertainment";
let finishLoad = false;

$w.onReady(function () {
    $w('#repeaterFeed').data = [];
    $w('#repeaterFeed').onItemReady(($item, itemData, index) => {
        $item("#textItemTitle").text = itemData.title;
        $item("#imageItemCoverImage").alt = itemData.title;
        $item("#imageItemCoverImage").tooltip = itemData.title;
        $item("#imageItemCoverImage").src = itemData.postImage;
        $item("#textItemAuthorName").text = itemData.authorName;
        $item("#imageItemAuthorImage").src = itemData.authorImage;
        $item("#imageItemCoverImage, #buttonItemUrl").link = itemData['link-post-2-title'];
        $item("#textItemCreatDate").text = itemData._createdDate.toLocaleDateString('id-ID', optionsDate);
        if (index % START_LOADING_NEXT === 0) {
            $w('#boxFooter').onViewportEnter(() =>
                loadMoreDataFirst());
        }
    })
    loadMoreDataFirst();
})

async function loadMoreDataFirst() {
    if (!finishLoad && $w('#preload').hide) {
        $w('#preload').show();
        try {
            const firstData = await getSomePost(Channel, DEFAULT_LIMIT, Skip);
            const currFirstData = $w('#repeaterFeed').data;
            $w('#repeaterFeed').data = currFirstData.concat(firstData);
            Skip++;
            $w('#preload').hide();
            if (firstData.length < DEFAULT_LIMIT) {
                finishLoad = true;
                $w('#textDoneLoadMoreData').show();
                $w('#vectorImageDoneLoadMoreData').show();
            }
        } catch (err) {
            console.error(err);
        }
    }
}

$w.onReady(function () {
    $w("#dropdownShort").onChange((event) => {
        $w('#repeaterFeed').data = [];
        $w('#repeaterFeed').onItemReady(($item, itemData, index) => {
            $item("#textItemTitle").text = itemData.title;
            $item("#imageItemCoverImage").alt = itemData.title;
            $item("#imageItemCoverImage").tooltip = itemData.title;
            $item("#imageItemCoverImage").src = itemData.postImage;
            $item("#textItemAuthorName").text = itemData.authorName;
            $item("#imageItemAuthorImage").src = itemData.authorImage;
            $item("#imageItemCoverImage, #buttonItemUrl").link = itemData['link-post-2-title'];
            $item("#textItemCreatDate").text = itemData._createdDate.toLocaleDateString('id-ID', optionsDate);
            if ($w("#dropdownShort").value == "Old Post" && index % START_LOADING_NEXT === 0) {
                $w('#boxFooter').onViewportEnter((event) =>
                    loadOldData());
            }
        })
        loadOldData();
    })
})

async function loadOldData() {
    if (!finishLoad && $w('#preload').hide) {
        $w('#preload').show();
        try {
            const moreOldData = await getSomeOldPost(Channel, DEFAULT_LIMIT, Skip);
            const currOldData = $w('#repeaterFeed').data;
            $w('#repeaterFeed').data = currOldData.concat(moreOldData);
            Skip++;
            $w('#preload').hide();
            if (moreOldData.length < DEFAULT_LIMIT) {
                finishLoad = true;
                $w('#textDoneLoadMoreData').show();
                $w('#vectorImageDoneLoadMoreData').show();
            }
        } catch (err) {
            console.error(err);
        }
    }
}

JSW Code

import wixData from 'wix-data';

export async function getSomePost(channel, limit, skip) {
    try {
        const results = await wixData.query('Post').contains("channel", channel).skip(limit * skip).limit(limit).find();
        return results.items || [];
    } catch (err) {
        console.error(err);
    }
}

export async function getSomeOldPost(channel, limit, skip) {
    try {
        const results = await wixData.query('Post').ascending("_createdDate").contains("channel", channel).skip(limit * skip).limit(limit).find();
        return results.items || [];
    } catch (err) {
        console.error(err);
    }
}
2

I haven’t read your code, but some mistakes/wrong practices popped up at first quick glance:

  1. Use a single $w.onReady per page.

  2. Use a single specific_repeater.onItemReady. Not more than 1.

  3. if(element.hidden) NOT: if(element.hide)

  4. return results.items || [] . I’m not sure this syntax can work well with the current Node.js version (maybe I’m wrong).

  5. I can’t see the imports in the page code.

3

I have listed
import { getSomePost } from ‘backend/post-data.jsw’;
import { getSomeOldPost } from ‘backend/post-data.jsw’;
at the top of the code

Is it ok if i want to try it with two repeaters?

4

@ohsalmanfarizy You can use 2 repeaters or more.

5

@jonatandor35 Ok, thank you J.D