Implement loading more statuses when searching

This commit is contained in:
Ekaterina Vaartis 2021-08-16 21:30:07 +03:00 committed by Sam Therapy
parent c5ba13f2bf
commit e10323777b
Signed by: sam
GPG key ID: 4D8B07C18F31ACBD
3 changed files with 50 additions and 11 deletions

View file

@ -32,7 +32,11 @@ const Search = {
userIds: [],
statuses: [],
hashtags: [],
currenResultTab: 'statuses'
currenResultTab: 'statuses',
statusesOffset: 0,
lastStatusFetchCount: 0,
lastQuery: ''
}
},
computed: {
@ -69,18 +73,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) {

View file

@ -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>

View file

@ -448,6 +448,7 @@
"search": {
"hashtags": "Hashtags",
"no_results": "No results",
"load_more": "Load more results",
"people": "People",
"people_talking": "{count} people talking",
"person_talking": "{count} person talking"