Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them as a friend. However, when I check if they are friends by iterating from User 1 to User 2, sometimes it works correctly and other times it does not. The issue arises when, even though I am friends with someone, the system prompts me to 'Add as Friend' again, which is undesirable. Interestingly, sometimes a simple page reload fixes this problem. Please note that 'this.data.user' represents the ID of the friend.
I suspect the problem lies in how I handle the request to retrieve all friends, causing this inconsistency.
Below is the snippet of code responsible for checking if users are friends or not, executed within the 'ngOnInit' lifecycle hook.
checkFriend: User[] = [];
if (success[1]) {
this.data = success[0];
this.checkFriends(this.data.user);
} else {
this.modelDataService.getUserModel(this.outsideUserId).subscribe((t: Model) => {
this.data = t;
this.loadActiveUserConnections(this.data.user);
this.checkFriends(this.data.user);
});
}
this.modelDataService.getOutsideModel(this.outsideUserId).subscribe((t: Model) => {
this.data = t;
this.loadActiveUserConnections(this.data.user);
this.checkFriends(this.data.user);
}); // The issue might arise here due to both being called from outside
checkFriends(id) {
this.friendService.getAllFriendRequests().subscribe((finalRequesters) => {
this.checkFriend = finalRequesters;
this.checkFriend.forEach((oneRequest: any) => {
console.log(oneRequest);
if ((oneRequest.friendId === id || oneRequest.friendId === id) && oneRequest.status === "You are friend") {
oneRequest.isFriend = true;
this.isFriend = true;
} else if (oneRequest.friendId === id && oneRequest.status === "Request Pending") {
oneRequest.uniqueId = oneRequest.userId;
oneRequest.isRequest = true;
this.isRequest = true;
} else {
this.isFriend = false;
this.isRequest = false;
}
});
});
}
The following section presents the HTML code:
<a class="px-1" *ngIf="!checkUser">
<button class="px-3 font-weight-600 btn btn-light" (click)="addFriend()" *ngIf="!isFriend && !isRequest">
<span class="bi bi-person-plus-fill d-flex align-items-center">
<span class="pl-2">Add Contact</span>
</span>
</button>
<button class="px-3 font-weight-600 btn btn-light" *ngIf="isRequest">
<span class="bi bi-person-plus-fill d-flex align-items-center">
<span class="pl-2">Cancel Contact Request</span>
</span>
</button>
</a>
And here is the method for retrieving all friend requests:
getAllFriendRequests() {
return this.http.get<any[]>(this.apiBaseURL + "/friends");
}
This is what the 'oneRequest' object looks like:
{
createdDate: "2021-03-20T22:24:54.512Z",
friendId: "602e4c30e3346466703376ab",
id: "605676360fb6b109209674be",
status: "You are friend",
userId: "5fbc1bc72ffec245c4bd7725",
__v: 0,
_id: "605676360fb6b109209674be",
...
}
'friendId' represents the friend's ID, while 'userId' stands for the authenticated user's ID. Despite this, when I attempt to log 'oneRequest', it returns the entire array instead of a single object.
Lastly, let’s take a look at the backend implementation:
async showUserCV(req, res) {
ModelData.aggregate()
let modelData = await ModelData.findOne({userUrl: req.params.id }).populate("user").exec();
if (!modelData) {
res.status(204).json({error: "No Data"});
return;
}
return res.status(200).send(modelData);
},
const ModelData = require("../models/data");