JSFiddle - React, Tailwind, and code Playground

by Terry Young

JavaScript

$(document).ready(function () {
        
        // Private Constants/Enums
        var onlineStatuses = {
            offline: 1,
            online: 2,
            away: 4,
            dnd: 8
        };        
    
        
        // I'm assuming this will end up being 'public'
        
        var ChatProvider = {
    
            // ----------------------------------------------------
            // Public Functions
            
            // Functions start with a verb. E.g. doThis(), doThat()
            addFriends: function (friends) {
    
                // Function can accept a single friend object or array of friend objects
                if (!$.isArray(friends)) friends = [friends]; 
    
                // update ChatProvider.friends
                this.friends.concat(friends).unique();
    
                // update interface
                var $friends = $.map(friends, function (i, friend) {
                    // create a <div class="friend"> and add to <div class="friendsList">
                    var $friend // = ......
    
                    return $friend;
                });
                this.ui.friends = this.ui.friends.add($friends);
            },
            
            removeFriends: function (friends) {
                // (more code: same approach as addFriends)
            },
            
            refreshFriends: function (friends) {
                // compare 'friends' with ChatProvider.friends
                // and call addFriends() and removeFriends() accordingly
            },
            
            alert: function (str) {
            },
            // more ...

            
            // ----------------------------------------------------
            // Application Event Handlers
            
            // 'Application' event handlers are 'onWhatHappens()'
            onSomethingHappens: function () {
                // (more code...)
            },
            
            onSomethingElseHappens: function ()...