Make block & mute lists able to load more

This commit is contained in:
tusooa 2023-02-21 00:39:16 -05:00
parent eec27700f0
commit e516eee479
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
5 changed files with 55 additions and 14 deletions

View File

@ -1,9 +1,13 @@
<template> <template>
<div class="list"> <div
class="list"
role="list"
>
<div <div
v-for="item in items" v-for="item in items"
:key="getKey(item)" :key="getKey(item)"
class="list-item" class="list-item"
role="listitem"
> >
<slot <slot
name="item" name="item"

View File

@ -9,17 +9,20 @@ import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue
import SelectableList from 'src/components/selectable_list/selectable_list.vue' import SelectableList from 'src/components/selectable_list/selectable_list.vue'
import ProgressButton from 'src/components/progress_button/progress_button.vue' import ProgressButton from 'src/components/progress_button/progress_button.vue'
import withSubscription from 'src/components/../hocs/with_subscription/with_subscription' import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
const BlockList = withSubscription({ const BlockList = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchBlocks'), fetch: (props, $store) => $store.dispatch('fetchBlocks'),
select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
destroy: () => {},
childPropName: 'items' childPropName: 'items'
})(SelectableList) })(SelectableList)
const MuteList = withSubscription({ const MuteList = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchMutes'), fetch: (props, $store) => $store.dispatch('fetchMutes'),
select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
destroy: () => {},
childPropName: 'items' childPropName: 'items'
})(SelectableList) })(SelectableList)

View File

@ -98,7 +98,7 @@ const withLoadMore = ({
</button> </button>
} }
{!this.error && this.loading && <FAIcon spin icon="circle-notch"/>} {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>} {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries} role="button" tabindex="0">{this.$t('general.more')}</a>}
</div> </div>
</div> </div>
) )

View File

@ -195,9 +195,15 @@ export const mutations = {
state.currentUser.blockIds.push(blockId) state.currentUser.blockIds.push(blockId)
} }
}, },
setBlockIdsMaxId (state, blockIdsMaxId) {
state.currentUser.blockIdsMaxId = blockIdsMaxId
},
saveMuteIds (state, muteIds) { saveMuteIds (state, muteIds) {
state.currentUser.muteIds = muteIds state.currentUser.muteIds = muteIds
}, },
setMuteIdsMaxId (state, muteIdsMaxId) {
state.currentUser.muteIdsMaxId = muteIdsMaxId
},
addMuteId (state, muteId) { addMuteId (state, muteId) {
if (state.currentUser.muteIds.indexOf(muteId) === -1) { if (state.currentUser.muteIds.indexOf(muteId) === -1) {
state.currentUser.muteIds.push(muteId) state.currentUser.muteIds.push(muteId)
@ -320,10 +326,20 @@ const users = {
.then((inLists) => store.commit('updateUserInLists', { id, inLists })) .then((inLists) => store.commit('updateUserInLists', { id, inLists }))
} }
}, },
fetchBlocks (store) { fetchBlocks (store, args) {
return store.rootState.api.backendInteractor.fetchBlocks() const { reset } = args || {}
const maxId = store.state.currentUser.blockIdsMaxId
return store.rootState.api.backendInteractor.fetchBlocks({ maxId })
.then((blocks) => { .then((blocks) => {
if (reset) {
store.commit('saveBlockIds', map(blocks, 'id')) store.commit('saveBlockIds', map(blocks, 'id'))
} else {
map(blocks, 'id').map(id => store.commit('addBlockId', id))
}
if (blocks.length) {
store.commit('setBlockIdsMaxId', last(blocks).id)
}
store.commit('addNewUsers', blocks) store.commit('addNewUsers', blocks)
return blocks return blocks
}) })
@ -346,10 +362,20 @@ const users = {
editUserNote (store, args) { editUserNote (store, args) {
return editUserNote(store, args) return editUserNote(store, args)
}, },
fetchMutes (store) { fetchMutes (store, args) {
return store.rootState.api.backendInteractor.fetchMutes() const { reset } = args || {}
const maxId = store.state.currentUser.muteIdsMaxId
return store.rootState.api.backendInteractor.fetchMutes({ maxId })
.then((mutes) => { .then((mutes) => {
if (reset) {
store.commit('saveMuteIds', map(mutes, 'id')) store.commit('saveMuteIds', map(mutes, 'id'))
} else {
map(mutes, 'id').map(id => store.commit('addMuteId', id))
}
if (mutes.length) {
store.commit('setMuteIdsMaxId', last(mutes).id)
}
store.commit('addNewUsers', mutes) store.commit('addNewUsers', mutes)
return mutes return mutes
}) })

View File

@ -1113,8 +1113,12 @@ const generateMfaBackupCodes = ({ credentials }) => {
}).then((data) => data.json()) }).then((data) => data.json())
} }
const fetchMutes = ({ credentials }) => { const fetchMutes = ({ maxId, credentials }) => {
return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials }) const query = new URLSearchParams({ with_relationships: true })
if (maxId) {
query.append('max_id', maxId)
}
return promisedRequest({ url: `${MASTODON_USER_MUTES_URL}?${query.toString()}`, credentials })
.then((users) => users.map(parseUser)) .then((users) => users.map(parseUser))
} }
@ -1138,8 +1142,12 @@ const unsubscribeUser = ({ id, credentials }) => {
return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' }) return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' })
} }
const fetchBlocks = ({ credentials }) => { const fetchBlocks = ({ maxId, credentials }) => {
return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials }) const query = new URLSearchParams({ with_relationships: true })
if (maxId) {
query.append('max_id', maxId)
}
return promisedRequest({ url: `${MASTODON_USER_BLOCKS_URL}?${query.toString()}`, credentials })
.then((users) => users.map(parseUser)) .then((users) => users.map(parseUser))
} }