JSFiddle - React, Tailwind, and code Playground

by SwampFall

JavaScript

var prv_update = 0;
var prv_partner = 0;
var chat_oldest = 0;
var load_lock = false;
var conv_upd_lock = false;
var auto_friendbar_lock = false;
$(document).ready(function() {
  $("#private_chat textarea").on("focus", function() {
    $("#private_chat .chat_inner").scrollTop(1e4);
  });
  var _originalHeight = $(window).height()
  $(window).resize(function() {
    if ($(window).height != _originalHeight) {
      $("#private_chat .chat_inner").scrollTop(1e4);
    }
  });
});

function openPrivateChat(u, uid) {
  prv_update = 0;
  prv_partner = 0;
  chat_oldest = 0;
  $("#private_chat .chat_head span").text(u).unbind().click(function() {
    window.open('//pokeheroes.com/userprofile?name=' + u, '_blank');
  });
  $("#private_chat .chat_inner").text("");
  $.ajax({
    type: 'POST',
    url: "//palpad.pokeheroes.com/loadchat.php?" + Math.random(),
    data: {
      'partner': uid,
      'date_lim': '',
      'upd': 'y'
    },
    xhrFields: {
      withCredentials: true
    }
  }).done(function(msg) {
    var c = $("#private_chat .chat_inner");
    c.html(msg);
    $("#private_chat textarea").focus();
    prv_partner = uid;
    loadConversationList();
    load_lock = false;
    load_lock = false;
    c.scrollTop(c.prop("scrollHeight") - c.prop("clientHeight"));
  });
  $("#private_chat").css('display', 'flex');
  $("#private_chat textarea").show().focus();
  $("#private_chat .pal_error").hide();
}

function closePrivateChat() {
  $("#private_chat").hide();
  clearChatTextarea();
  prv_update = 0;
  prv_partner = 0;
  chat_oldest = 0;
}

function reportPrivateChat() {
  if (confirm("Are you sure you want to report this user?")) {
    location.href = 'report_palpad?name=' + $("#private_chat .chat_head span").text();
  }
}

function chatError(e) {
  $("#private_chat textarea").hide();
  $("#private_chat .pal_error").html(e).show();
}

function updatePrivateChat() {
  if (!load_lock) {
    if (prv_partner > 0) {
      load_lock = true;
      $.ajax({
        type:...