Best way to implement React Notifications


#1

I am adopting a dashboard admin from TF. My question is, does it make sense to create components of things such as notifications or we simply use them as is (jQuery).

The notification code looks like this:

(function($) {
    
        'use strict';
    
        var Notification = function(container, options) {
    
            var self = this;
    
            // Element collection
            self.container = $(container); // 'body' recommended
            self.notification = $('<div class="pgn"></div>');
            self.options = $.extend(true, {}, $.fn.pgNotification.defaults, options);
    
            if (!self.container.find('.pgn-wrapper[data-position=' + this.options.position + ']').length) {
                self.wrapper = $('<div class="pgn-wrapper" data-position="' + this.options.position + '"></div>');
                self.container.append(self.wrapper);
            } else {
                self.wrapper = $('.pgn-wrapper[data-position=' + this.options.position + ']');
            }
    
            self.alert = $('<div class="alert"></div>');
            self.alert.addClass('alert-' + self.options.type);
    
            if (self.options.style == 'bar') {
                new BarNotification();
            } else if (self.options.style == 'flip') {
                new FlipNotification();
            } else if (self.options.style == 'circle') {
                new CircleNotification();
            } else if (self.options.style == 'simple') {
                new SimpleNotification();
            } else { // default = 'simple'
                new SimpleNotification();
            }
    
            // Notification styles
            function SimpleNotification() {
    
                self.notification.addClass('pgn-simple');
    
                self.alert.append(self.options.message);
                if (self.options.showClose) {
                    var close = $('<button type="button" class="close" data-dismiss="alert"></button>')
                        .append('<span aria-hidden="true">&times;</span>')
                        .append('<span class="sr-only">Close</span>');
    
                    self.alert.prepend(close);
                }
    
            }
    
            function BarNotification() {
    
                self.notification.addClass('pgn-bar');
    
                self.alert.append('<span>' + self.options.message + '</span>');
                self.alert.addClass('alert-' + self.options.type);
    
    
                if (self.options.showClose) {
                    var close = $('<button type="button" class="close" data-dismiss="alert"></button>')
                        .append('<span aria-hidden="true">&times;</span>')
                        .append('<span class="sr-only">Close</span>');
    
                    self.alert.prepend(close);
                }
    
            }
    
            function CircleNotification() {
    
                self.notification.addClass('pgn-circle');
    
                var table = '<div>';
                if (self.options.thumbnail) {
                    table += '<div class="pgn-thumbnail"><div>' + self.options.thumbnail + '</div></div>';
                }
    
                table += '<div class="pgn-message"><div>';
    
                if (self.options.title) {
                    table += '<p class="bold">' + self.options.title + '</p>';
                }
                table += '<p>' + self.options.message + '</p></div></div>';
                table += '</div>';
    
                if (self.options.showClose) {
                    table += '<button type="button" class="close" data-dismiss="alert">';
                    table += '<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>';
                    table += '</button>';
                }
    
    
                self.alert.append(table);
                self.alert.after('<div class="clearfix"></div>');
    
            }
    
            function FlipNotification() {
    
                self.notification.addClass('pgn-flip');
                self.alert.append("<span>" + self.options.message + "</span>");
                if (self.options.showClose) {
                    var close = $('<button type="button" class="close" data-dismiss="alert"></button>')
                        .append('<span aria-hidden="true">&times;</span>')
                        .append('<span class="sr-only">Close</span>');
    
                    self.alert.prepend(close);
                }
    
            }
    
            self.notification.append(self.alert);
    
            // bind to Bootstrap closed event for alerts 
            self.alert.on('closed.bs.alert', function() {
                self.notification.remove();
                self.options.onClosed();
                // refresh layout after removal
            });
    
            return this; // enable chaining
        };
    
        Notification.VERSION = "1.0.0";
        
        Notification.prototype.show = function() {
    
            // TODO: add fadeOut animation on show as option
            this.wrapper.prepend(this.notification);
    
            this.options.onShown();
    
            if (this.options.timeout != 0) {
                var _this = this;
                // settimeout removes scope. use .bind(this)
                setTimeout(function() {
                    this.notification.fadeOut("slow", function() {
                        $(this).remove();
                        _this.options.onClosed();
                    });
                }.bind(this), this.options.timeout);
            }
    
        };
    
        $.fn.pgNotification = function(options) {
            return new Notification(this, options);
        };
    
        $.fn.pgNotification.defaults = {
            style: 'simple',
            message: null,
            position: 'top-right',
            type: 'info',
            showClose: true,
            timeout: 4000,
            onShown: function() {},
            onClosed: function() {}
        }
    })(window.jQuery);