onClick function to save repeater item as favourite

Ask the community
,
1

Hi All!

I have users posts being shown on #repeater1 on a dynamic page. I have two collections, ’ marks’ where the users uploaded content for their post is saved.
The other collection being ‘favourites’, where the users favourites posts are saved. This collection has a userID field and a mark field.

  1. There is an empty heart icon (#saveSong) within the repeater container for the user to click to save the item as a favourite. There is also a filled heart (#songSaved) shown to show that the item has been saved. If the user has saved an item but refresh’s the page, or returns back to this page, or see’s this post again, the #saveSong icon is shown rather than #songSaved? If the user has already saved an item, the filled heart is shown and the empty heart is hidden.

  2. When a user clicked on the favourite button (#saveSong) in the repeater, it creates a new line in the #favourites collection. How do I set it so that only one line is created per user and the marks field contains all of their favourited items?

  3. Lastly, is there any coding to remove/unfavourite an item from the marks field in the #favourites collection?

Here is my relevant current code:

 $w("#repeater1").onItemReady(($item, itemData, index) => {

 wixData.query("favourites")
                    .find()
                    .then((results) => {
 if (results.items._id === itemData._id) {
                            $item("#saveSong").hide();
                            $item("#songSaved").show();
                        } else {
                            $item("#saveSong").show();
                            $item("#songSaved").hide();
                        }
///other code
}
 $item("#saveSong").onClick((event) => {
 const idOfItem = event.context.itemId;
 let rowData;
 let userId = wixUsers.currentUser.id;
 let userphoto = itemData.mymarks[0].profilePhoto;
 let name = itemData.mymarks[0].fullName;

                            $w('#repeater1').data.forEach((item) => {
 if (item._id === idOfItem) {
                                    rowData = item;
                                } else {
 let toSave = {
 "mark": item,
 "userId": userId,
 "userPhoto": userphoto,
 "name": name
                                    };
                                    wixData.save("favourites", toSave);
                                }
                            });
                            console.log(rowData); // your item

                            $item("#saveSong").hide();
                            $item("#songSaved").show();
                            $item("#copiedBox").show();
                            $item("#InfoTextBox").label = "Added to Favourites";
                            setTimeout(function () {
                                    $item("#copiedBox").hide();
                                },
 3000); // <-- time in milliseconds 
                        })
                        $item("#songSaved").onClick(() => {
                            $item("#saveSong").show();
                            $item("#songSaved").hide();
                            $item("#copiedBox").show();
                            $item("#InfoTextBox").label = "Removed from Favourites";
                            setTimeout(function () {
                                    $item("#copiedBox").hide();
                                },
 3000); // <-- time in milliseconds 
                        })

Thanks in advance!

2

@ajithkrr Hey man! Wondered if you could assist at all please?

3

I just create a trial site and let you know if it works !!

4

Hi @events32996 !!!
I just created a test site → https://ajithkrr.wixsite.com/mysite/test-page

Can you tell me if this is what you are trying to achieve…

5

This is why you’re the best! Haha

Yes that’s exactly what I’m looking to achieve!

6

Here is the code I used →
You should connect the repeater to the marks dataset for this to function properly…

You can edit the code as you needs…

import wixData from 'wix-data';
import wixUsers from 'wix-users';

let findArray = [];
$w.onReady(function () {

    $w('#repeater1').onItemReady(($item, itemData, index) => {
        wixData.query("favourites")
            .eq("userId", wixUsers.currentUser.id)
            .find()
            .then((results) => {
 let items = results.items;
 for (var i = 0; i < results.items.length; i++) {
 var array = items[i].mark; 
                    findArray.push(array);
                }
                check();
            });

        $item('#saveSong').onClick((event) => {
 let toInsert = {
 "mark": itemData._id,
 "userId": wixUsers.currentUser.id
            }
            wixData.insert("favourites", toInsert)
                .then(() => {
                    $w('#dataset1').refresh();
                    $item("#saveSong").hide();
                    $item("#savedSong").show();
                    $item("#copiedBox").show();
                    $item("#infoTextBox").text = "Added to Favourites";
                    setTimeout(function () {
                            $item("#copiedBox").hide();
                        },
 3000);
                });

        });

        $item('#savedSong').onClick((event) => {
            wixData.query("favourites")
                .eq("userId", wixUsers.currentUser.id)
                .eq("mark", itemData._id)
                .find()
                .then((res) => {
 let item = res.items[0];
 let toRemoveId = item._id

                    wixData.remove("favourites", toRemoveId)
                        .then(() => {
                            $w('#dataset1').refresh();
                            $item("#saveSong").show();
                            $item("#savedSong").hide();
                            $item("#copiedBox").show();
                            $item("#infoTextBox").text = "Removed from Favourites";
                            setTimeout(function () {
                                $item("#copiedBox").hide();
                            }, 3000);
                        });
                });
        });
    });
});

function check() {
    $w('#repeater1').forEachItem(($item, itemData, index) => {

 if (findArray.find(el => el === itemData._id) !== itemData._id) {
            $item('#saveSong').show();
            $item('#savedSong').hide();
        } else {
            $item('#saveSong').hide();
            $item('#savedSong').show();
        }
    });
}

Happy coding !!

7

@ajithkrr Thank you! I will give that a try now.

I am looking for a developer (paid) for my project, would this be of any interest to you?

8

Actually I am due in other…
Will let you know, when it finishes