refactor: don't make API calls directly

This commit is contained in:
Sol Fisher Romanoff 2022-06-18 16:04:18 +03:00
parent 9217ca8476
commit a6136f6cb2
No known key found for this signature in database
GPG key ID: 9D3F2B64F2341B62
8 changed files with 115 additions and 47 deletions

View file

@ -27,10 +27,15 @@ const ListNew = {
} }
}, },
created () { created () {
this.$store.state.api.backendInteractor.getList({ id: this.id }) this.$store.dispatch('fetchList', { id: this.id })
.then((data) => { this.title = data.title }) .then(() => { this.title = this.findListTitle(this.id) })
this.$store.state.api.backendInteractor.getListAccounts({ id: this.id }) this.$store.dispatch('fetchListAccounts', { id: this.id })
.then((data) => { this.selectedUserIds = data }) .then(() => {
this.selectedUserIds = this.findListAccounts(this.id)
this.selectedUserIds.forEach(userId => {
this.$store.dispatch('fetchUserIfMissing', userId)
})
})
}, },
computed: { computed: {
id () { id () {
@ -40,10 +45,7 @@ const ListNew = {
return this.userIds.map(userId => this.findUser(userId)) return this.userIds.map(userId => this.findUser(userId))
}, },
selectedUsers () { selectedUsers () {
for (let i = 0; i < this.selectedUserIds.length; i++) { return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
this.$store.dispatch('fetchUserIfMissing', this.selectedUserIds[i])
}
return this.selectedUserIds.map(userId => this.findUser(userId))
}, },
availableUsers () { availableUsers () {
if (this.query.length !== 0) { if (this.query.length !== 0) {
@ -53,10 +55,9 @@ const ListNew = {
} }
}, },
...mapState({ ...mapState({
currentUser: state => state.users.currentUser, currentUser: state => state.users.currentUser
backendInteractor: state => state.api.backendInteractor
}), }),
...mapGetters(['findUser']) ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
}, },
methods: { methods: {
onInput () { onInput () {
@ -93,25 +94,14 @@ const ListNew = {
}) })
}, },
updateList () { updateList () {
// the API has three different endpoints: one for "updating the list name", this.$store.dispatch('setList', { id: this.id, title: this.title })
// one for "adding new accounts to the list" and one for "removing this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
// accounts from the list".
this.$store.state.api.backendInteractor.updateList({ id: this.id, title: this.title })
this.$store.state.api.backendInteractor.addAccountsToList({
id: this.id, accountIds: this.selectedUserIds
})
this.$store.state.api.backendInteractor.getListAccounts({ id: this.id })
.then((data) => {
this.$store.state.api.backendInteractor.removeAccountsFromList({
id: this.id, accountIds: data.filter(x => !this.selectedUserIds.includes(x))
})
}).then(() => {
this.$router.push({ name: 'list-timeline', params: { id: this.id } }) this.$router.push({ name: 'list-timeline', params: { id: this.id } })
})
}, },
deleteList () { deleteList () {
this.$store.state.api.backendInteractor.deleteList({ id: this.id }) this.$store.dispatch('deleteList', { id: this.id })
.then(this.$router.push({ name: 'lists' })) this.$router.push({ name: 'lists' })
} }
} }
} }

View file

@ -41,8 +41,7 @@ const ListNew = {
} }
}, },
...mapState({ ...mapState({
currentUser: state => state.users.currentUser, currentUser: state => state.users.currentUser
backendInteractor: state => state.api.backendInteractor
}), }),
...mapGetters(['findUser']) ...mapGetters(['findUser'])
}, },
@ -86,12 +85,10 @@ const ListNew = {
createList () { createList () {
// the API has two different endpoints for "creating a list with a name" // the API has two different endpoints for "creating a list with a name"
// and "updating the accounts on the list". // and "updating the accounts on the list".
this.$store.state.api.backendInteractor.createList({ title: this.title }) this.$store.dispatch('createList', { title: this.title })
.then((data) => { .then((list) => {
this.$store.state.api.backendInteractor.addAccountsToList({ this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
id: data.id, accountIds: this.selectedUserIds this.$router.push({ name: 'list-timeline', params: { id: list.id } })
})
this.$router.push({ name: 'list-timeline', params: { id: data.id } })
}) })
} }
} }

View file

@ -13,6 +13,7 @@ const ListTimeline = {
}, },
created () { created () {
this.listId = this.$route.params.id this.listId = this.$route.params.id
this.$store.dispatch('fetchList', { id: this.listId })
this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId }) this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
}, },
unmounted () { unmounted () {

View file

@ -16,7 +16,7 @@ const Lists = {
}, },
computed: { computed: {
lists () { lists () {
return this.$store.state.api.lists return this.$store.state.lists.allLists
} }
}, },
methods: { methods: {

View file

@ -26,8 +26,7 @@ const TimelineMenu = {
}, },
data () { data () {
return { return {
isOpen: false, isOpen: false
listTitle: null
} }
}, },
created () { created () {
@ -60,9 +59,7 @@ const TimelineMenu = {
return '#' + this.$route.params.tag return '#' + this.$route.params.tag
} }
if (route === 'list-timeline') { if (route === 'list-timeline') {
this.$store.state.api.backendInteractor.getList({ id: this.$route.params.id }) return this.$store.getters.findListTitle(this.$route.params.id)
.then((data) => { this.listTitle = data.title })
return this.listTitle
} }
const i18nkey = timelineNames()[this.$route.name] const i18nkey = timelineNames()[this.$route.name]
return i18nkey ? this.$t(i18nkey) : route return i18nkey ? this.$t(i18nkey) : route

View file

@ -6,6 +6,7 @@ import './lib/event_target_polyfill.js'
import interfaceModule from './modules/interface.js' import interfaceModule from './modules/interface.js'
import instanceModule from './modules/instance.js' import instanceModule from './modules/instance.js'
import statusesModule from './modules/statuses.js' import statusesModule from './modules/statuses.js'
import listsModule from './modules/lists.js'
import usersModule from './modules/users.js' import usersModule from './modules/users.js'
import apiModule from './modules/api.js' import apiModule from './modules/api.js'
import configModule from './modules/config.js' import configModule from './modules/config.js'
@ -70,6 +71,7 @@ const persistedStateOptions = {
// TODO refactor users/statuses modules, they depend on each other // TODO refactor users/statuses modules, they depend on each other
users: usersModule, users: usersModule,
statuses: statusesModule, statuses: statusesModule,
lists: listsModule,
api: apiModule, api: apiModule,
config: configModule, config: configModule,
serverSideConfig: serverSideConfigModule, serverSideConfig: serverSideConfigModule,

View file

@ -13,8 +13,7 @@ const api = {
socket: null, socket: null,
mastoUserSocket: null, mastoUserSocket: null,
mastoUserSocketStatus: null, mastoUserSocketStatus: null,
followRequests: [], followRequests: []
lists: []
}, },
mutations: { mutations: {
setBackendInteractor (state, backendInteractor) { setBackendInteractor (state, backendInteractor) {
@ -36,9 +35,6 @@ const api = {
setFollowRequests (state, value) { setFollowRequests (state, value) {
state.followRequests = value state.followRequests = value
}, },
setLists (state, value) {
state.lists = value
},
setMastoUserSocketStatus (state, value) { setMastoUserSocketStatus (state, value) {
state.mastoUserSocketStatus = value state.mastoUserSocketStatus = value
}, },

85
src/modules/lists.js Normal file
View file

@ -0,0 +1,85 @@
import { remove, find } from 'lodash'
export const defaultState = {
allLists: [],
allListsObject: {}
}
const mutations = {
setLists (state, value) {
state.allLists = value
},
setList (state, { id, title }) {
if (!state.allListsObject[id]) {
state.allListsObject[id] = {}
}
state.allListsObject[id].title = title
find(state.allLists, { id }).title = title
},
setListAccounts (state, { id, accountIds }) {
if (!state.allListsObject[id]) {
state.allListsObject[id] = {}
}
state.allListsObject[id].accountIds = accountIds
},
deleteList (state, { id }) {
delete state.allListsObject[id]
remove(state.allLists, list => list.id === id)
}
}
const actions = {
setLists ({ commit }, value) {
commit('setLists', value)
},
createList ({ rootState, commit }, { title }) {
return rootState.api.backendInteractor.createList({ title })
.then((list) => {
commit('setList', { id: list.id, title })
return list
})
},
fetchList ({ rootState, commit }, { id }) {
return rootState.api.backendInteractor.getList({ id })
.then((list) => commit('setList', { id: list.id, title: list.title }))
},
fetchListAccounts ({ rootState, commit }, { id }) {
return rootState.api.backendInteractor.getListAccounts({ id })
.then((accountIds) => commit('setListAccounts', { id, accountIds }))
},
setList ({ rootState, commit }, { id, title }) {
rootState.api.backendInteractor.updateList({ id, title })
commit('setList', { id, title })
},
setListAccounts ({ rootState, commit }, { id, accountIds }) {
commit('setListAccounts', { id, accountIds })
rootState.api.backendInteractor.addAccountsToList({ id, accountIds })
rootState.api.backendInteractor.removeAccountsFromList({
id,
accountIds: rootState.lists.allListsObject[id].accountIds.filter(id => !accountIds.includes(id))
})
},
deleteList ({ rootState, commit }, { id }) {
rootState.api.backendInteractor.deleteList({ id })
commit('deleteList', { id })
}
}
const getters = {
findListTitle: state => id => {
if (!state.allListsObject[id]) return
return state.allListsObject[id].title
},
findListAccounts: state => id => {
return state.allListsObject[id].accountIds
}
}
const lists = {
state: defaultState,
mutations,
actions,
getters
}
export default lists