Liking & Matching - pmvdbijl7/matching-app GitHub Wiki
When the user is interested in someone they can give that person a 'like'.
When you 'like' someone that person's ID in the database is saved in a Likes array in the data of the current user. Because the ID of another item is saved somewhere else for the application feature it becomes a 'relation' in the database. When the "Like" button is pressed on another user's profile page it turns into the "Unlike".
This is an AJAX Post request for when the user presses the Like button:
function postLikeData(likeOrUnlike) {
console.log(likeOrUnlike)
const url = window.location.href;
const pathname = new URL(url).pathname;
const profileId = pathname.substring('/user/profile/'.length);
var xhttp = new XMLHttpRequest();
if (likeOrUnlike == 'like') {
xhttp.open('POST', '/user/profile/like', true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send('profile_id=' + profileId);
likeButton.textContent = 'unlike';
} else if (likeOrUnlike == 'unlike') {
xhttp.open('POST', '/user/profile/unlike', true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send('profile_id=' + profileId);
likeButton.textContent = 'like';
}
}
likeButton.addEventListener('click', () => {postLikeData(likeButton.textContent)});What the server does with the Like or Unlike POST request:
// Post Liked profile data
const profileLikePost = (req, res) => {
const authUser = req.user._id;
const profileId = req.body.profile_id;
User.findByIdAndUpdate(
authUser,
{ $addToSet: { liked_profiles: profileId } },
{ safe: true, upsert: true, new: true },
function (err, result) {
if (err) {
console.log(err);
}
}
);
};
// Post Unliked profile data
const profileUnlikePost = (req, res) => {
const authUser = req.user._id;
const profileId = req.body.profile_id;
User.findByIdAndUpdate(
authUser,
{ $pull: { liked_profiles: profileId } },
{ safe: true, upsert: true, new: true },
function (err, result) {
if (err) {
console.log(err);
}
}
);
};
When 2 users have liked each other the server sends the profile of the other in the Matches page, this way the user knows that they have a match with someone else.
When the user GET requests the Matches page, the server retrieves the data of the user that is logged in and other users:
//Get matches page
const matchesGet = (req, res) => {
const authUser = req.user._id;
User.findById(authUser).then((user) => {
User.find((err, docs) => {
if (!err) {
res.render('pages/matches', {
title: 'Home',
user: user.toJSON(),
users: docs,
headerLeft: {
path: '/',
text: 'Back'
},
headerRight: {
path: '/account/profile',
text: 'My profile'
}
});
} else {
console.log('Error in retrieving profile data: ' + err)
}
});
});
};And then filters the users with EJS to only send the other user profiles that liked the logged in user back:
<% for(i=0; i < users.length; i++) { %>
<% if (user._id.toString() != users[i]._id && users[i].liked_profiles.includes(user._id.toString()) && user.liked_profiles.includes(users[i]._id.toString())) {%>
<section class="account-item">
<a href="/user/profile/<%= users[i]._id; %>">
<div>
<% if (users[i].profile_image) { %>
<img src="/uploads/<%= users[i].profile_image %>" alt="Profile image" width="100">
<% } else { %>
<img src="/images/default_profile_image.jpg" alt="Profile image" width="100">
<% } %>
</div>
<div>
<p>
<%= users[i].name; %>
<%= getAge(users[i].birthdate); %>
</p>
<p><%= users[i].residence; %></p>
</div>
</a>
</section>
<% } %>
<% } %>
Here the user has liked Koris and Koris has liked the user, so Koris' profile is displayed on the Matches page:
