From 3117623f3000eed03ec7828c3ed112bd67366620 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Mon, 16 Aug 2021 21:30:07 +0300
Subject: [PATCH] Implement loading more statuses when searching
---
src/components/search/search.js | 20 ++++++++++++----
src/components/search/search.vue | 40 ++++++++++++++++++++++++++------
src/i18n/en.json | 3 ++-
3 files changed, 51 insertions(+), 12 deletions(-)
diff --git a/src/components/search/search.js b/src/components/search/search.js
index b62bc2c50e..6347febff1 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -30,7 +30,11 @@ const Search = {
userIds: [],
statuses: [],
hashtags: [],
- currenResultTab: 'statuses'
+ currenResultTab: 'statuses',
+
+ statusesOffset: 0,
+ lastStatusFetchCount: 0,
+ lastQuery: ''
}
},
computed: {
@@ -67,18 +71,26 @@ const Search = {
this.loading = true
this.userIds = []
- this.statuses = []
this.hashtags = []
this.$refs.searchInput.blur()
+ if (this.lastQuery !== query) {
+ this.statuses = []
+ this.statusesOffset = 0
+ this.lastStatusFetchCount = 0
+ }
- this.$store.dispatch('search', { q: query, resolve: true })
+ this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset })
.then(data => {
this.loading = false
this.userIds = map(data.accounts, 'id')
- this.statuses = data.statuses
+ this.statuses = this.statuses.concat(data.statuses)
this.hashtags = data.hashtags
this.currenResultTab = this.getActiveTab()
this.loaded = true
+
+ this.statusesOffset += data.statuses.length
+ this.lastStatusFetchCount = data.statuses.length
+ this.lastQuery = query
})
},
resultCount (tabName) {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index b7bfc1f395..5d8a6715c1 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -55,12 +55,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"
@@ -71,6 +65,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)"
+ >
+ <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>
+ {{ $t('search.no_results') }}
+ </h4>
+ </div>
</div>
<div v-else-if="currenResultTab === 'people'">
<div
@@ -208,6 +229,11 @@
color: $fallback--text;
color: var(--text, $fallback--text);
}
-}
+ }
+
+ .more-statuses-button {
+ height: 3.5em;
+ line-height: 3.5em;
+ }
</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b31e488083..6026b33eed 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -827,7 +827,8 @@
"hashtags": "Hashtags",
"person_talking": "{count} person talking",
"people_talking": "{count} people talking",
- "no_results": "No results"
+ "no_results": "No results",
+ "load_more": "Load more results"
},
"password_reset": {
"forgot_password": "Forgot password?",
--
GitLab