Make search say No more results when there are current results

Use searchType to only search for statuses when searching for more results

src/components/search/search.js

@@ -8,6 +8,7 @@ import {
   faCircleNotch,
   faSearch
 } from '@fortawesome/free-solid-svg-icons'
+import { uniqBy } from 'lodash'
 
 library.add(
   faCircleNotch,
@@ -32,7 +33,11 @@ const Search = {
       userIds: [],
       statuses: [],
       hashtags: [],
-      currenResultTab: 'statuses'
+      currenResultTab: 'statuses',
+
+      statusesOffset: 0,
+      lastStatusFetchCount: 0,
+      lastQuery: ''
     }
   },
   computed: {
@@ -61,26 +66,42 @@ const Search = {
       this.$router.push({ name: 'search', query: { query } })
       this.$refs.searchInput.focus()
     },
-    search (query) {
+    search (query, searchType = null) {
       if (!query) {
         this.loading = false
         return
       }
 
       this.loading = true
-      this.userIds = []
-      this.statuses = []
-      this.hashtags = []
       this.$refs.searchInput.blur()
+      if (this.lastQuery !== query) {
+        this.userIds = []
+        this.hashtags = []
+        this.statuses = []
 
-      this.$store.dispatch('search', { q: query, resolve: true })
+        this.statusesOffset = 0
+        this.lastStatusFetchCount = 0
+      }
+
+      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, 'type': searchType })
         .then(data => {
           this.loading = false
-          this.userIds = map(data.accounts, 'id')
+
-          this.statuses = data.statuses
+          let oldLength = this.statuses.length
-          this.hashtags = data.hashtags
+
+          // Always append to old results. If new results are empty, this doesn't change anything
+          this.userIds = this.userIds.concat(map(data.accounts, 'id'))
+          this.statuses = uniqBy(this.statuses.concat(data.statuses), 'id')
+          this.hashtags = this.hashtags.concat(data.hashtags)
+
           this.currenResultTab = this.getActiveTab()
           this.loaded = true
+
+          // Offset from whatever we already have
+          this.statusesOffset = this.statuses.length
+          // Because the amount of new statuses can actually be zero, compare to old lenght instead
+          this.lastStatusFetchCount = this.statuses.length - oldLength
+          this.lastQuery = query
         })
     },
     resultCount (tabName) {

src/components/search/search.vue

@@ -24,7 +24,7 @@
       </button>
     </div>
     <div
-      v-if="loading"
+      v-if="loading && statusesOffset == 0"
       class="text-center loading-icon"
     >
       <FAIcon
@@ -57,12 +57,6 @@
     </div>
     <div class="panel-body">
       <div v-if="currenResultTab === 'statuses'">
-        <div
-          v-if="visibleStatuses.length === 0 && !loading && loaded"
-          class="search-result-heading"
-        >
-          <h4>{{ $t('search.no_results') }}</h4>
-        </div>
         <Status
           v-for="status in visibleStatuses"
           :key="status.id"
@@ -73,6 +67,33 @@
           :statusoid="status"
           :no-heading="false"
         />
+        <button
+          v-if="!loading && loaded && lastStatusFetchCount > 0"
+          class="more-statuses-button button-unstyled -link -fullwidth"
+          @click.prevent="search(searchTerm, 'statuses')"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('search.load_more') }}
+          </div>
+        </button>
+        <div
+          v-else-if="loading && statusesOffset > 0"
+          class="text-center loading-icon"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
+        </div>
+        <div
+          v-if="(visibleStatuses.length === 0 || lastStatusFetchCount === 0) && !loading && loaded"
+          class="search-result-heading"
+        >
+          <h4>
+            {{ visibleStatuses.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
+          </h4>
+        </div>
       </div>
       <div v-else-if="currenResultTab === 'people'">
         <div
@@ -220,4 +241,10 @@
     color: var(--text, $fallback--text);
   }
 }
+
+.more-statuses-button {
+  height: 3.5em;
+  line-height: 3.5em;
+}
+
 </style>

src/i18n/en.json

@@ -448,7 +448,9 @@
         "no_results": "No results",
         "people": "People",
         "people_talking": "{count} people talking",
-        "person_talking": "{count} person talking"
+        "person_talking": "{count} person talking",
+        "no_more_results": "No more results",
+        "load_more": "Load more results"
     },
     "selectable_list": {
         "select_all": "Select all"
@@ -1212,5 +1214,5 @@
     "who_to_follow": {
         "more": "More",
         "who_to_follow": "Who to follow"
-    }
+  }
 }