Updating Dynamic Slideshow upon Collection insert

Ask the community
,
1

Hey Champs,
I’m using this example for creating a dynamic slideshow that fetches data from a collection and displays it on the slides.


import wixData from 'wix-data';

$w.onReady(async function () {
 let slidesData = await getSlideshowDataFromDatabase()
     loadSlideshowData(slidesData)
});

function loadSlideshowData(slidesData) {
 const slideElements = $w("#dynamicSlideshow").slides

    slideElements.forEach((slide, index) => {
         $w(`#feedType${index}`).text = slidesData[index].type
         $w(`#feedText${index}`).text = slidesData[index].text
    })
}

 function getSlideshowDataFromDatabase() {
 return wixData.query("Hooks").find().then(results => {
 return results.items
    })
}

This is working great, however the slides are not updating upon update of the collection.

The collection has a constant size and newly inserted items overriding the oldest.
I couldn’t figure how to create a afterInsert hook that will update the content on the page each time an action on the collection has been performed ( insert or remove).
Any ideas how to make this dynamic slideshow more reactive?

2

The slide will update once the page is ready, so a refresh will do, but …

That is if you’re adding the items manually to the databse, but if the user is the one who insert the new value, you can use .concat() to add the new item to the slidesData or just query the database again after the insertion is complete.

I really can’t give an example code since I don’t how you’re updating the collection.

3

@ahmadnasriya Users are updating the database from an external form via an http function, so I can’t really refresh the page manually.
I thought to use hooks for this but this but wixLocation does not seem to work there.

export async function Hooks_beforeInsert(item, context) {
 let query = await wixData.query("Hooks")
        .ascending("_createdDate")
        .find()
 let results = query.items
 if (results.length > 0) {
 if (results.length > 4) {
 let itm = results[0]
 let removed = await wixData.remove("Hooks", itm._id)
            console.log("oldest item removed:")
            console.log(removed)
        }
    }
 return item
}

export async function Hooks_afterInsert(item, context) {
 await wixLocation.to(wixLocation.url)
}
4

@edwardfrogz Why removing the old item and then inserting new one? Why not just update it?

Here’s an example:
You want to update the students details, query the students database and get the item you want, then update it, here’s how.

Assuming that you want to change the last name of a student:

let newItem = // some value from anywhere you want.
wixData.query('students').eq('firstName', userFirstName).find().then(async(result) => {
    if (result.items.length > 0) {
        let item = result.items[0];
        item.lastName = $w('#userLastName').value;
        
        await wixData.update('students', item).then(()=> {
            console.log('Updated Succeeded!);
        })
    }
})

Hope that helped!
Ahmad

5

@ahmadnasriya Thanks for the example but unfortunately this is not the use case I’m using.
The feature I’m building is an announcement feed that displays updates like a flash news feed.

The collection holds items for 24 hours and can hold up to 5 items.
Updating items can’t work here since the collection can be empty on a time of item insert