app.js

/* Scale login form on page load */
$(() => $('#login-form').addClass('scale-in'));

/* Scale user tiles on page load */
$(() => $('.user-tile').addClass('scale-in'));

$(document).ready(function(){
  $('.modal').modal();
});

$('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrainWidth: false, // Does not change width of dropdown to that of the activator
    hover: true, // Activate on hover
    gutter: 0, // Spacing from edge
    belowOrigin: true, // Displays dropdown below the button
    alignment: 'right', // Displays dropdown with edge aligned to the left of button
    stopPropagation: false // Stops event propagation
  }
);

$(document).ready(function(){
   $('.collapsible').collapsible();
 });

 $('#messages-list li.message').click(function() {
   var message_id = this.value;
   var message_icon = $('#inbox-icon-' + message_id);
   if (message_icon.html().trim() != 'check') {
     var params = new URLSearchParams();
     params.append('action', 'mark_unread');
     params.append('message_id', message_id);
     axios.post('api.php', params).then(function(response) {
       message_icon.html('check');
       message_icon.removeClass('red-text');
     });
   }
 });

function deleteInboxMessage(message_id) {
   var inbox_list_item = $('#in-message-' + message_id);
   var params = new URLSearchParams();
   params.append('action', 'delete_message');
   params.append('message_id', message_id)
   axios.post('api.php', params).then(function(response) {
     inbox_list_item.hide('slide',{direction:'right'},250, function() {
       inbox_list_item.remove();
     });
   });
 }

 function deleteSentMessage(message_id) {
   var sent_list_item = $('#out-message-' + message_id);
   var params = new URLSearchParams();
   params.append('action', 'delete_message');
   params.append('message_id', message_id)
   axios.post('api.php', params).then(function(response) {
     sent_list_item.hide('slide',{direction:'right'},250, function() {
       sent_list_item.remove();
     });
   });
}

 function addToSent(recipient, message) {
   sentList = $('#sent-list');
   var listItem = '<li><div class="collapsible-header">';
   listItem += '<i class="material-icons">arrow_forward</i>';
   listItem += recipient;
   listItem += '</div><div class="collapsible-body"><span>';
   listItem += message;
   listItem += '</span></div></li>';
   sentList.append(listItem);
 }

 $('#send-button').click(function() {
   var recipient_elem = $('#recipient');
   var compose_elem = $('#message-compose');
   var user_id = $('#user-id').val();

   if (!recipient_elem.val().trim()) {
     recipient_elem.addClass('invalid');
     $('#recipient-label').attr('data-error', 'This field is required');
     return;
   }

   if (!compose_elem.val().trim()) return;

   var params = new URLSearchParams();
   params.append('action', 'send_message');
   params.append('user_id', user_id);
   params.append('recipient', recipient_elem.val());
   params.append('message', compose_elem.val());
   axios.post('api.php', params).then(function(response) {
     if (response.data[0] == 'unknown_recipient') {
       recipient_elem.addClass('invalid');
       $('#recipient-label').attr('data-error', 'User not found');
     } else if (response.data[0] == 'success') {
       addToSent(recipient_elem.val(), compose_elem.val());
       recipient_elem.val('');
       compose_elem.val('');
       Materialize.toast('Message sent!', 4000)
     }
   })
 });