diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
index 3ae0459a..f982f4d4 100644
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@@ -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' })
}
}
}
diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js
index d953712b..e3e4aef0 100644
--- a/src/components/list_new/list_new.js
+++ b/src/components/list_new/list_new.js
@@ -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 } })
})
}
}
diff --git a/src/components/list_timeline/list_timeline.js b/src/components/list_timeline/list_timeline.js
index 402dd98f..e17abb32 100644
--- a/src/components/list_timeline/list_timeline.js
+++ b/src/components/list_timeline/list_timeline.js
@@ -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 () {
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
index f511f0f5..09c49407 100644
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@@ -16,7 +16,7 @@ const Lists = {
},
computed: {
lists () {
- return this.$store.state.api.lists
+ return this.$store.state.lists.allLists
}
},
methods: {
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 74046d12..d152c0fe 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -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
diff --git a/src/main.js b/src/main.js
index eacd554c..7d2c82cb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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,
diff --git a/src/modules/api.js b/src/modules/api.js
index d9ae21f8..e9bf8c46 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -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
},
diff --git a/src/modules/lists.js b/src/modules/lists.js
new file mode 100644
index 00000000..b62ff3d3
--- /dev/null
+++ b/src/modules/lists.js
@@ -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