index.js - Show the List of Recommended Users - Tinder Clone

index.js

window.addEventListener("DOMContentLoaded", function () {
  ...
  if (authenticatedUser) {
    ...
    // main card item.
    const mainCardEmptyMessage = document.getElementById("main__card-empty");
    const mainCardItemContainer = document.getElementById("main__card-item-container");

    // main card actions.
    const mainCardActions = document.getElementById("main__card-actions")
    const dislikeBtn = document.getElementById("dislike");
    const likeBtn = document.getElementById("like");
    ...

    const renderCardList = (recommendedUsers) => {
      if (recommendedUsers && recommendedUsers.length !== 0) {
        const cardList = document.getElementById("main__card-item-container");
        recommendedUsers.forEach((user, index) => {
          if (index === 0) {
            cardList.innerHTML += `<div class="main__card-item" style="display: block;" data-id="${user.user_cometchat_uid}" data-name="${user.user_full_name}">
              <div class="avatar" style="display: block; background-image: url(${user.user_avatar})"></div>
              <span>${user.user_full_name}, ${user.user_age}</span>
            </div>`;
          } else {
            cardList.innerHTML += `<div class="main__card-item" data-id="${user.user_cometchat_uid}" data-name="${user.user_full_name}">
              <div class="avatar" style="display: block; background-image: url(${user.user_avatar})"></div>
              <span>${user.user_full_name}, ${user.user_age}</span>
            </div>`;
          }
        });
        ...
      }
    };
    ...
    const showMainCard = () => {
      mainCardActions.classList.remove('hide');
      mainCardItemContainer.classList.remove('hide');
      mainCardEmptyMessage.classList.add('hide');
    };
    ...
    // call api to load recommended users.
    const loadRecommendedUsers = () => {
      axios
        .post("/users/recommend", {
          gender: authenticatedUser.gender === "Male" ? "Female" : "Male",
          ccUid: authenticatedUser.uid,
        })
        .then((res) => {
          if (res && res.data && res.data.length !== 0) {
            showMainCard();
            renderCardList(res.data);
          }
        })
        .catch((error) => {
        });
    };
    ...
    loadRecommendedUsers();
    ...
  }
  ...
});