Reputation: 550
I'm trying to implement a likes system into my React application but for that I need to know what posts the currentLoggedIn user has liked before so I can display an icon to dislike and viceversa.
My firs thinking was by creating an small function that receives two parametes, the loggedIn user and the postId. This is the function:
const clickLike = (userId, postId) => {
const match =
timeline &&
timeline.map(
post =>
post._id === postId && post.likes.filter(user => user === userId)
);
return match;
};
The previous code should map throught all of the posts and then return true if loggedIn user is already on the likes of the postId object. Here it is what my JSON looks like:
"data": [
{
"status": "published",
"_id": "5e5dcfc65104666e70558110",
"text": "Mierda!",
"user": {
"_id": "5e0925629648903308163aeb",
"username": "GodHimself",
"avatar": "//www.gravatar.com/avatar/b62ddb6758fca61fb7a56381ac7cb07d?s=200&r=pg&d=mm",
"bio": "I'm not God",
"id": "5e0925629648903308163aeb"
},
"likes": [
{
"_id": "5e76bc5fd3266e125c2dc4b9",
"user": "5e0925629648903308163aeb"
},
],
"id": "5e5dcfc65104666e70558110"
},
{
"status": "published",
"_id": "5e4a08dc4c1f0d2394f28d8e",
"text": "Initial D!",
"user": {
"_id": "5e0925629648903308163aeb",
"username": "GodHimself",
"avatar": "//www.gravatar.com/avatar/b62ddb6758fca61fb7a56381ac7cb07d?s=200&r=pg&d=mm",
"bio": "I'm not God",
"id": "5e0925629648903308163aeb"
},
"likes": [],
"id": "5e4a08dc4c1f0d2394f28d8e"
},
{
"status": "published",
"_id": "5e4a08584c1f0d2394f28d8d",
"text": "Berserk Bois!",
"user": {
"_id": "5e0925629648903308163aeb",
"username": "GodHimself",
"avatar": "//www.gravatar.com/avatar/b62ddb6758fca61fb7a56381ac7cb07d?s=200&r=pg&d=mm",
"bio": "I'm not God",
"id": "5e0925629648903308163aeb"
},
"likes": [
{
"_id": "5e4b5c889861ad1cf8b67bbb",
"user": "5e0925629648903308163aeb"
},
{
"_id": "5e4b5ca59861ad1cf8b67bbc",
"user": "5e0925629648903308163aeb"
}
],
"id": "5e4a08584c1f0d2394f28d8d"
}
]
So far, the code keeps returning true in any single post even those who have not received a like.
Any help would be appreciated.
Upvotes: 0
Views: 79
Reputation: 61
You can use Array prototype function - some()
var data = [
{
status: "published",
_id: "5e5dcfc65104666e70558110",
text: "Mierda!",
user: {
_id: "5e0925629648903308163aeb",
username: "GodHimself",
avatar:
"//www.gravatar.com/avatar/b62ddb6758fca61fb7a56381ac7cb07d?s=200&r=pg&d=mm",
bio: "I'm not God",
id: "5e0925629648903308163aeb"
},
likes: [
{
_id: "5e76bc5fd3266e125c2dc4b9",
user: "5e0925629648903308163aeb"
}
],
id: "5e5dcfc65104666e70558110"
},
{
status: "published",
_id: "5e4a08dc4c1f0d2394f28d8e",
text: "Initial D!",
user: {
_id: "5e0925629648903308163aeb",
username: "GodHimself",
avatar:
"//www.gravatar.com/avatar/b62ddb6758fca61fb7a56381ac7cb07d?s=200&r=pg&d=mm",
bio: "I'm not God",
id: "5e0925629648903308163aeb"
},
likes: [],
id: "5e4a08dc4c1f0d2394f28d8e"
},
{
status: "published",
_id: "5e4a08584c1f0d2394f28d8d",
text: "Berserk Bois!",
user: {
_id: "5e0925629648903308163aeb",
username: "GodHimself",
avatar:
"//www.gravatar.com/avatar/b62ddb6758fca61fb7a56381ac7cb07d?s=200&r=pg&d=mm",
bio: "I'm not God",
id: "5e0925629648903308163aeb"
},
likes: [
{
_id: "5e4b5c889861ad1cf8b67bbb",
user: "5e0925629648903308163aeb"
},
{
_id: "5e4b5ca59861ad1cf8b67bbc",
user: "5e0925629648903308163aeb"
}
],
id: "5e4a08584c1f0d2394f28d8d"
}
];
const clickLike = (userId, postId) => {
const match =
data &&
data.some(
post =>
post._id === postId && post.likes.some(like => like.user === userId)
);
return match;
};
console.log(clickLike("5e0925629648903308163aeb", "5e5dcfc65104666e70558110"));
console.log(clickLike("5e0925629648903308163aeb", "5e4a08dc4c1f0d2394f28d8e"));
console.log(clickLike("XXX", "5e4a08dc4c1f0d2394f28d8e"));
Upvotes: 1
Reputation: 15146
const clickLike = (userId, postId) => {
return data.some(x => x._id === postId && x.likes.some(y => y._id === userId));
};
const data = [
{
status: "published",
_id: "5e5dcfc65104666e70558110",
text: "Mierda!",
user: {
_id: "5e0925629648903308163aeb",
username: "GodHimself",
avatar:
"//www.gravatar.com/avatar/b62ddb6758fca61fb7a56381ac7cb07d?s=200&r=pg&d=mm",
bio: "I'm not God",
id: "5e0925629648903308163aeb"
},
likes: [
{
_id: "5e76bc5fd3266e125c2dc4b9",
user: "5e0925629648903308163aeb"
}
],
id: "5e5dcfc65104666e70558110"
}
];
const clickLike = (userId, postId) => {
return data.some(x => x._id === postId && x.likes.some(y => y._id === userId));
};
console.log(
clickLike("5e76bc5fd3266e125c2dc4b9", "5e5dcfc65104666e70558110"),
clickLike("xxx", "5e5dcfc65104666e70558110"),
clickLike("5e76bc5fd3266e125c2dc4b9", "xxx"),
clickLike("xxx", "xxx")
);
Upvotes: 1