fix: 🍰 Suggestion List Filter (#4296)

* Fix suggestion list filter

* fix tests after MAPBOX changed their IDs again

* Add spacebar selection functionality for mentions

* Add tests

* Fix linting

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>

backend/src/schema/resolvers/users/location.spec.js

@@ -114,10 +114,22 @@ describe('Location Service', () => {
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([
       { id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
-      { id: 'place.15095411613564380', place_name: 'Berlin, Maryland, United States' },
+      {
-      { id: 'place.5225018734564380', place_name: 'Berlin, Connecticut, United States' },
+        id: expect.stringMatching(/^place\.[0-9]+$/),
-      { id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, United States' },
+        place_name: 'Berlin, Maryland, United States',
-      { id: 'place.4035845612564380', place_name: 'Berlin Township, New Jersey, United States' },
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, Connecticut, United States',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, New Jersey, United States',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin Township, New Jersey, United States',
+      },
     ])
   })
 
@@ -128,11 +140,23 @@ describe('Location Service', () => {
     }
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([
-      { id: 'place.14094307404564380', place_name: 'Berlin, Deutschland' },
+      { id: expect.stringMatching(/^place\.[0-9]+$/), place_name: 'Berlin, Deutschland' },
-      { id: 'place.15095411613564380', place_name: 'Berlin, Maryland, Vereinigte Staaten' },
+      {
-      { id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, Vereinigte Staaten' },
+        id: expect.stringMatching(/^place\.[0-9]+$/),
-      { id: 'place.10735893248465990', place_name: 'Berlin Heights, Ohio, Vereinigte Staaten' },
+        place_name: 'Berlin, Maryland, Vereinigte Staaten',
-      { id: 'place.1165756679564380', place_name: 'Berlin, Massachusetts, Vereinigte Staaten' },
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, New Jersey, Vereinigte Staaten',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin Heights, Ohio, Vereinigte Staaten',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, Massachusetts, Vereinigte Staaten',
+      },
     ])
   })
 

webapp/components/Editor/Editor.spec.js

@@ -99,6 +99,37 @@ describe('Editor.vue', () => {
         })
       })
 
+      it('suggestion list returns results prefixed by query', () => {
+        const manyUsersList = []
+        for (let i = 0; i < 10; i++) {
+          manyUsersList.push({ id: `user${i}` })
+          manyUsersList.push({ id: `admin${i}` })
+          manyUsersList.push({ id: `moderator${i}` })
+        }
+        propsData.users = manyUsersList
+        wrapper = Wrapper()
+        const suggestionList = wrapper.vm.editor.extensions.options.mention.onFilter(
+          propsData.users,
+          'moderator',
+        )
+        expect(suggestionList).toHaveLength(10)
+        for (var i = 0; i < suggestionList.length; i++) {
+          expect(suggestionList[i].id).toMatch(/^moderator.*/)
+        }
+      })
+
+      it('exact match appears at the top of suggestion list', () => {
+        const manyUsersList = []
+        for (let i = 0; i < 25; i++) {
+          manyUsersList.push({ id: `user${i}` })
+        }
+        propsData.users = manyUsersList
+        wrapper = Wrapper()
+        expect(
+          wrapper.vm.editor.extensions.options.mention.onFilter(propsData.users, 'user7')[0].id,
+        ).toMatch('user7')
+      })
+
       it('sets the Hashtag items to the hashtags', () => {
         propsData.hashtags = [
           {

webapp/components/Editor/Editor.vue

@@ -185,6 +185,9 @@ export default {
           if (this.suggestionType === HASHTAG && this.query !== '') {
             this.selectItem({ id: this.query })
           }
+          if (this.suggestionType === MENTION && item) {
+            this.selectItem(item)
+          }
           return true
 
         default:
@@ -199,9 +202,14 @@ export default {
 
       const filteredList = items.filter((item) => {
         const itemString = item.slug || item.id
-        return itemString.toLowerCase().includes(query.toLowerCase())
+        return itemString.toLowerCase().startsWith(query.toLowerCase())
       })
-      return filteredList.slice(0, 15)
+      const sortedList = filteredList.sort((itemA, itemB) => {
+        const aString = itemA.slug || itemA.id
+        const bString = itemB.slug || itemB.id
+        return aString.length - bString.length
+      })
+      return sortedList.slice(0, 15)
     },
     sanitizeQuery(query) {
       if (this.suggestionType === HASHTAG) {