JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
<div class="col-md-1">
        	 <div class="sidebar-nav">
               Rooms list Box
        	 </div>
		</div>        <div class="col-md-6 current-chat">
            <div class="row chat-toolbar-row">
                <div class="col-sm-12">
                    <div class="btn-group chat-toolbar" role="group" aria-label="...">
                        <button id="chat-invite" class="btn btn-default ticket-option" type="button">
                          <i class="glyphicon glyphicon-user"></i> View Profile
                        </button>
                        <button id="chat-invite" class="btn btn-default ticket-option" type="button">
                          <i class="glyphicon glyphicon-plus"></i> Create Room
                        </button>
                        <button id="chat-invite" class="btn btn-default ticket-option" type="button">
                          <i class="glyphicon glyphicon-log-out"></i> Logout
                        </button>

                    </div>
                </div>
            </div>
            <div class="row current-chat-area">
                <div class="col-md-12">
                      <ul class="media-list">
                        <li class="media">
                            <div class="media-body">
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object img-circle " src="https://app.teamsupport.com/dc/1078/UserAvatar/1839999/48/1470773165634">
                                    </a>
             ...

CSS

.blue { background: blue }
.grey { background: grey }
.chats-row { height: 100vh; }
.chats-row div { 
    height: 50%;
    border: 1px solid #ddd;
    padding: 0px; 
}

.list-group-item {
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    
}
.list-group-item:first-child {
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}


.current-chat {
    height: 100vh; 
    border: 1px solid #ddd;
}

.chat-toolbar-row {
    background-color: #f5f5f5;
}

.chat-toolbar {
    margin-top: 10px;
    margin-bottom: 10px;
}

.current-chat-area {
    padding-top: 10px;
    overflow: auto;
    height: 77vh;
    
}

.current-chat-footer {
    position: absolute;
    padding:0px;
    bottom: 0;
 }
.media-object{
  width:30px;
  height:30px;
}

hr,br{
  padding:0px;
  margin:0px;
}
/*.media-list{
  height:350px;
  overflow:auto;
}*/

JavaScript

(function(){
  
  var newUUID =PubNub.generateUUID();
  var pubnub = new PubNub({uuid: newUUID, publishKey : 'pub-c-07663a0e-b4a5-4bd1-af00-8ba97ee2b9a1', subscribeKey : 'sub-c-432706e2-f830-11e6-b0ac-0619f8945a4f' });
      function $(id) { return document.getElementById(id); }
      var box = $('box'), input = $('input'), channel = 'room1';
      
     
      pubnub.addListener({
        
        
        
          message: function(obj) {
              box.innerHTML = (''+obj.message).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML
          },
          presence: function(p) {
        
         var action = p.action; // Can be join, leave, state-change or timeout
        var channelName = p.channel; // The channel for which the message belongs
        var occupancy = p.occupancy; // No. of users connected with the channel
        var state = p.state; // User State
        var channelGroup = p.subscription; //  The channel group or wildcard subscription match (if exists)
        var publishTime = p.timestamp; // Publish timetoken
        var timetoken = p.timetoken;  // Current timetoken
        var uuid = p.uuid; 
        //alert(" user "+uuid +" has "+action )
        //alert(occupancy)
       if(action === 'state-change') {
            if(p.state.isTyping === true) {
                alert(uuid + ' is typing...');
            }      
        }
        
       // alert(occupancy)
        
         }
          
          });
      pubnub.subscribe({channels:[channel] , withPresence: true });
      
      
      input.addEventListener('keyup', function(e) {
      
          if ((e.keyCode || e.charCode) === 13) {
          if(input.value.length>0)
            pubnub.publish({channel : channel,message : input.value,x : (input.value='')});
        }
      });
      
pubnub.history(
    {
        channel: 'room1',
        reverse: false, // true to send via post
        count: 100, // how many items to fetch
        stringifiedTimeToken: false // false is the...