SteemPlus [2.17.6] - Multiple instances of following indication bei...

Project Information

Repository: https://github.com/stoodkev/SteemPlus/
Project Name: SteemPlus
Publisher: @stoodkev

Expected behavior

When I have the "Author Popup Information Enabled" and when clicking on an author, I should be given an indication of whether or not that author is following me or not following me. I should only be given one instance of this information no matter how many times I press the author button.

Actual behaviour

When I have the "Author Information Pop Up" enabled and when clicking on an author, I should be given an indication of whether or not that author is following me. When you press the author's name multiple times, you will get multiple instances of whether or not the user is following you.

How to reproduce

From a fresh install download SteemPlus here
Complete the on-boarding flow and sign in via SteemConnect
You will be redirected to Steemit.com (if you're already on the site, refresh to ensure the SteemPlus extension is working as expected)
Go to settings ensure you have “Author Information Pop Up” enabled within the settings shown in extensions pop up window, this should be enabled by default.
Go to any post.
Go down to the bottom bar, if you have floating bottom bar enabled (enabled by default) it will show straight away.
Click on the author's name who made this post 5 times.
Note that whether or not they're following you will be shown 5 times.

Recording of issue

The following video shows the issue in more detail:

Environment

Browser: Google Chrome (Version 65.0.3325.162 (Official Build) (64-bit))
Device: MacBook Pro (Retina, 15-inch, Late 2013)
Operating system: MacOS HighSierra Version 10.13
Application Version of Testing: Version: 2.17.6

Issue Resolution

Everytime that you click the author on SteemPlus it calls openAuthorPopupInfo(element) in author_popup_info.js. The first thing it looks to do is create the container which holds the information, this can be seen here:

if (isSteemit) {
        userAuthorPopupInfo = element[0].pathname.replace('/@', '');
        $('.Author__dropdown').append('<hr><div class="author-popup-message"></div>');

Once created it will make an ajax request to gather various information about the author you clicked on, following the ajax request the following will take place:

if (isFollowing !== undefined) {
                $('.author-popup-message').append('<span class="author-popup-witness">Following you</span><br>');
            }
            // If not
            else {
                $('.author-popup-message').append('<span class="author-popup-witness">Not following you</span><br>');
            }

As you can see, upon each being returned it will append to .author-popup-message therefore for each ajax request it append a new result and this is why you will get multiple instances occuring.

This could be resolved by aborting the current request if a new request takes places. The following steps show how this could be completed.

First, we will define a new variable outside of openAuthorPopupInfo(element) and set this to null, this will look like this:

let currentRequest = null;

following this we will then assign the variable to that of the ajax request, as seen below:

// Get followers from steemSQL
    currentRequest = $.ajax({
        type: "GET",
        beforeSend: function (xhttp) {
            xhttp.setRequestHeader("Content-type", "application/json");
            xhttp.setRequestHeader("X-Parse-Application-Id", chrome.runtime.id);
        },

and then finally we will add an if statement into beforeSend which will check if the current request is not null and abort the current request if so. This will look like the following:

beforeSend: function (xhttp) {
            xhttp.setRequestHeader("Content-type", "application/json");
            xhttp.setRequestHeader("X-Parse-Application-Id", chrome.runtime.id);
            if (currentRequest != null) {
                currentRequest.abort();
            }
        },

The only problem with this solution is that it could take a little while to display the result in the scenario a user presses the author numerous times successively, however, in that event, the API would return a 429 and therefore you get the same experience.

The following video shows the resolution in place, before and after.