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

View file

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

View file

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

View file

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

View file

@ -26,8 +26,7 @@ const TimelineMenu = {
},
data () {
return {
isOpen: false,
listTitle: null
isOpen: false
}
},
created () {
@ -60,9 +59,7 @@ const TimelineMenu = {
return '#' + this.$route.params.tag
}
if (route === 'list-timeline') {
this.$store.state.api.backendInteractor.getList({ id: this.$route.params.id })
.then((data) => { this.listTitle = data.title })
return this.listTitle
return this.$store.getters.findListTitle(this.$route.params.id)
}
const i18nkey = timelineNames()[this.$route.name]
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 instanceModule from './modules/instance.js'
import statusesModule from './modules/statuses.js'
import listsModule from './modules/lists.js'
import usersModule from './modules/users.js'
import apiModule from './modules/api.js'
import configModule from './modules/config.js'
@ -70,6 +71,7 @@ const persistedStateOptions = {
// TODO refactor users/statuses modules, they depend on each other
users: usersModule,
statuses: statusesModule,
lists: listsModule,
api: apiModule,
config: configModule,
serverSideConfig: serverSideConfigModule,

View file

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