From a6136f6cb23df4a57a046381c36de3358934d7c2 Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Sat, 18 Jun 2022 16:04:18 +0300 Subject: [PATCH] refactor: don't make API calls directly --- src/components/list_edit/list_edit.js | 46 ++++------ src/components/list_new/list_new.js | 13 ++- src/components/list_timeline/list_timeline.js | 1 + src/components/lists/lists.js | 2 +- src/components/timeline_menu/timeline_menu.js | 7 +- src/main.js | 2 + src/modules/api.js | 6 +- src/modules/lists.js | 85 +++++++++++++++++++ 8 files changed, 115 insertions(+), 47 deletions(-) create mode 100644 src/modules/lists.js 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