intermix prefetched usernames and API responses, de-duplicating and c…

…lient-side filtering (publiclab#9820)

app/assets/javascripts/atWhoAutoComplete.js

@@ -2,13 +2,62 @@
 
   // settings at https://github.com/ichord/At.js/wiki/Base-Document#settings
 
+  let userObj = null;
+
+  // stores recently active users in userObj
+  (function storeRecentlyActiveUsers() {
+    fetch('/users/active').then(res => res.json()).then(data => { userObj = data })
+  })();
+
   // checks if the 'name' key in the JSON data is named 'username' or 'name' and then returns the
   // correct key-value
   const displayName = (item) => item.username ? item.username : item.name;
 
+  // displays a recently active text for prioritised users
+  const displayPriorityUsers = item => {
+    const username = displayName(item);
+    if(item.priority) {
+      return username + ' <small>recently active</small>'
+    }
+    return username
+  }
+
+  // returns a list of users that match the query
+  const filterUsers = query => {
+    const users = []
+    userObj.forEach(str => {
+      if(str.username.includes(query)){
+        users.push(str.username)
+      }
+    });
+
+    return users
+  };
+
+  // remove duplicates of prioritised usernames
+  const removeDuplicates = (userArr, prioritisedUsers) => {
+    const newData = []
+    userArr.forEach(i => {
+      if(!prioritisedUsers.includes(i.doc_title)){
+        newData.push({name: i.doc_title, priority: false})
+      }
+    });
+
+    return newData;
+  }
+
+  // merges normal and prioritised usernames
+  const mergeUsers = (recentlyActiveUsers, normalUsers) => {
+    const prioritisedUsers = recentlyActiveUsers.map(user => { 
+      return { name: user, priority: true }
+    })
+
+    return prioritisedUsers.concat(normalUsers);
+  }
+
   var at_config = {
     at: "@",
-    displayTpl: (item) => `<li>${displayName(item)}</li>`,
+    displayTpl: (item) => `<li>${displayPriorityUsers(item)}</li>`,
     insertTpl: (item) => `@${displayName(item)}`,
     // loads and saves remote JSON data by URL
     data: '/users/active',
@@ -17,7 +66,10 @@
       remoteFilter: debounce(function(query, callback) {
         $.getJSON("/api/srch/profiles?query=" + query + "&sort_by=recent&field=username", {}, function(data) {
           if (data.hasOwnProperty('items') && data.items.length > 0) {
-            callback(data.items.map(function(i) { return i.doc_title }));
+            const prioritisedUsers = filterUsers(query);
+            const normalUsers = removeDuplicates(data.items, prioritisedUsers);
+            const mergedUsers = mergeUsers(prioritisedUsers, normalUsers);
+            callback(mergedUsers);
           }
          });
         }, 200)

test/system/comment_test.rb

@@ -468,6 +468,13 @@ def get_path(page_type, path)
       # 2nd assertion: check if image uploaded
       assert_selector('#comment-preview-edit-' + fresh_comment_id_num + ' img', count: 1)
     end
+
+    test "#{page_type_string}: prefetch recently active users" do
+      visit get_path(page_type, nodes(node_name).path) 
+      page.find('#text-input-main').click.fill_in with: '@'
+      # checks for the list of recently active users
+      assert_selector('#atwho-ground-text-input-main .atwho-view .atwho-view-ul li')
+    end
   end
 
   # PART 3: TESTS for ALL PAGE TYPES!