itepechi/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity

Improved search experience

Browse source 
fixed invalid variable calls
changed to manage loading state tab by tab
made automatic tab selection less aggressive
made the api call fail-safe
fixed the format of the search result count
This commit is contained in:
itepechi 2023-11-09 07:12:43 +09:00
parent bdc1e9d9c6
commit e8b653737c
2 changed files with 126 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
src/components/search/search.js
View file

@ -15,6 +15,8 @@ library.add(
faSearch
)
const allSearchTypes = Object.freeze(['statuses', 'media', 'accounts', 'hashtags'])
const Search = {
components: {
FollowCard,
@ -28,14 +30,17 @@ const Search = {
data () {
return {
loadedInitially: false,
loading: false,
loading: Object.fromEntries(
allSearchTypes.map((searchType) => [searchType, false])
),
searchTerm: this.query || '',
userIds: [],
statuses: [],
media: [],
hashtags: [],
allTabs: allSearchTypes,
currentResultTab: 'statuses',
preferredTab : 'statuses',
hasUserSelectedTab: false,
statusesOffset: 0,
lastStatusFetchCount: 0,
@ -72,6 +77,10 @@ const Search = {
canSearchFollowing () {
return this.isLoggedIn &&
this.$store.state.instance.searchOptionFollowingEnabled === true
},
hasAtLeastOneResult () {
return allSearchTypes
.some((searchType) => this.getVisibleLength(searchType) > 0)
}
},
mounted () {
@ -97,12 +106,13 @@ const Search = {
},
async search (query, searchType = null) {
if (!query) {
this.loading = false
for (const searchType of allSearchTypes) {
this.loading[searchType] = false
}
return
}
const isNewSearch = this.lastQuery !== query
this.loading = true
this.$refs.searchInput.blur()
if (isNewSearch) {
this.userIds = []
@ -116,92 +126,102 @@ const Search = {
this.lastMediaFetchCount = 0
}
let searchTypes = ['statuses', 'media', 'accounts', 'hashtags']
let searchTypes = allSearchTypes
if (searchType) {
searchTypes = [searchType]
} else if (this.preferredTab !== 'statuses') {
} else if (this.currentResultTab !== 'statuses') {
// Sort search order; selected tab first
searchTypes = [
this.preferredTab,
...searchTypes.filter((tab) => tab !== this.preferredTab)
this.currentResultTab,
...allSearchTypes.filter((tab) => tab !== this.currentResultTab)
]
}
for (const searchType of searchTypes) {
this.loading[searchType] = true
}
let oldStatusesLength = this.statuses.length
let oldMediaLength = this.media.length
let skipMediaSearch = !this.canSearchMediaPosts
for (const searchType of searchTypes) {
if (searchType === 'media' && skipMediaSearch) {
continue
}
let searchOffset
if (searchType === 'statuses') {
searchOffset = this.statusesOffset
} else if (searchType === 'media') {
searchOffset = this.mediaOffset
}
const data = await this.$store.dispatch('search', {
q: query,
resolve: true,
offset: searchOffset,
'type': searchType,
following:
'followingOnly' in this.filter && this.filter.followingOnly
})
// 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')
if ('media' in data) {
this.media = uniqBy(this.media.concat(data.media), 'id')
}
this.hashtags = this.hashtags.concat(data.hashtags)
if (isNewSearch) {
this.currentResultTab = this.getActiveTab()
if (searchType === 'statuses' && data.statuses.length === 0) {
// safe to assume that there are no media posts
skipMediaSearch = true
try {
if (searchType === 'media' && skipMediaSearch) {
continue
}
}
if (
!loadedInitially &&
Object.values(data).some((result) => result.length > 0)
) {
// Show results on the first meaningful response
this.loadedInitially = true
}
let searchOffset
if (searchType === 'statuses') {
searchOffset = this.statusesOffset
} else if (searchType === 'media') {
searchOffset = this.mediaOffset
}
if (searchType === 'statuses') {
// Offset from whatever we already have
this.statusesOffset = this.statuses.length
// Because the amount of new statuses can actually be zero, compare to old length instead
this.lastStatusFetchCount = this.statuses.length - oldStatusesLength
} else if (searchType === 'media') {
this.mediaOffset = this.media.length
this.lastMediaFetchCount = this.media.length - oldMediaLength
const data = await this.$store.dispatch('search', {
q: query,
resolve: true,
offset: searchOffset,
'type': searchType,
following:
'followingOnly' in this.filter && this.filter.followingOnly
})
// 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')
if ('media' in data) {
this.media = uniqBy(this.media.concat(data.media), 'id')
}
this.hashtags = this.hashtags.concat(data.hashtags)
if (isNewSearch) {
if (!this.hasUserSelectedTab) {
this.currentResultTab = this.getFirstTabWithResults()
}
if (searchType === 'statuses' && data.statuses.length === 0) {
// Safe to assume that there are no media posts
skipMediaSearch = true
}
}
} catch (error) {
console.error(error)
} finally {
if (!this.loadedInitially && this.hasAtLeastOneResult) {
// Show results on the first meaningful response
this.loadedInitially = true
}
this.loading[searchType] = false
if (searchType === 'statuses') {
// Offset from whatever we already have
this.statusesOffset = this.statuses.length
// Because the amount of new statuses can actually be zero, compare to old length instead
this.lastStatusFetchCount = this.statuses.length - oldStatusesLength
} else if (searchType === 'media') {
this.mediaOffset = this.media.length
this.lastMediaFetchCount = this.media.length - oldMediaLength
}
}
}
this.lastQuery = query
this.loadedInitially = true
this.loading = false
for (const searchType of allSearchTypes) {
this.loading[searchType] = false
}
},
resultCount (tabName) {
const length = this[tabName].length
resultCount (tab) {
const length = this.getVisibleLength(tab)
if (length === 0 || !this.loadedInitially) {
return ''
}
if (
(tabName === 'visibleStatuses' && this.lastStatusFetchCount !== 0) ||
(tabName === 'visibleMedia' && this.lastMediaFetchCount !== 0)
(tab === 'statuses' && this.lastStatusFetchCount !== 0) ||
(tab === 'media' && this.lastMediaFetchCount !== 0)
) {
return ` (${length}+)`
}
@ -210,24 +230,11 @@ const Search = {
},
onResultTabSwitch (key) {
this.currentResultTab = key
this.preferredTab = key
this.loading = false
this.hasUserSelectedTab = true
},
getActiveTab () {
const available = {
statuses: this.visibleStatuses.length > 0,
media: this.visibleMedia.length > 0,
accounts: this.users.length > 0,
hashtags: this.hashtags.length > 0,
}
if (available[this.preferredTab]) {
return this.preferredTab
}
const tabOrder = ['statuses', 'media', 'accounts', 'hashtags']
for (const tab of tabOrder) {
if (available[tab]) {
getFirstTabWithResults () {
for (const tab of allSearchTypes) {
if (this.getVisibleLength(tab) > 0) {
return tab
}
}
@ -236,6 +243,17 @@ const Search = {
},
lastHistoryRecord (hashtag) {
return hashtag.history && hashtag.history[0]
},
getVisibleLength (tab) {
if (tab === 'statuses') {
return this.visibleStatuses.length
} else if (tab === 'media') {
return this.visibleMedia.length
} else if (tab === 'accounts') {
return this.users.length
} else if (tab === 'hashtags') {
return this.hashtags.length
}
}
}
}

57
src/components/search/search.vue
View file

@ -27,23 +27,7 @@
<FAIcon icon="search" />
</button>
</div>
<div
v-if="
loading &&
visibleStatuses.length === 0 &&
visibleMedia.length === 0 &&
users.length === 0 &&
hashtags.length === 0
"
class="text-center loading-icon"
>
<FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div>
<div v-else-if="loadedInitially">
<div v-if="loadedInitially">
<div class="search-nav-heading">
<tab-switcher
ref="tabSwitcher"
@ -52,16 +36,16 @@
>
<span
key="statuses"
:label="$t('user_card.statuses') + resultCount('visibleStatuses')"
:label="$t('user_card.statuses') + resultCount('statuses')"
/>
<span
v-if="canSearchMediaPosts"
key="media"
:label="$t('user_card.media') + resultCount('visibleMedia')"
:label="$t('user_card.media') + resultCount('media')"
/>
<span
key="accounts"
:label="$t('search.people') + resultCount('users')"
:label="$t('search.people') + resultCount('accounts')"
/>
<span
key="hashtags"
@ -71,6 +55,16 @@
</div>
</div>
<div class="panel-body">
<div
v-if="!loadedInitially"
class="text-center loading-icon"
>
<FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div>
<div v-if="currentResultTab === 'statuses'">
<Conversation
v-for="status in visibleStatuses"
@ -80,7 +74,7 @@
:status-id="status.id"
/>
<button
v-if="!loading && loadedInitially && lastStatusFetchCount > 0"
v-if="!loading['statuses'] && loadedInitially && lastStatusFetchCount > 0"
class="more-statuses-button button-unstyled -link -fullwidth"
@click.prevent="search(searchTerm, 'statuses')"
>
@ -89,7 +83,7 @@
</div>
</button>
<div
v-else-if="loading && statusesOffset > 0"
v-else-if="loading['statuses'] && statusesOffset > 0"
class="text-center loading-icon"
>
<FAIcon
@ -99,7 +93,10 @@
/>
</div>
<div
v-if="(visibleStatuses.length === 0 || lastStatusFetchCount === 0) && !loading && loadedInitially"
v-if="
(visibleStatuses.length === 0 || lastStatusFetchCount === 0) &&
!loading['statuses'] && loadedInitially
"
class="search-result-heading"
>
<h4>
@ -116,7 +113,7 @@
:status-id="media.id"
/>
<button
v-if="!loading && loadedInitially && lastMediaFetchCount > 0"
v-if="!loading['media'] && loadedInitially && lastMediaFetchCount > 0"
class="more-statuses-button button-unstyled -link -fullwidth"
@click.prevent="search(searchTerm, 'media')"
>
@ -125,7 +122,7 @@
</div>
</button>
<div
v-else-if="loading && mediaOffset > 0"
v-else-if="loading['media'] && mediaOffset > 0"
class="text-center loading-icon"
>
<FAIcon
@ -135,7 +132,10 @@
/>
</div>
<div
v-if="(visibleMedia.length === 0 || lastMediaFetchCount === 0) && !loading && loadedInitially"
v-if="
(visibleMedia.length === 0 || lastMediaFetchCount === 0) &&
!loading['media'] && loadedInitially
"
class="search-result-heading"
>
<h4>
@ -145,7 +145,7 @@
</div>
<div v-else-if="currentResultTab === 'accounts'">
<div
v-if="users.length === 0 && !loading && loadedInitially"
v-if="users.length === 0 && !loading['accounts'] && loadedInitially"
class="search-result-heading"
>
<h4>{{ $t('search.no_results') }}</h4>
@ -159,7 +159,7 @@
</div>
<div v-else-if="currentResultTab === 'hashtags'">
<div
v-if="hashtags.length === 0 && !loading && loadedInitially"
v-if="hashtags.length === 0 && !loading['hashtags'] && loadedInitially"
class="search-result-heading"
>
<h4>{{ $t('search.no_results') }}</h4>
@ -294,5 +294,4 @@
height: 3.5em;
line-height: 3.5em;
}
</style>