index.js - Show the List of Recommended Users - Swipe Effects - Client Side - 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");
    let notificationListenerID = authenticatedUser.uid;
    ...
    const addFriend = (matchRequestFrom, matchRequestTo, matchRequestReceiver) => {
      if (matchRequestFrom && matchRequestTo) {
        const url = `https://${config.CometChatAppId}.api-${config.CometChatRegion}.cometchat.io/v3.0/users/${matchRequestTo}/friends`;
        axios.post(url, { accepted: [matchRequestFrom] }, {
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            appId: `${config.CometChatAppId}`,
            apiKey: `${config.CometChatAPIKey}`,
          }
        }).then(res => {
          const notificationMessage = {
            message: `Congratulation! ${authenticatedUser.name} and ${matchRequestReceiver} have been matched`,
            type: 'match',
            receiverId: matchRequestTo
          };
          toastr.info(notificationMessage.message);
          loadFriends();
          sendNotification(notificationMessage);
        }).catch(error => {
        });
      }
    };
    ...
    const sendNotification = ({ message, type, receiverId }) => {
       const receiverID = receiverId;
       const customType = type;
       const receiverType = CometChat.RECEIVER_TYPE.USER;
       const customData = {
         message
       };
       const customMessage = new CometChat.CustomMessage(
         receiverID,
         receiverType,
         customType,
         customData
       );

       CometChat.sendCustomMessage(customMessage).then(
         message => {
         },
         error => {
         }
       );
     };
    ...
    const listenForNotifications = () => {
      CometChat.addMessageListener(
        notificationListenerID,
        new CometChat.MessageListener({
          onTextMessageReceived: (message) => {
            if (message && (!message.category || message.category !== 'call')) {
              const senderUid = message.sender.uid;
              if (selectedContact && selectedContact.uid === senderUid) {
                renderSingleMessage(message);
              } else {
                toastr.info(`There is new message from ${message.sender.name}`);
              }
            }
          },
          onCustomMessageReceived: customMessage => {
            console.log("Custom message received successfully", customMessage);
            // Handle custom message
            if (!selectedContact || (customMessage && customMessage.sender && customMessage.sender.uid && customMessage.sender.uid !== selectedContact.uid && customMessage.data && customMessage.data.customData && customMessage.data.customData.message)) {
              // Display an info toast with no title
              toastr.info(customMessage.data.customData.message);
              if (customMessage && customMessage.type && customMessage.type === 'match') {
                loadFriends();
              }
            }
          }
        })
      );
    };
    ...
    const createMatchRequest = (matchRequestTo, matchRequestReceiver) => {
      if (authenticatedUser && authenticatedUser.uid && authenticatedUser.name && matchRequestTo && matchRequestReceiver) {
        axios.post('/requests/create', {
          matchRequestFrom: authenticatedUser.uid,
          matchRequestSender: authenticatedUser.name,
          matchRequestTo,
          matchRequestReceiver
        }).then(res => {
          console.log(res.data.match_request_status);
          if (res && res.data && res.data.match_request_status && res.data.match_request_status === 1) {
           addFriend(authenticatedUser.uid, matchRequestTo, matchRequestReceiver);
          }
        }).catch(error => { });
      }
    }
    ...
    const swipeRight = (element) => {
      $(element).addClass('rotate-left').delay(700).fadeOut(1);
      $('.main__card-item').find('.status').remove();
      $(element).append('<div class="status like">Like!</div>');
      $(element).next().removeClass('rotate-left rotate-right').fadeIn(400);
      const matchRequestTo = $(element).attr('data-id');
      const matchRequestReceiver = $(element).attr('data-name');
      createMatchRequest(matchRequestTo, matchRequestReceiver);
      setTimeout(() => {
       shouldHideMainCard();  
      }, 1100)
    };

    const swipeLeft = (element) => {
      $(element).addClass('rotate-right').delay(700).fadeOut(1);
      $('.main__card-item').find('.status').remove();
      $(element).append('<div class="status dislike">Dislike!</div>');
      $(element).next().removeClass('rotate-left rotate-right').fadeIn(400);
      setTimeout(() => {
       shouldHideMainCard();  
      }, 1100);
    };

    const applySwing = () => {
      $(".main__card-item").on("swiperight", function () {
        swipeRight(this);
      });
      $(".main__card-item").on("swipeleft", function () {
        swipeLeft(this);
      });
    };

    const showMainCard = () => {
      mainCardActions.classList.remove('hide');
      mainCardItemContainer.classList.remove('hide');
      mainCardEmptyMessage.classList.add('hide');
    };

    const hideMainCard = () => { 
      mainCardActions.classList.add('hide');
      mainCardItemContainer.classList.add('hide');
      mainCardEmptyMessage.classList.remove('hide');
    };

    const shouldHideMainCard = () => {
      const nextCard = getCurrentCard();
      if (!nextCard) {
        hideMainCard();
      }
    };

    if (dislikeBtn) {
      dislikeBtn.addEventListener('click', function () {
        const currentCard = getCurrentCard();
        if (currentCard) {
          swipeLeft(currentCard);
        } else {
          hideMainCard();
        }
      });
    }

    if (likeBtn) {
      likeBtn.addEventListener('click', function () {
        const currentCard = getCurrentCard();
        if (currentCard) {
          swipeRight(currentCard);
        } else {
          hideMainCard();
        }
      });
    }
    ...
    listenForNotifications();
  } 
  ...
});