refactor: don't make API calls directly

src/components/list_edit/list_edit.js

@@ -27,10 +27,15 @@ const ListNew = {
     }
   },
   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: {
     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++) {
+      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 () {
       if (this.query.length !== 0) {
@@ -53,10 +55,9 @@ const ListNew = {
       }
     },
     ...mapState({
-      currentUser: state => state.users.currentUser,
+      currentUser: state => state.users.currentUser
-      backendInteractor: state => state.api.backendInteractor
     }),
-    ...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",
+      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 } })
-        })
     },
     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' })
     }
   }
 }

src/components/list_new/list_new.js

@@ -41,8 +41,7 @@ const ListNew = {
       }
     },
     ...mapState({
-      currentUser: state => state.users.currentUser,
+      currentUser: state => state.users.currentUser
-      backendInteractor: state => state.api.backendInteractor
     }),
     ...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 })
+      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 } })
         })
     }
   }

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 () {

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: {

src/components/timeline_menu/timeline_menu.js

@@ -26,8 +26,7 @@ const TimelineMenu = {
   },
   data () {
     return {
-      isOpen: false,
+      isOpen: false
-      listTitle: null
     }
   },
   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 })
+        return this.$store.getters.findListTitle(this.$route.params.id)
-          .then((data) => { this.listTitle = data.title })
-        return this.listTitle
       }
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route

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,

src/modules/api.js

@@ -13,8 +13,7 @@ const api = {
     socket: null,
     mastoUserSocket: null,
     mastoUserSocketStatus: null,
-    followRequests: [],
+    followRequests: []
-    lists: []
   },
   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
     },

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