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 })
-      .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' })
     }
   }
 }

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 } })
         })
     }
   }

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,
-      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