remaining backend interactor removals

src/boot/after_store.js

@@ -19,7 +19,6 @@ import {
 config.autoAddCss = false
 
 import App from '../App.vue'
-import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 import { applyStyleConfig } from '../services/style_setter/style_setter.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
@@ -31,6 +30,7 @@ import routes from './routes'
 
 import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useAuthFlowStore } from 'src/stores/auth_flow'
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useI18nStore } from 'src/stores/i18n'
 import { useInstanceStore } from 'src/stores/instance.js'
@@ -264,10 +264,7 @@ const getStickers = async ({ store }) => {
 const getAppSecret = async ({ store }) => {
   const oauth = useOAuthStore()
   if (oauth.userToken) {
-    store.commit(
-      'setBackendInteractor',
-      backendInteractorService(oauth.getToken),
-    )
+    useCredentialsStore().setCredentials(oauth.getToken)
   }
 }
 

src/components/chat/chat.js

@@ -16,8 +16,15 @@ import {
   isScrollable,
 } from './chat_layout_utils.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 
+import {
+  chatMessages,
+  getOrCreateChat,
+  sendChatMessage,
+} from 'src/services/api/api.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
 
@@ -115,7 +122,6 @@ const Chat = {
       mobileLayout: (store) => store.layoutType === 'mobile',
     }),
     ...mapState({
-      backendInteractor: (state) => state.api.backendInteractor,
       mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
       currentUser: (state) => state.users.currentUser,
     }),
@@ -267,42 +273,46 @@ const Chat = {
       const fetchOlderMessages = !!maxId
       const sinceId = fetchLatest && chatMessageService.maxId
 
-      return this.backendInteractor
-        .chatMessages({ id: chatId, maxId, sinceId })
-        .then((messages) => {
-          // Clear the current chat in case we're recovering from a ws connection loss.
-          if (isFirstFetch) {
-            chatService.clear(chatMessageService)
-          }
+      return chatMessages({
+        id: chatId,
+        maxId,
+        sinceId,
+        credentials: useCredentialsStore().current,
+      }).then((messages) => {
+        // Clear the current chat in case we're recovering from a ws connection loss.
+        if (isFirstFetch) {
+          chatService.clear(chatMessageService)
+        }
 
-          const positionBeforeUpdate = getScrollPosition()
-          this.$store
-            .dispatch('addChatMessages', { chatId, messages })
-            .then(() => {
-              this.$nextTick(() => {
-                if (fetchOlderMessages) {
-                  this.handleScrollUp(positionBeforeUpdate)
-                }
+        const positionBeforeUpdate = getScrollPosition()
+        this.$store
+          .dispatch('addChatMessages', { chatId, messages })
+          .then(() => {
+            this.$nextTick(() => {
+              if (fetchOlderMessages) {
+                this.handleScrollUp(positionBeforeUpdate)
+              }
 
-                // In vertical screens, the first batch of fetched messages may not always take the
-                // full height of the scrollable container.
-                // If this is the case, we want to fetch the messages until the scrollable container
-                // is fully populated so that the user has the ability to scroll up and load the history.
-                if (!isScrollable() && messages.length > 0) {
-                  this.fetchChat({
-                    maxId: this.currentChatMessageService.minId,
-                  })
-                }
-              })
+              // In vertical screens, the first batch of fetched messages may not always take the
+              // full height of the scrollable container.
+              // If this is the case, we want to fetch the messages until the scrollable container
+              // is fully populated so that the user has the ability to scroll up and load the history.
+              if (!isScrollable() && messages.length > 0) {
+                this.fetchChat({
+                  maxId: this.currentChatMessageService.minId,
+                })
+              }
             })
-        })
+          })
+      })
     },
     async startFetching() {
       let chat = this.findOpenedChatByRecipientId(this.recipientId)
       if (!chat) {
         try {
-          chat = await this.backendInteractor.getOrCreateChat({
+          chat = await getOrCreateChat({
             accountId: this.recipientId,
+            credentials: useCredentialsStore().current,
           })
         } catch (e) {
           console.error('Error creating or getting a chat', e)
@@ -369,8 +379,10 @@ const Chat = {
     doSendMessage({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
       if (retriesLeft <= 0) return
 
-      this.backendInteractor
-        .sendChatMessage(params)
+      sendChatMessage({
+        params,
+        credentials: useCredentialsStore().current,
+      })
         .then((data) => {
           this.$store.dispatch('addChatMessages', {
             chatId: this.currentChat.id,

src/components/chat_new/chat_new.js

@@ -3,6 +3,10 @@ import { mapGetters, mapState } from 'vuex'
 import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import { chats } from 'src/services/api/api.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'
 
@@ -22,7 +26,9 @@ const chatNew = {
     }
   },
   async created() {
-    const { chats } = await this.backendInteractor.chats()
+    const { chats } = await chats({
+      credentials: useCredentialsStore().current,
+    })
     chats.forEach((chat) => this.suggestions.push(chat.account))
   },
   computed: {
@@ -38,7 +44,6 @@ const chatNew = {
     },
     ...mapState({
       currentUser: (state) => state.users.currentUser,
-      backendInteractor: (state) => state.api.backendInteractor,
     }),
     ...mapGetters(['findUser']),
   },

src/components/conversation/conversation.js

@@ -7,9 +7,12 @@ import QuickViewSettings from 'src/components/quick_view_settings/quick_view_set
 import ThreadTree from 'src/components/thread_tree/thread_tree.vue'
 import { WSConnectionStatus } from '../../services/api/api.service.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInterfaceStore } from 'src/stores/interface'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
+import { fetchConversation, fetchStatus } from 'src/services/api/api.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDoubleDown,
@@ -436,17 +439,20 @@ const conversation = {
   methods: {
     fetchConversation() {
       if (this.status) {
-        this.$store.state.api.backendInteractor
-          .fetchConversation({ id: this.statusId })
-          .then(({ ancestors, descendants }) => {
-            this.$store.dispatch('addNewStatuses', { statuses: ancestors })
-            this.$store.dispatch('addNewStatuses', { statuses: descendants })
-            this.setHighlight(this.originalStatusId)
-          })
+        fetchConversation({
+          id: this.statusId,
+          credentials: useCredentialsStore().current,
+        }).then(({ ancestors, descendants }) => {
+          this.$store.dispatch('addNewStatuses', { statuses: ancestors })
+          this.$store.dispatch('addNewStatuses', { statuses: descendants })
+          this.setHighlight(this.originalStatusId)
+        })
       } else {
         this.loadStatusError = null
-        this.$store.state.api.backendInteractor
-          .fetchStatus({ id: this.statusId })
+        fetchStatus({
+          id: this.statusId,
+          credentials: useCredentialsStore().current,
+        })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()

src/components/follow_request_card/follow_request_card.js

@@ -3,8 +3,11 @@ import { defineAsyncComponent } from 'vue'
 import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
+import { approveUser, denyUser } from 'src/services/api/api.service.js'
+
 const FollowRequestCard = {
   props: ['user'],
   components: {
@@ -48,7 +51,10 @@ const FollowRequestCard = {
       }
     },
     doApprove() {
-      this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
+      approveUser({
+        id: this.user.id,
+        credentials: useCredentialsStore().current,
+      })
       this.$store.dispatch('removeFollowRequest', this.user)
 
       const notifId = this.findFollowRequestNotificationId()
@@ -70,12 +76,14 @@ const FollowRequestCard = {
     },
     doDeny() {
       const notifId = this.findFollowRequestNotificationId()
-      this.$store.state.api.backendInteractor
-        .denyUser({ id: this.user.id })
-        .then(() => {
-          this.$store.dispatch('dismissNotificationLocal', { id: notifId })
-          this.$store.dispatch('removeFollowRequest', this.user)
-        })
+
+      denyUser({
+        id: this.user.id,
+        credentials: useCredentialsStore().current,
+      }).then(() => {
+        this.$store.dispatch('dismissNotificationLocal', { id: notifId })
+        this.$store.dispatch('removeFollowRequest', this.user)
+      })
       this.hideDenyConfirmDialog()
     },
   },

src/components/notification/notification.js

@@ -13,10 +13,12 @@ import {
   highlightStyle,
 } from '../../services/user_highlighter/user_highlighter.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
+import { approveUser, denyUser } from 'src/services/api/api.service.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -142,7 +144,10 @@ const Notification = {
       }
     },
     doApprove() {
-      this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
+      approveUser({
+        id: this.user.id,
+        credentials: useCredentialsStore().current,
+      })
       this.$store.dispatch('removeFollowRequest', this.user)
       this.$store.dispatch('markSingleNotificationAsSeen', {
         id: this.notification.id,
@@ -163,14 +168,15 @@ const Notification = {
       }
     },
     doDeny() {
-      this.$store.state.api.backendInteractor
-        .denyUser({ id: this.user.id })
-        .then(() => {
-          this.$store.dispatch('dismissNotificationLocal', {
-            id: this.notification.id,
-          })
-          this.$store.dispatch('removeFollowRequest', this.user)
+      denyUser({
+        id: this.user.id,
+        credentials: useCredentialsStore().current,
+      }).then(() => {
+        this.$store.dispatch('dismissNotificationLocal', {
+          id: this.notification.id,
         })
+        this.$store.dispatch('removeFollowRequest', this.user)
+      })
       this.hideDenyConfirmDialog()
     },
   },

src/components/remote_user_resolver/remote_user_resolver.js

@@ -1,3 +1,7 @@
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import { fetchUser } from 'src/services/api/api.service.js'
+
 const RemoteUserResolver = {
   data: () => ({
     error: false,
@@ -7,10 +11,11 @@ const RemoteUserResolver = {
   },
   methods: {
     redirect() {
-      const acct =
-        this.$route.params.username + '@' + this.$route.params.hostname
-      this.$store.state.api.backendInteractor
-        .fetchUser({ id: acct })
+      const id = this.$route.params.username + '@' + this.$route.params.hostname
+      fetchUser({
+        id,
+        credentials: useCredentialsStore().current,
+      })
         .then((externalUser) => {
           if (externalUser.error) {
             this.error = true

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -11,6 +11,7 @@ import ModifiedIndicator from '../helpers/modified_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
@@ -98,10 +99,10 @@ const EmojiTab = {
 
   methods: {
     reloadEmoji() {
-      this.$store.state.api.backendInteractor.reloadEmoji()
+      useAdminSettingsStore().reloadEmoji()
     },
     importFromFS() {
-      this.$store.state.api.backendInteractor.importEmojiFromFS()
+      useAdminSettingsStore().importEmojiFromFS()
     },
     emojiAddr(name) {
       if (this.pack.remote !== undefined) {
@@ -113,7 +114,7 @@ const EmojiTab = {
     },
 
     createEmojiPack() {
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .createEmojiPack({ name: this.newPackName })
         .then((resp) => resp.json())
         .then((resp) => {
@@ -130,7 +131,7 @@ const EmojiTab = {
         })
     },
     deleteEmojiPack() {
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .deleteEmojiPack({ name: this.packName })
         .then((resp) => resp.json())
         .then((resp) => {
@@ -157,7 +158,7 @@ const EmojiTab = {
       return edited !== def
     },
     savePackMetadata() {
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta })
         .then((resp) => resp.json())
         .then((resp) => {
@@ -182,7 +183,7 @@ const EmojiTab = {
       useEmojiStore()
         .getAdminPacks(
           this.remotePackInstance,
-          this.$store.state.api.backendInteractor.listEmojiPacks,
+          useAdminSettingsStore().listEmojiPacks,
         )
         .then((allPacks) => {
           this.knownLocalPacks = allPacks
@@ -195,7 +196,7 @@ const EmojiTab = {
       useEmojiStore()
         .getAdminPacks(
           this.remotePackInstance,
-          this.$store.state.api.backendInteractor.listRemoteEmojiPacks,
+          useAdminSettingsStore().listRemoteEmojiPacks,
         )
         .then((allPacks) => {
           let inst = this.remotePackInstance
@@ -226,7 +227,7 @@ const EmojiTab = {
         this.remotePackDownloadAs = this.pack.remote.baseName
       }
 
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .downloadRemoteEmojiPack({
           instance: this.pack.remote.instance,
           packName: this.pack.remote.baseName,
@@ -247,7 +248,7 @@ const EmojiTab = {
         })
     },
     downloadRemoteURLPack() {
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .downloadRemoteEmojiPackZIP({
           url: this.remotePackURL,
           packName: this.newPackName,
@@ -268,7 +269,7 @@ const EmojiTab = {
         })
     },
     downloadRemoteFilePack() {
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .downloadRemoteEmojiPackZIP({
           file: this.remotePackFile[0],
           packName: this.newPackName,

src/components/settings_modal/admin_tabs/frontends_tab.js

@@ -71,7 +71,7 @@ const FrontendsTab = {
       const payload = { name, ref }
 
       this.working = true
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .installFrontend({ payload })
         .finally(() => {
           this.working = false

src/components/settings_modal/helpers/emoji_editing_popover.vue

@@ -153,6 +153,14 @@ import Popover from 'components/popover/popover.vue'
 import SelectComponent from 'components/select/select.vue'
 import { defineAsyncComponent } from 'vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import {
+  addNewEmojiFile,
+  deleteEmojiFile,
+  updateEmojiFile,
+} from 'src/services/api/api.service.js'
+
 export default {
   components: {
     Popover,
@@ -243,14 +251,14 @@ export default {
     saveEditedEmoji() {
       if (!this.isEdited) return
 
-      this.$store.state.api.backendInteractor
-        .updateEmojiFile({
-          packName: this.packName,
-          shortcode: this.shortcode,
-          newShortcode: this.editedShortcode,
-          newFilename: this.editedFile,
-          force: false,
-        })
+      updateEmojiFile({
+        packName: this.packName,
+        shortcode: this.shortcode,
+        newShortcode: this.editedShortcode,
+        newFilename: this.editedFile,
+        force: false,
+        credentials: useCredentialsStore().current,
+      })
         .then((resp) => {
           if (resp.error !== undefined) {
             this.$emit('displayError', resp.error)
@@ -263,18 +271,18 @@ export default {
     },
     uploadEmoji() {
       let packName = this.remote === undefined ? this.packName : this.copyToPack
-      this.$store.state.api.backendInteractor
-        .addNewEmojiFile({
-          packName: packName,
-          file:
-            this.remote === undefined
-              ? this.uploadURL !== ''
-                ? this.uploadURL
-                : this.uploadFile[0]
-              : this.emojiAddr(this.file),
-          shortcode: this.editedShortcode,
-          filename: this.editedFile,
-        })
+      addNewEmojiFile({
+        packName: packName,
+        file:
+          this.remote === undefined
+            ? this.uploadURL !== ''
+              ? this.uploadURL
+              : this.uploadFile[0]
+            : this.emojiAddr(this.file),
+        shortcode: this.editedShortcode,
+        filename: this.editedFile,
+        credentials: useCredentialsStore().current,
+      })
         .then((resp) => resp.json())
         .then((resp) => {
           if (resp.error !== undefined) {
@@ -297,8 +305,11 @@ export default {
     deleteEmoji() {
       this.deleteModalVisible = false
 
-      this.$store.state.api.backendInteractor
-        .deleteEmojiFile({ packName: this.packName, shortcode: this.shortcode })
+      deleteEmojiFile({
+        packName: this.packName,
+        shortcode: this.shortcode,
+        credentials: useCredentialsStore().current,
+      })
         .then((resp) => resp.json())
         .then((resp) => {
           if (resp.error !== undefined) {

src/components/settings_modal/tabs/appearance_tab.js

@@ -10,9 +10,11 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 import Preview from './old_theme_tab/theme_preview.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface.js'
 
+import { updateProfileImages } from 'src/services/api/api.service.js'
 import { newImporter } from 'src/services/export_import/export_import.js'
 import {
   adoptStyleSheets,
@@ -484,8 +486,10 @@ const AppearanceTab = {
       }
 
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor
-        .updateProfileImages({ background })
+      updateProfileImages({
+        background,
+        credentials: useCredentialsStore().current,
+      })
         .then((data) => {
           this.$store.commit('addNewUsers', [data])
           this.$store.commit('setCurrentUser', data)

src/components/settings_modal/tabs/composing_tab.js

@@ -11,11 +11,13 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
+import { updateProfile } from 'src/services/api/api.service.js'
 import localeService from 'src/services/locale/locale.service.js'
 import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
 
@@ -164,12 +166,13 @@ const ComposingTab = {
         ),
       }
 
-      this.$store.state.api.backendInteractor
-        .updateProfile({ params })
-        .then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-        })
+      updateProfile({
+        params,
+        credentials: useCredentialsStore().current,
+      }).then((user) => {
+        this.$store.commit('addNewUsers', [user])
+        this.$store.commit('setCurrentUser', user)
+      })
     },
     updateFont(key, value) {
       useSyncConfigStore().setSimplePrefAndSave({

src/components/settings_modal/tabs/data_import_export_tab.js

@@ -4,8 +4,20 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Exporter from 'src/components/exporter/exporter.vue'
 import Importer from 'src/components/importer/importer.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'
 
+import {
+  addBackup,
+  exportFriends,
+  fetchBlocks,
+  fetchMutes,
+  importBlocks,
+  importFollows,
+  importMutes,
+  listBackups,
+} from 'src/services/api/api.service.js'
+
 const DataImportExportTab = {
   data() {
     return {
@@ -28,42 +40,51 @@ const DataImportExportTab = {
   },
   computed: {
     ...mapState({
-      backendInteractor: (state) => state.api.backendInteractor,
       user: (state) => state.users.currentUser,
     }),
   },
   methods: {
     getFollowsContent() {
-      return this.backendInteractor
-        .exportFriends({ id: this.user.id })
-        .then(this.generateExportableUsersContent)
+      return exportFriends({
+        id: this.user.id,
+        credentials: useCredentialsStore().current,
+      }).then(this.generateExportableUsersContent)
     },
     getBlocksContent() {
-      return this.backendInteractor
-        .fetchBlocks()
-        .then(this.generateExportableUsersContent)
+      return fetchBlocks({
+        credentials: useCredentialsStore().current,
+      }).then(this.generateExportableUsersContent)
     },
     getMutesContent() {
-      return this.backendInteractor
-        .fetchMutes()
-        .then(this.generateExportableUsersContent)
+      return fetchMutes({
+        credentials: useCredentialsStore().current,
+      }).then(this.generateExportableUsersContent)
     },
     importFollows(file) {
-      return this.backendInteractor.importFollows({ file }).then((status) => {
+      return importFollows({
+        file,
+        credentials: useCredentialsStore().current,
+      }).then((status) => {
         if (!status) {
           throw new Error('failed')
         }
       })
     },
     importBlocks(file) {
-      return this.backendInteractor.importBlocks({ file }).then((status) => {
+      return importBlocks({
+        file,
+        credentials: useCredentialsStore().current,
+      }).then((status) => {
         if (!status) {
           throw new Error('failed')
         }
       })
     },
     importMutes(file) {
-      return this.backendInteractor.importMutes({ file }).then((status) => {
+      return importMutes({
+        file,
+        credentials: useCredentialsStore().current,
+      }).then((status) => {
         if (!status) {
           throw new Error('failed')
         }
@@ -83,8 +104,9 @@ const DataImportExportTab = {
         .join('\n')
     },
     addBackup() {
-      this.$store.state.api.backendInteractor
-        .addBackup()
+      addBackup({
+        credentials: useCredentialsStore().current,
+      })
         .then(() => {
           this.addedBackup = true
           this.addBackupError = false
@@ -96,8 +118,9 @@ const DataImportExportTab = {
         .then(() => this.fetchBackups())
     },
     fetchBackups() {
-      this.$store.state.api.backendInteractor
-        .listBackups()
+      listBackups({
+        credentials: useCredentialsStore().current,
+      })
         .then((res) => {
           this.backups = res
           this.listBackupsError = false

src/components/settings_modal/tabs/general_tab.js

@@ -8,12 +8,14 @@ import FloatSetting from '../helpers/float_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useLocalConfigStore } from 'src/stores/local_config.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
+import { updateProfile } from 'src/services/api/api.service.js'
 import localeService from 'src/services/locale/locale.service.js'
 
 const GeneralTab = {
@@ -58,12 +60,13 @@ const GeneralTab = {
         ),
       }
 
-      this.$store.state.api.backendInteractor
-        .updateProfile({ params })
-        .then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-        })
+      updateProfile({
+        params,
+        credentials: useCredentialsStore().current,
+      }).then((user) => {
+        this.$store.commit('addNewUsers', [user])
+        this.$store.commit('setCurrentUser', user)
+      })
     },
     updateFont(path, value) {
       useLocalConfigStore().set({ path, value })

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -9,9 +9,12 @@ import MuteCard from 'src/components/mute_card/mute_card.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'
 
+import { importBlocks, importFollows } from 'src/services/api/api.service.js'
+
 const MutesAndBlocks = {
   data() {
     return {
@@ -54,22 +57,24 @@ const MutesAndBlocks = {
       return () => this.$store.dispatch('fetch' + group, this.userId)
     },
     importFollows(file) {
-      return this.$store.state.api.backendInteractor
-        .importFollows({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
+      return importFollows({
+        file,
+        credentials: useCredentialsStore().current,
+      }).then((status) => {
+        if (!status) {
+          throw new Error('failed')
+        }
+      })
     },
     importBlocks(file) {
-      return this.$store.state.api.backendInteractor
-        .importBlocks({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
+      return importBlocks({
+        file,
+        credentials: useCredentialsStore().current,
+      }).then((status) => {
+        if (!status) {
+          throw new Error('failed')
+        }
+      })
     },
     generateExportableUsersContent(users) {
       // Get addresses

src/components/settings_modal/tabs/notifications_tab.js

@@ -1,6 +1,10 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import { updateNotificationSettings } from 'src/services/api/api.service.js'
+
 const NotificationsTab = {
   data() {
     return {
@@ -27,7 +31,8 @@ const NotificationsTab = {
   },
   methods: {
     updateNotificationSettings() {
-      this.$store.state.api.backendInteractor.updateNotificationSettings({
+      updateNotificationSettings({
+        credentials: useCredentialsStore().current,
         settings: this.notificationSettings,
       })
     },

src/components/settings_modal/tabs/profile_tab.js

@@ -3,6 +3,10 @@ import UserCard from 'src/components/user_card/user_card.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import { updateProfile } from 'src/services/api/api.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch,
@@ -35,9 +39,10 @@ const ProfileTab = {
       const params = {
         locked: this.locked,
       }
-
-      this.$store.state.api.backendInteractor
-        .updateProfile({ params })
+      updateProfile({
+        params,
+        credentials: useCredentialsStore().current,
+      })
         .then((user) => {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)

src/components/settings_modal/tabs/security_tab/mfa.js

@@ -5,6 +5,15 @@ import Confirm from './confirm.vue'
 import RecoveryCodes from './mfa_backup_codes.vue'
 import TOTP from './mfa_totp.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import {
+  generateMfaBackupCodes,
+  mfaConfirmOTP,
+  mfaSetupOTP,
+  settingsMFA,
+} from 'src/services/api/api.service.js'
+
 const Mfa = {
   data: () => ({
     settings: {
@@ -71,9 +80,6 @@ const Mfa = {
     confirmNewBackupCodes() {
       return this.backupCodes.getNewCodes
     },
-    ...mapState({
-      backendInteractor: (state) => state.api.backendInteractor,
-    }),
   },
 
   methods: {
@@ -87,7 +93,9 @@ const Mfa = {
       this.backupCodes.inProgress = true
       this.backupCodes.codes = []
 
-      return this.backendInteractor.generateMfaBackupCodes().then((res) => {
+      return generateMfaBackupCodes({
+        credentials: useCredentialsStore().current,
+      }).then((res) => {
         this.backupCodes.codes = res.codes
         this.backupCodes.inProgress = false
       })
@@ -112,7 +120,9 @@ const Mfa = {
       // prepare setup OTP
       this.setupState.state = 'setupOTP'
       this.setupState.setupOTPState = 'prepare'
-      this.backendInteractor.mfaSetupOTP().then((res) => {
+      mfaSetupOTP({
+        credentials: useCredentialsStore().current,
+      }).then((res) => {
         this.otpSettings = res
         this.setupState.setupOTPState = 'confirm'
       })
@@ -120,18 +130,17 @@ const Mfa = {
     doConfirmOTP() {
       // handler confirm enable OTP
       this.error = null
-      this.backendInteractor
-        .mfaConfirmOTP({
-          token: this.otpConfirmToken,
-          password: this.currentPassword,
-        })
-        .then((res) => {
-          if (res.error) {
-            this.error = res.error
-            return
-          }
-          this.completeSetup()
-        })
+      mfaConfirmOTP({
+        token: this.otpConfirmToken,
+        password: this.currentPassword,
+        credentials: useCredentialsStore().current,
+      }).then((res) => {
+        if (res.error) {
+          this.error = res.error
+          return
+        }
+        this.completeSetup()
+      })
     },
 
     completeSetup() {
@@ -152,7 +161,9 @@ const Mfa = {
 
     // fetch settings from server
     async fetchSettings() {
-      const result = await this.backendInteractor.settingsMFA()
+      const result = await settingsMFA({
+        credentials: useCredentialsStore().current,
+      })
       if (result.error) return
       this.settings = result.settings
       this.settings.available = true

src/components/settings_modal/tabs/security_tab/mfa_totp.js

@@ -2,6 +2,10 @@ import { mapState } from 'vuex'
 
 import Confirm from './confirm.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import { mfaDisableOTP } from 'src/services/api/api.service.js'
+
 export default {
   props: ['settings'],
   data: () => ({
@@ -17,9 +21,6 @@ export default {
     isActivated() {
       return this.settings.totp
     },
-    ...mapState({
-      backendInteractor: (state) => state.api.backendInteractor,
-    }),
   },
   methods: {
     doActivate() {
@@ -36,19 +37,18 @@ export default {
       // confirm deactivate TOTP method
       this.error = null
       this.inProgress = true
-      this.backendInteractor
-        .mfaDisableOTP({
-          password: this.currentPassword,
-        })
-        .then((res) => {
-          this.inProgress = false
-          if (res.error) {
-            this.error = res.error
-            return
-          }
-          this.deactivate = false
-          this.$emit('deactivate')
-        })
+      mfaDisableOTP({
+        password: this.currentPassword,
+        credentials: useCredentialsStore().current,
+      }).then((res) => {
+        this.inProgress = false
+        if (res.error) {
+          this.error = res.error
+          return
+        }
+        this.deactivate = false
+        this.$emit('deactivate')
+      })
     },
   },
 }

src/components/settings_modal/tabs/security_tab/security_tab.js

@@ -2,10 +2,20 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import Mfa from './mfa.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 
+import {
+  addAlias,
+  changeEmail,
+  changePassword,
+  deleteAccount,
+  deleteAlias,
+  listAliases,
+  moveAccount,
+} from 'src/services/api/api.service.js'
 import localeService from 'src/services/locale/locale.service.js'
 
 const SecurityTab = {
@@ -65,78 +75,79 @@ const SecurityTab = {
       this.deletingAccount = true
     },
     deleteAccount() {
-      this.$store.state.api.backendInteractor
-        .deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
-        .then((res) => {
-          if (res.status === 'success') {
-            this.$store.dispatch('logout')
-            this.$router.push({ name: 'root' })
-          } else {
-            this.deleteAccountError = res.error
-          }
-        })
+      deleteAccount({
+        credentials: useCredentialsStore().current,
+        password: this.deleteAccountConfirmPasswordInput,
+      }).then((res) => {
+        if (res.status === 'success') {
+          this.$store.dispatch('logout')
+          this.$router.push({ name: 'root' })
+        } else {
+          this.deleteAccountError = res.error
+        }
+      })
     },
     changePassword() {
       const params = {
         password: this.changePasswordInputs[0],
         newPassword: this.changePasswordInputs[1],
         newPasswordConfirmation: this.changePasswordInputs[2],
+        credentials: useCredentialsStore().current,
       }
-      this.$store.state.api.backendInteractor
-        .changePassword(params)
-        .then((res) => {
-          if (res.status === 'success') {
-            this.changedPassword = true
-            this.changePasswordError = false
-            this.logout()
-          } else {
-            this.changedPassword = false
-            this.changePasswordError = res.error
-          }
-        })
+      changePassword(params).then((res) => {
+        if (res.status === 'success') {
+          this.changedPassword = true
+          this.changePasswordError = false
+          this.logout()
+        } else {
+          this.changedPassword = false
+          this.changePasswordError = res.error
+        }
+      })
     },
     changeEmail() {
       const params = {
         email: this.newEmail,
         password: this.changeEmailPassword,
+        credentials: useCredentialsStore().current,
       }
-      this.$store.state.api.backendInteractor
-        .changeEmail(params)
-        .then((res) => {
-          if (res.status === 'success') {
-            this.changedEmail = true
-            this.changeEmailError = false
-          } else {
-            this.changedEmail = false
-            this.changeEmailError = res.error
-          }
-        })
+      changeEmail(params).then((res) => {
+        if (res.status === 'success') {
+          this.changedEmail = true
+          this.changeEmailError = false
+        } else {
+          this.changedEmail = false
+          this.changeEmailError = res.error
+        }
+      })
     },
     moveAccount() {
       const params = {
         targetAccount: this.moveAccountTarget,
         password: this.moveAccountPassword,
+        credentials: useCredentialsStore().current,
       }
-      this.$store.state.api.backendInteractor
-        .moveAccount(params)
-        .then((res) => {
-          if (res.status === 'success') {
-            this.movedAccount = true
-            this.moveAccountError = false
-          } else {
-            this.movedAccount = false
-            this.moveAccountError = res.error
-          }
-        })
+      moveAccount(params).then((res) => {
+        if (res.status === 'success') {
+          this.movedAccount = true
+          this.moveAccountError = false
+        } else {
+          this.movedAccount = false
+          this.moveAccountError = res.error
+        }
+      })
     },
     removeAlias(alias) {
-      this.$store.state.api.backendInteractor
-        .deleteAlias({ alias })
-        .then(() => this.fetchAliases())
+      deleteAlias({
+        alias,
+        credentials: useCredentialsStore().current,
+      }).then(() => this.fetchAliases())
     },
     addAlias() {
-      this.$store.state.api.backendInteractor
-        .addAlias({ alias: this.addAliasTarget })
+      addAlias({
+        alias: this.addAliasTarget,
+        credentials: useCredentialsStore().current,
+      })
         .then(() => {
           this.addedAlias = true
           this.addAliasError = false
@@ -149,8 +160,9 @@ const SecurityTab = {
         .then(() => this.fetchAliases())
     },
     fetchAliases() {
-      this.$store.state.api.backendInteractor
-        .listAliases()
+      listAliases({
+        credentials: useCredentialsStore().current,
+      })
         .then((res) => {
           this.aliases = res.aliases
           this.listAliasesError = false

src/components/still-image/still-image-emoji-popover.js

@@ -2,6 +2,7 @@ import Popover from 'components/popover/popover.vue'
 import SelectComponent from 'components/select/select.vue'
 import { mapState } from 'pinia'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings'
 import { useEmojiStore } from 'src/stores/emoji'
 import { useInterfaceStore } from 'src/stores/interface'
 
@@ -37,7 +38,7 @@ export default {
       })
     },
     copyToLocalPack() {
-      this.$store.state.api.backendInteractor
+      useAdminSettingsStore()
         .addNewEmojiFile({
           packName: this.packName,
           file: this.$attrs.src,

src/components/user_card/user_card.js

@@ -16,6 +16,7 @@ import Select from 'src/components/select/select.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserLink from 'src/components/user_link/user_link.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -25,6 +26,7 @@ import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { usePostStatusStore } from 'src/stores/post_status'
 import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
+import { updateProfile } from 'src/services/api/api.service.js'
 import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 import localeService from 'src/services/locale/locale.service.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -597,8 +599,7 @@ export default {
         params.header = this.newBannerFile
       }
 
-      this.$store.state.api.backendInteractor
-        .updateProfile({ params })
+      updateProfile({ params })
         .then((user) => {
           this.newFields.splice(this.newFields.length)
           merge(this.newFields, user.fields)

src/components/user_reporting_modal/user_reporting_modal.js

@@ -5,8 +5,11 @@ import List from 'src/components/list/list.vue'
 import Modal from 'src/components/modal/modal.vue'
 import UserLink from 'src/components/user_link/user_link.vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useReportsStore } from 'src/stores/reports.js'
 
+import { reportUser } from 'src/services/api/api.service.js'
+
 const UserReportingModal = {
   components: {
     List,
@@ -71,9 +74,9 @@ const UserReportingModal = {
         comment: this.comment,
         forward: this.forward,
         statusIds: [...this.statusIdsToReport],
+        credentials: useCredentialsStore().current,
       }
-      this.$store.state.api.backendInteractor
-        .reportUser({ ...params })
+      reportUser({ ...params })
         .then(() => {
           this.processing = false
           this.resetState()

src/components/who_to_follow/who_to_follow.js

@@ -1,8 +1,11 @@
 import FollowCard from 'src/components/follow_card/follow_card.vue'
 import apiService from '../../services/api/api.service.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 
+import { fetchUser, suggestions } from 'src/services/api/api.service.js'
+
 const WhoToFollow = {
   components: {
     FollowCard,
@@ -17,21 +20,22 @@ const WhoToFollow = {
   },
   methods: {
     showWhoToFollow(reply) {
-      reply.forEach((i) => {
-        this.$store.state.api.backendInteractor
-          .fetchUser({ id: i.acct })
-          .then((externalUser) => {
-            if (!externalUser.error) {
-              this.$store.commit('addNewUsers', [externalUser])
-              this.users.push(externalUser)
-            }
-          })
+      reply.forEach(({ id }) => {
+        fetchUser({
+          id,
+          credentials: useCredentialsStore().current,
+        }).then((externalUser) => {
+          if (!externalUser.error) {
+            this.$store.commit('addNewUsers', [externalUser])
+            this.users.push(externalUser)
+          }
+        })
       })
     },
     getWhoToFollow() {
-      const credentials = this.$store.state.users.currentUser.credentials
+      const credentials = useCredentialsStore().current
       if (credentials) {
-        apiService.suggestions({ credentials }).then((reply) => {
+        suggestions({ credentials }).then((reply) => {
           this.showWhoToFollow(reply)
         })
       }

src/components/who_to_follow_panel/who_to_follow_panel.js

@@ -1,10 +1,10 @@
 import { shuffle } from 'lodash'
 
-import apiService from '../../services/api/api.service.js'
-
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 
+import { fetchUser, suggestions } from 'src/services/api/api.service.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 function showWhoToFollow(panel, reply) {
@@ -18,14 +18,15 @@ function showWhoToFollow(panel, reply) {
     toFollow.img = img
     toFollow.name = name
 
-    panel.$store.state.api.backendInteractor
-      .fetchUser({ id: name })
-      .then((externalUser) => {
-        if (!externalUser.error) {
-          panel.$store.commit('addNewUsers', [externalUser])
-          toFollow.id = externalUser.id
-        }
-      })
+    fetchUser({
+      id: name,
+      credentials: useCredentialsStore().current,
+    }).then((externalUser) => {
+      if (!externalUser.error) {
+        panel.$store.commit('addNewUsers', [externalUser])
+        toFollow.id = externalUser.id
+      }
+    })
   })
 }
 
@@ -35,7 +36,7 @@ function getWhoToFollow(panel) {
     panel.usersToFollow.forEach((toFollow) => {
       toFollow.name = 'Loading...'
     })
-    apiService.suggestions({ credentials }).then((reply) => {
+    suggestions({ credentials }).then((reply) => {
       showWhoToFollow(panel, reply)
     })
   }

src/modules/api.js

@@ -1,20 +1,28 @@
 import { Socket } from 'phoenix'
 
 import { WSConnectionStatus } from '../services/api/api.service.js'
-import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useShoutStore } from 'src/stores/shout.js'
 
+import {
+  fetchTimeline,
+  getMastodonSocketURI,
+  ProcessedWS,
+} from 'src/services/api/api.service.js'
+import followRequestFetcher from 'src/services/follow_request_fetcher/follow_request_fetcher.service'
+import notificationsFetcher from 'src/services/notifications_fetcher/notifications_fetcher.service.js'
+import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
+
 const retryTimeout = (multiplier) => 1000 * multiplier
 
 const api = {
   state: {
     retryMultiplier: 1,
-    backendInteractor: backendInteractorService(),
     fetchers: {},
     socket: null,
     mastoUserSocket: null,
@@ -25,9 +33,6 @@ const api = {
     followRequestCount: (state) => state.followRequests.length,
   },
   mutations: {
-    setBackendInteractor(state, backendInteractor) {
-      state.backendInteractor = backendInteractor
-    },
     addFetcher(state, { fetcherName, fetcher }) {
       state.fetchers[fetcherName] = fetcher
     },
@@ -91,9 +96,17 @@ const api = {
         try {
           const { state, commit, dispatch, rootState } = store
           const timelineData = rootState.statuses.timelines.friends
-          state.mastoUserSocket = state.backendInteractor.startUserSocket({
-            store,
+
+          const serv = useInstanceStore().server.replace('http', 'ws')
+          const credentials = useCredentialsStore().current
+          const url = getMastodonSocketURI({ credentials }, serv)
+
+          state.mastoUserSocket = ProcessedWS({
+            url,
+            id: 'Unified',
+            credentials,
           })
+
           state.mastoUserSocket.addEventListener(
             'pleroma:authenticated',
             () => {
@@ -245,7 +258,7 @@ const api = {
         return
       if (store.state.fetchers[timeline]) return
 
-      const fetcher = store.state.backendInteractor.startFetchingTimeline({
+      const fetcher = timelineFetcher.startFetching({
         timeline,
         store,
         userId,
@@ -253,7 +266,9 @@ const api = {
         statusId,
         bookmarkFolderId,
         tag,
+        credentials: useCredentialsStore().current,
       })
+
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },
     stopFetchingTimeline(store, timeline) {
@@ -261,19 +276,22 @@ const api = {
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: timeline, fetcher })
     },
+
     fetchTimeline(store, { timeline, ...rest }) {
-      store.state.backendInteractor.fetchTimeline({
+      fetchTimeline({
         store,
         timeline,
         ...rest,
+        credentials: useCredentialsStore().current,
       })
     },
 
     // Notifications
     startFetchingNotifications(store) {
       if (store.state.fetchers.notifications) return
-      const fetcher = store.state.backendInteractor.startFetchingNotifications({
+      const fetcher = notificationsFetcher.startFetching({
         store,
+        credentials: useCredentialsStore().current,
       })
       store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
     },
@@ -282,19 +300,14 @@ const api = {
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
     },
-    fetchNotifications(store, { ...rest }) {
-      store.state.backendInteractor.fetchNotifications({
-        store,
-        ...rest,
-      })
-    },
 
     // Follow requests
     startFetchingFollowRequests(store) {
       if (store.state.fetchers.followRequests) return
-      const fetcher = store.state.backendInteractor.startFetchingFollowRequests(
-        { store },
-      )
+      const fetcher = followRequestFetcher.startFetchingFollowRequests({
+        store,
+        credentials: useCredentialsStore().current,
+      })
 
       store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
     },
@@ -303,39 +316,6 @@ const api = {
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
     },
-    removeFollowRequest(store, request) {
-      const requests = store.state.followRequests.filter((it) => it !== request)
-      store.commit('setFollowRequests', requests)
-    },
-
-    // Lists
-    startFetchingLists(store) {
-      if (store.state.fetchers.lists) return
-      const fetcher = store.state.backendInteractor.startFetchingLists({
-        store,
-      })
-      store.commit('addFetcher', { fetcherName: 'lists', fetcher })
-    },
-    stopFetchingLists(store) {
-      const fetcher = store.state.fetchers.lists
-      if (!fetcher) return
-      store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
-    },
-
-    // Bookmark folders
-    startFetchingBookmarkFolders(store) {
-      if (store.state.fetchers.bookmarkFolders) return
-      if (!useInstanceCapabilitiesStore().pleromaBookmarkFoldersAvailable)
-        return
-      const fetcher =
-        store.state.backendInteractor.startFetchingBookmarkFolders({ store })
-      store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })
-    },
-    stopFetchingBookmarkFolders(store) {
-      const fetcher = store.state.fetchers.bookmarkFolders
-      if (!fetcher) return
-      store.commit('removeFetcher', { fetcherName: 'bookmarkFolders', fetcher })
-    },
 
     // Pleroma websocket
     setWsToken(store, token) {

src/modules/chats.js

@@ -11,7 +11,11 @@ import { promiseInterval } from '../services/promise_interval/promise_interval.j
 
 import { useCredentialsStore } from 'src/stores/credentials.js'
 
-import { chats } from 'src/services/api/api.service.js'
+import {
+  chats,
+  deleteChatMessage,
+  readChat,
+} from 'src/services/api/api.service.js'
 
 const emptyChatList = () => ({
   data: [],
@@ -119,11 +123,18 @@ const chatsModule = {
       commit('readChat', { id, lastReadId })
 
       if (isNewMessage) {
-        rootState.api.backendInteractor.readChat({ id, lastReadId })
+        readChat({
+          id,
+          lastReadId,
+          credentials: useCredentialsStore().current,
+        })
       }
     },
     deleteChatMessage({ rootState, commit }, value) {
-      rootState.api.backendInteractor.deleteChatMessage(value)
+      deleteChatMessage({
+        ...value,
+        credentials: useCredentialsStore().current,
+      })
       commit('deleteChatMessage', { commit, ...value })
     },
     resetChats({ commit, dispatch }) {

src/modules/notifications.js

@@ -9,11 +9,14 @@ import {
   maybeShowNotification,
 } from '../services/notification_utils/notification_utils.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useI18nStore } from 'src/stores/i18n.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useReportsStore } from 'src/stores/reports.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
+import { dismissNotification } from 'src/services/api/api.service.js'
+
 const emptyNotifications = () => ({
   desktopNotificationSilence: true,
   maxId: 0,
@@ -176,7 +179,10 @@ export const notifications = {
     },
     dismissNotification({ rootState, commit }, { id }) {
       commit('dismissNotification', { id })
-      rootState.api.backendInteractor.dismissNotification({ id })
+      dismissNotification({
+        id,
+        credentials: useCredentialsStore().current,
+      })
     },
     updateNotification({ commit }, { id, updater }) {
       commit('updateNotification', { id, updater })

src/modules/profileConfig.js

@@ -1,28 +1,37 @@
 import { get, set } from 'lodash'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import {
+  updateNotificationSettings,
+  updateProfile,
+} from 'src/services/api/api.service.js'
+
 const defaultApi = ({ rootState, commit }, { path, value }) => {
   const params = {}
   set(params, path, value)
-  return rootState.api.backendInteractor
-    .updateProfile({ params })
-    .then((result) => {
-      commit('addNewUsers', [result])
-      commit('setCurrentUser', result)
-    })
+  return updateProfile({
+    params,
+    credentials: useCredentialsStore().current,
+  }).then((result) => {
+    commit('addNewUsers', [result])
+    commit('setCurrentUser', result)
+  })
 }
 
 const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
   const settings = {}
   set(settings, path, value)
-  return rootState.api.backendInteractor
-    .updateNotificationSettings({ settings })
-    .then((result) => {
-      if (result.status === 'success') {
-        commit('confirmProfileOption', { name, value })
-      } else {
-        commit('confirmProfileOption', { name, value: oldValue })
-      }
-    })
+  return updateNotificationSettings({
+    settings,
+    credentials: useCredentialsStore().current,
+  }).then((result) => {
+    if (result.status === 'success') {
+      commit('confirmProfileOption', { name, value })
+    } else {
+      commit('confirmProfileOption', { name, value: oldValue })
+    }
+  })
 }
 
 /**

src/modules/statuses.js

@@ -14,10 +14,28 @@ import {
 } from 'lodash'
 
 import {
+  bookmarkStatus,
   deleteStatus,
+  favorite,
+  fetchEmojiReactions,
+  fetchFavoritedByUsers,
+  fetchPinnedStatuses,
+  fetchRebloggedByUsers,
   fetchScrobbles,
+  fetchStatus,
   fetchStatusHistory,
   fetchStatusSource,
+  muteConversation,
+  pinOwnStatus,
+  reactWithEmoji,
+  retweet,
+  search2,
+  unbookmarkStatus,
+  unfavorite,
+  unmuteConversation,
+  unpinOwnStatus,
+  unreactWithEmoji,
+  unretweet,
 } from '../services/api/api.service.js'
 
 import { useCredentialsStore } from 'src/stores/credentials.js'
@@ -607,9 +625,9 @@ const statuses = {
       })
     },
     fetchStatus({ rootState, dispatch }, id) {
-      return rootState.api.backendInteractor
-        .fetchStatus({ id })
-        .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
+      return fetchStatus({ id }).then((status) =>
+        dispatch('addNewStatuses', { statuses: [status] }),
+      )
     },
     fetchStatusSource({ rootState }, status) {
       return fetchStatusSource({
@@ -647,99 +665,111 @@ const statuses = {
     favorite({ rootState, commit }, status) {
       // Optimistic favoriting...
       commit('setFavorited', { status, value: true })
-      rootState.api.backendInteractor
-        .favorite({ id: status.id })
-        .then((status) =>
-          commit('setFavoritedConfirm', {
-            status,
-            user: rootState.users.currentUser,
-          }),
-        )
+      favorite({
+        id: status.id,
+        credentials: useCredentialsStore().current,
+      }).then((status) =>
+        commit('setFavoritedConfirm', {
+          status,
+          user: rootState.users.currentUser,
+        }),
+      )
     },
     unfavorite({ rootState, commit }, status) {
       // Optimistic unfavoriting...
       commit('setFavorited', { status, value: false })
-      rootState.api.backendInteractor
-        .unfavorite({ id: status.id })
-        .then((status) =>
-          commit('setFavoritedConfirm', {
-            status,
-            user: rootState.users.currentUser,
-          }),
-        )
+      unfavorite({
+        id: status.id,
+        credentials: useCredentialsStore().current,
+      }).then((status) =>
+        commit('setFavoritedConfirm', {
+          status,
+          user: rootState.users.currentUser,
+        }),
+      )
     },
     fetchPinnedStatuses({ rootState, dispatch }, userId) {
-      rootState.api.backendInteractor
-        .fetchPinnedStatuses({ id: userId })
-        .then((statuses) =>
-          dispatch('addNewStatuses', {
-            statuses,
-            timeline: 'user',
-            userId,
-            showImmediately: true,
-            noIdUpdate: true,
-          }),
-        )
+      fetchPinnedStatuses({
+        id: userId,
+        credentials: useCredentialsStore().current,
+      }).then((statuses) =>
+        dispatch('addNewStatuses', {
+          statuses,
+          timeline: 'user',
+          userId,
+          showImmediately: true,
+          noIdUpdate: true,
+        }),
+      )
     },
     pinStatus({ rootState, dispatch }, statusId) {
-      return rootState.api.backendInteractor
-        .pinOwnStatus({ id: statusId })
-        .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
+      return pinOwnStatus({
+        id: statusId,
+        credentials: useCredentialsStore().current,
+      }).then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
     unpinStatus({ rootState, dispatch }, statusId) {
-      return rootState.api.backendInteractor
-        .unpinOwnStatus({ id: statusId })
-        .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
+      return unpinOwnStatus({
+        id: statusId,
+        credentials: useCredentialsStore().current,
+      }).then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
     muteConversation({ rootState, commit }, { id: statusId }) {
-      return rootState.api.backendInteractor
-        .muteConversation({ id: statusId })
-        .then((status) => commit('setMutedStatus', status))
+      return muteConversation({
+        id: statusId,
+        credentials: useCredentialsStore().current,
+      }).then((status) => commit('setMutedStatus', status))
     },
     unmuteConversation({ rootState, commit }, { id: statusId }) {
-      return rootState.api.backendInteractor
-        .unmuteConversation({ id: statusId })
-        .then((status) => commit('setMutedStatus', status))
+      return unmuteConversation({
+        id: statusId,
+        credentials: useCredentialsStore().current,
+      }).then((status) => commit('setMutedStatus', status))
     },
     retweet({ rootState, commit }, status) {
       // Optimistic retweeting...
       commit('setRetweeted', { status, value: true })
-      rootState.api.backendInteractor
-        .retweet({ id: status.id })
-        .then((status) =>
-          commit('setRetweetedConfirm', {
-            status: status.retweeted_status,
-            user: rootState.users.currentUser,
-          }),
-        )
+      retweet({
+        id: status.id,
+        credentials: useCredentialsStore().current,
+      }).then((status) =>
+        commit('setRetweetedConfirm', {
+          status: status.retweeted_status,
+          user: rootState.users.currentUser,
+        }),
+      )
     },
     unretweet({ rootState, commit }, status) {
       // Optimistic unretweeting...
       commit('setRetweeted', { status, value: false })
-      rootState.api.backendInteractor
-        .unretweet({ id: status.id })
-        .then((status) =>
-          commit('setRetweetedConfirm', {
-            status,
-            user: rootState.users.currentUser,
-          }),
-        )
+      unretweet({
+        id: status.id,
+        credentials: useCredentialsStore().current,
+      }).then((status) =>
+        commit('setRetweetedConfirm', {
+          status,
+          user: rootState.users.currentUser,
+        }),
+      )
     },
     bookmark({ rootState, commit }, status) {
       commit('setBookmarked', { status, value: true })
-      rootState.api.backendInteractor
-        .bookmarkStatus({ id: status.id, folder_id: status.bookmark_folder_id })
-        .then((status) => {
-          commit('setBookmarkedConfirm', { status })
-        })
+      bookmarkStatus({
+        id: status.id,
+        folder_id: status.bookmark_folder_id,
+        credentials: useCredentialsStore().current,
+      }).then((status) => {
+        commit('setBookmarkedConfirm', { status })
+      })
     },
     unbookmark({ rootState, commit }, status) {
       commit('setBookmarked', { status, value: false })
-      rootState.api.backendInteractor
-        .unbookmarkStatus({ id: status.id })
-        .then((status) => {
-          commit('setBookmarkedConfirm', { status })
-        })
+      unbookmarkStatus({
+        id: status.id,
+        credentials: useCredentialsStore().current,
+      }).then((status) => {
+        commit('setBookmarkedConfirm', { status })
+      })
     },
     queueFlush({ commit }, { timeline, id }) {
       commit('queueFlush', { timeline, id })
@@ -749,8 +779,14 @@ const statuses = {
     },
     fetchFavsAndRepeats({ rootState, commit }, id) {
       Promise.all([
-        rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
-        rootState.api.backendInteractor.fetchRebloggedByUsers({ id }),
+        fetchFavoritedByUsers({
+          id,
+          credentials: useCredentialsStore().current,
+        }),
+        fetchRebloggedByUsers({
+          id,
+          credentials: useCredentialsStore().current,
+        }),
       ]).then(([favoritedByUsers, rebloggedByUsers]) => {
         commit('addFavs', {
           id,
@@ -769,7 +805,11 @@ const statuses = {
       if (!currentUser) return
 
       commit('addOwnReaction', { id, emoji, currentUser })
-      rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(() => {
+      reactWithEmoji({
+        id,
+        emoji,
+        credentials: useCredentialsStore().current,
+      }).then(() => {
         dispatch('fetchEmojiReactionsBy', id)
       })
     },
@@ -778,59 +818,70 @@ const statuses = {
       if (!currentUser) return
 
       commit('removeOwnReaction', { id, emoji, currentUser })
-      rootState.api.backendInteractor
-        .unreactWithEmoji({ id, emoji })
-        .then(() => {
-          dispatch('fetchEmojiReactionsBy', id)
-        })
+      unreactWithEmoji({
+        id,
+        emoji,
+        currentUser: rootState.users.currentUser,
+      }).then(() => {
+        dispatch('fetchEmojiReactionsBy', id)
+      })
     },
     fetchEmojiReactionsBy({ rootState, commit }, id) {
-      return rootState.api.backendInteractor
-        .fetchEmojiReactions({ id })
-        .then((emojiReactions) => {
-          commit('addEmojiReactionsBy', {
-            id,
-            emojiReactions,
-            currentUser: rootState.users.currentUser,
-          })
+      return fetchEmojiReactions({
+        id,
+        credentials: useCredentialsStore().current,
+      }).then((emojiReactions) => {
+        commit('addEmojiReactionsBy', {
+          id,
+          emojiReactions,
+          currentUser: rootState.users.currentUser,
         })
+      })
     },
     fetchFavs({ rootState, commit }, id) {
-      rootState.api.backendInteractor
-        .fetchFavoritedByUsers({ id })
-        .then((favoritedByUsers) =>
-          commit('addFavs', {
-            id,
-            favoritedByUsers,
-            currentUser: rootState.users.currentUser,
-          }),
-        )
+      fetchFavoritedByUsers({
+        id,
+        credentials: useCredentialsStore().current,
+      }).then((favoritedByUsers) =>
+        commit('addFavs', {
+          id,
+          favoritedByUsers,
+          currentUser: rootState.users.currentUser,
+        }),
+      )
     },
     fetchRepeats({ rootState, commit }, id) {
-      rootState.api.backendInteractor
-        .fetchRebloggedByUsers({ id })
-        .then((rebloggedByUsers) =>
-          commit('addRepeats', {
-            id,
-            rebloggedByUsers,
-            currentUser: rootState.users.currentUser,
-          }),
-        )
+      fetchRebloggedByUsers({
+        id,
+        credentials: useCredentialsStore().current,
+      }).then((rebloggedByUsers) =>
+        commit('addRepeats', {
+          id,
+          rebloggedByUsers,
+          currentUser: rootState.users.currentUser,
+        }),
+      )
     },
     search(store, { q, resolve, limit, offset, following, type }) {
-      return store.rootState.api.backendInteractor
-        .search2({ q, resolve, limit, offset, following, type })
-        .then((data) => {
-          store.commit('addNewUsers', data.accounts)
-          store.commit(
-            'addNewUsers',
-            data.statuses.map((s) => s.user).filter((u) => u),
-          )
-          data.statuses = store.commit('addNewStatuses', {
-            statuses: data.statuses,
-          })
-          return data
+      return search2({
+        q,
+        resolve,
+        limit,
+        offset,
+        following,
+        type,
+        credentials: useCredentialsStore().current,
+      }).then((data) => {
+        store.commit('addNewUsers', data.accounts)
+        store.commit(
+          'addNewUsers',
+          data.statuses.map((s) => s.user).filter((u) => u),
+        )
+        data.statuses = store.commit('addNewStatuses', {
+          statuses: data.statuses,
         })
+        return data
+      })
     },
     setVirtualHeight({ commit }, { statusId, height }) {
       commit('setVirtualHeight', { statusId, height })

src/modules/users.js

@@ -10,7 +10,6 @@ import {
 } from 'lodash'
 
 import { register } from '../services/api/api.service.js'
-import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import oauthApi from '../services/new_api/oauth.js'
 import {
   registerPushNotifications,
@@ -21,15 +20,35 @@ import {
   windowWidth,
 } from '../services/window_utils/window_utils'
 
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useListsStore } from 'src/stores/lists.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
+import {
+  fetchBlocks,
+  fetchDomainMutes,
+  fetchFollowers,
+  fetchFriends,
+  fetchMutes,
+  fetchUser,
+  fetchUserByName,
+  fetchUserInLists,
+  fetchUserRelationship,
+  followUser,
+  getCaptcha,
+  muteUser,
+  searchUsers,
+  verifyCredentials,
+} from 'src/services/api/api.service.js'
+
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
   if (!item) {
@@ -72,46 +91,38 @@ const blockUser = (store, args) => {
   store.commit('updateUserRelationship', [predictedRelationship])
   store.commit('addBlockId', id)
 
-  return store.rootState.api.backendInteractor
-    .blockUser({ id, expiresIn })
-    .then((relationship) => {
-      store.commit('updateUserRelationship', [relationship])
-      store.commit('addBlockId', id)
+  return blockUser({ id, expiresIn }).then((relationship) => {
+    store.commit('updateUserRelationship', [relationship])
+    store.commit('addBlockId', id)
 
-      store.commit('removeStatus', { timeline: 'friends', userId: id })
-      store.commit('removeStatus', { timeline: 'public', userId: id })
-      store.commit('removeStatus', {
-        timeline: 'publicAndExternal',
-        userId: id,
-      })
+    store.commit('removeStatus', { timeline: 'friends', userId: id })
+    store.commit('removeStatus', { timeline: 'public', userId: id })
+    store.commit('removeStatus', {
+      timeline: 'publicAndExternal',
+      userId: id,
     })
+  })
 }
 
 const unblockUser = (store, id) => {
-  return store.rootState.api.backendInteractor
-    .unblockUser({ id })
-    .then((relationship) =>
-      store.commit('updateUserRelationship', [relationship]),
-    )
+  return unblockUser({ id }).then((relationship) =>
+    store.commit('updateUserRelationship', [relationship]),
+  )
 }
 
 const removeUserFromFollowers = (store, id) => {
-  return store.rootState.api.backendInteractor
-    .removeUserFromFollowers({ id })
-    .then((relationship) =>
-      store.commit('updateUserRelationship', [relationship]),
-    )
+  return removeUserFromFollowers({ id }).then((relationship) =>
+    store.commit('updateUserRelationship', [relationship]),
+  )
 }
 
 const editUserNote = (store, { id, comment }) => {
-  return store.rootState.api.backendInteractor
-    .editUserNote({ id, comment })
-    .then((relationship) =>
-      store.commit('updateUserRelationship', [relationship]),
-    )
+  return editUserNote({ id, comment }).then((relationship) =>
+    store.commit('updateUserRelationship', [relationship]),
+  )
 }
 
-const muteUser = (store, args) => {
+const localMuteUser = (store, args) => {
   const id = typeof args === 'object' ? args.id : args
   const expiresIn = typeof args === 'object' ? args.expiresIn : 0
 
@@ -119,12 +130,14 @@ const muteUser = (store, args) => {
   store.commit('updateUserRelationship', [predictedRelationship])
   store.commit('addMuteId', id)
 
-  return store.rootState.api.backendInteractor
-    .muteUser({ id, expiresIn })
-    .then((relationship) => {
-      store.commit('updateUserRelationship', [relationship])
-      store.commit('addMuteId', id)
-    })
+  return muteUser({
+    id,
+    expiresIn,
+    credentials: useCredentialsStore().current,
+  }).then((relationship) => {
+    store.commit('updateUserRelationship', [relationship])
+    store.commit('addMuteId', id)
+  })
 }
 
 const unmuteUser = (store, id) => {
@@ -132,39 +145,43 @@ const unmuteUser = (store, id) => {
   predictedRelationship.muting = false
   store.commit('updateUserRelationship', [predictedRelationship])
 
-  return store.rootState.api.backendInteractor
-    .unmuteUser({ id })
-    .then((relationship) =>
-      store.commit('updateUserRelationship', [relationship]),
-    )
+  return unmuteUser({ id }).then((relationship) =>
+    store.commit('updateUserRelationship', [relationship]),
+  )
 }
 
 const hideReblogs = (store, userId) => {
-  return store.rootState.api.backendInteractor
-    .followUser({ id: userId, reblogs: false })
-    .then((relationship) => {
-      store.commit('updateUserRelationship', [relationship])
-    })
+  return followUser({
+    id: userId,
+    reblogs: false,
+    credentials: useCredentialsStore().current,
+  }).then((relationship) => {
+    store.commit('updateUserRelationship', [relationship])
+  })
 }
 
 const showReblogs = (store, userId) => {
-  return store.rootState.api.backendInteractor
-    .followUser({ id: userId, reblogs: true })
-    .then((relationship) =>
-      store.commit('updateUserRelationship', [relationship]),
-    )
+  return followUser({
+    id: userId,
+    reblogs: true,
+    credentials: useCredentialsStore().current,
+  }).then((relationship) =>
+    store.commit('updateUserRelationship', [relationship]),
+  )
 }
 
 const muteDomain = (store, domain) => {
-  return store.rootState.api.backendInteractor
-    .muteDomain({ domain })
-    .then(() => store.commit('addDomainMute', domain))
+  return muteDomain({
+    domain,
+    credentials: useCredentialsStore().current,
+  }).then(() => store.commit('addDomainMute', domain))
 }
 
 const unmuteDomain = (store, domain) => {
-  return store.rootState.api.backendInteractor
-    .unmuteDomain({ domain })
-    .then(() => store.commit('removeDomainMute', domain))
+  return unmuteDomain({
+    domain,
+    credentials: useCredentialsStore().current,
+  }).then(() => store.commit('removeDomainMute', domain))
 }
 
 export const mutations = {
@@ -385,55 +402,60 @@ const users = {
         })
     },
     fetchUser(store, id) {
-      return store.rootState.api.backendInteractor
-        .fetchUser({ id })
-        .then((user) => {
-          store.commit('addNewUsers', [user])
-          return user
-        })
+      return fetchUser({
+        id,
+        credentials: useCredentialsStore().current,
+      }).then((user) => {
+        store.commit('addNewUsers', [user])
+        return user
+      })
     },
     fetchUserByName(store, name) {
-      return store.rootState.api.backendInteractor
-        .fetchUserByName({ name })
-        .then((user) => {
-          store.commit('addNewUsers', [user])
-          return user
-        })
+      return fetchUserByName({
+        name,
+        credentials: useCredentialsStore().current,
+      }).then((user) => {
+        store.commit('addNewUsers', [user])
+        return user
+      })
     },
     fetchUserRelationship(store, id) {
       if (store.state.currentUser) {
-        store.rootState.api.backendInteractor
-          .fetchUserRelationship({ id })
-          .then((relationships) =>
-            store.commit('updateUserRelationship', relationships),
-          )
+        fetchUserRelationship({
+          id,
+          credentials: useCredentialsStore().current,
+        }).then((relationships) =>
+          store.commit('updateUserRelationship', relationships),
+        )
       }
     },
     fetchUserInLists(store, id) {
       if (store.state.currentUser) {
-        store.rootState.api.backendInteractor
-          .fetchUserInLists({ id })
-          .then((inLists) => store.commit('updateUserInLists', { id, inLists }))
+        fetchUserInLists({
+          id,
+          credentials: useCredentialsStore().current,
+        }).then((inLists) => store.commit('updateUserInLists', { id, inLists }))
       }
     },
     fetchBlocks(store, args) {
       const { reset } = args || {}
 
       const maxId = store.state.currentUser.blockIdsMaxId
-      return store.rootState.api.backendInteractor
-        .fetchBlocks({ maxId })
-        .then((blocks) => {
-          if (reset) {
-            store.commit('saveBlockIds', map(blocks, 'id'))
-          } else {
-            map(blocks, 'id').map((id) => store.commit('addBlockId', id))
-          }
-          if (blocks.length) {
-            store.commit('setBlockIdsMaxId', last(blocks).id)
-          }
-          store.commit('addNewUsers', blocks)
-          return blocks
-        })
+      return fetchBlocks({
+        maxId,
+        credentials: useCredentialsStore().current,
+      }).then((blocks) => {
+        if (reset) {
+          store.commit('saveBlockIds', map(blocks, 'id'))
+        } else {
+          map(blocks, 'id').map((id) => store.commit('addBlockId', id))
+        }
+        if (blocks.length) {
+          store.commit('setBlockIdsMaxId', last(blocks).id)
+        }
+        store.commit('addNewUsers', blocks)
+        return blocks
+      })
     },
     blockUser(store, data) {
       return blockUser(store, data)
@@ -457,23 +479,24 @@ const users = {
       const { reset } = args || {}
 
       const maxId = store.state.currentUser.muteIdsMaxId
-      return store.rootState.api.backendInteractor
-        .fetchMutes({ maxId })
-        .then((mutes) => {
-          if (reset) {
-            store.commit('saveMuteIds', map(mutes, 'id'))
-          } else {
-            map(mutes, 'id').map((id) => store.commit('addMuteId', id))
-          }
-          if (mutes.length) {
-            store.commit('setMuteIdsMaxId', last(mutes).id)
-          }
-          store.commit('addNewUsers', mutes)
-          return mutes
-        })
+      return fetchMutes({
+        maxId,
+        credentials: useCredentialsStore().current,
+      }).then((mutes) => {
+        if (reset) {
+          store.commit('saveMuteIds', map(mutes, 'id'))
+        } else {
+          map(mutes, 'id').map((id) => store.commit('addMuteId', id))
+        }
+        if (mutes.length) {
+          store.commit('setMuteIdsMaxId', last(mutes).id)
+        }
+        store.commit('addNewUsers', mutes)
+        return mutes
+      })
     },
     muteUser(store, data) {
-      return muteUser(store, data)
+      return localMuteUser(store, data)
     },
     unmuteUser(store, id) {
       return unmuteUser(store, id)
@@ -485,18 +508,18 @@ const users = {
       return showReblogs(store, id)
     },
     muteUsers(store, data = []) {
-      return Promise.all(data.map((d) => muteUser(store, d)))
+      return Promise.all(data.map((d) => localMuteUser(store, d)))
     },
     unmuteUsers(store, ids = []) {
       return Promise.all(ids.map((d) => unmuteUser(store, d)))
     },
     fetchDomainMutes(store) {
-      return store.rootState.api.backendInteractor
-        .fetchDomainMutes()
-        .then((domainMutes) => {
-          store.commit('saveDomainMutes', domainMutes)
-          return domainMutes
-        })
+      return fetchDomainMutes({
+        credentials: useCredentialsStore().current,
+      }).then((domainMutes) => {
+        store.commit('saveDomainMutes', domainMutes)
+        return domainMutes
+      })
     },
     muteDomain(store, domain) {
       return muteDomain(store, domain)
@@ -513,24 +536,28 @@ const users = {
     fetchFriends({ rootState, commit }, id) {
       const user = rootState.users.usersObject[id]
       const maxId = last(user.friendIds)
-      return rootState.api.backendInteractor
-        .fetchFriends({ id, maxId })
-        .then((friends) => {
-          commit('addNewUsers', friends)
-          commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
-          return friends
-        })
+      return fetchFriends({
+        id,
+        maxId,
+        credentials: useCredentialsStore().current,
+      }).then((friends) => {
+        commit('addNewUsers', friends)
+        commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
+        return friends
+      })
     },
     fetchFollowers({ rootState, commit }, id) {
       const user = rootState.users.usersObject[id]
       const maxId = last(user.followerIds)
-      return rootState.api.backendInteractor
-        .fetchFollowers({ id, maxId })
-        .then((followers) => {
-          commit('addNewUsers', followers)
-          commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
-          return followers
-        })
+      return fetchFollowers({
+        id,
+        maxId,
+        credentials: useCredentialsStore().current,
+      }).then((followers) => {
+        commit('addNewUsers', followers)
+        commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
+        return followers
+      })
     },
     clearFriends({ commit }, userId) {
       commit('clearFriends', userId)
@@ -539,18 +566,22 @@ const users = {
       commit('clearFollowers', userId)
     },
     subscribeUser({ rootState, commit }, id) {
-      return rootState.api.backendInteractor
-        .followUser({ id, notify: true })
-        .then((relationship) =>
-          commit('updateUserRelationship', [relationship]),
-        )
+      return followUser({
+        id,
+        notify: true,
+        credentials: useCredentialsStore().current,
+      }).then((relationship) =>
+        commit('updateUserRelationship', [relationship]),
+      )
     },
     unsubscribeUser({ rootState, commit }, id) {
-      return rootState.api.backendInteractor
-        .followUser({ id, notify: false })
-        .then((relationship) =>
-          commit('updateUserRelationship', [relationship]),
-        )
+      return followUser({
+        id,
+        notify: false,
+        credentials: useCredentialsStore().current,
+      }).then((relationship) =>
+        commit('updateUserRelationship', [relationship]),
+      )
     },
     registerPushNotifications(store) {
       const token = store.state.currentUser.credentials
@@ -611,12 +642,13 @@ const users = {
       })
     },
     searchUsers({ rootState, commit }, { query }) {
-      return rootState.api.backendInteractor
-        .searchUsers({ query })
-        .then((users) => {
-          commit('addNewUsers', users)
-          return users
-        })
+      return searchUsers({
+        query,
+        credentials: useCredentialsStore().current,
+      }).then((users) => {
+        commit('addNewUsers', users)
+        return users
+      })
     },
     async signUp(store, userInfo) {
       const oauthStore = useOAuthStore()
@@ -645,8 +677,10 @@ const users = {
         throw e
       }
     },
-    async getCaptcha(store) {
-      return store.rootState.api.backendInteractor.getCaptcha()
+    getCaptcha(store) {
+      return getCaptcha({
+        credentials: useCredentialsStore().current,
+      })
     },
 
     logout(store) {
@@ -670,13 +704,10 @@ const users = {
           store.dispatch('disconnectFromSocket')
           oauth.clearToken()
           store.dispatch('stopFetchingTimeline', 'friends')
-          store.commit(
-            'setBackendInteractor',
-            backendInteractorService(oauth.getToken),
-          )
+          useCredentialsStore().setCredentials(null)
           store.dispatch('stopFetchingNotifications')
-          store.dispatch('stopFetchingLists')
-          store.dispatch('stopFetchingBookmarkFolders')
+          useListsStore().stopFetching()
+          useBookmarkFoldersStore().stopFetching()
           store.dispatch('stopFetchingFollowRequests')
           store.commit('clearNotifications')
           store.commit('resetStatuses')
@@ -691,8 +722,9 @@ const users = {
         const commit = store.commit
         const dispatch = store.dispatch
         commit('beginLogin')
-        store.rootState.api.backendInteractor
-          .verifyCredentials(accessToken)
+        verifyCredentials({
+          credentials: useCredentialsStore().current,
+        })
           .then((data) => {
             if (!data.error) {
               const user = data
@@ -721,11 +753,8 @@ const users = {
                 useInterfaceStore().setNotificationPermission(permission),
               )
 
-              // Set our new backend interactor
-              commit(
-                'setBackendInteractor',
-                backendInteractorService(accessToken),
-              )
+              // Update credentials
+              useCredentialsStore().setCredentials(accessToken)
 
               // Do server-side storage migrations
 
@@ -764,8 +793,8 @@ const users = {
                 }
               }
 
-              dispatch('startFetchingLists')
-              dispatch('startFetchingBookmarkFolders')
+              useListsStore().startFetching()
+              useBookmarkFoldersStore().startFetching()
 
               if (user.locked) {
                 dispatch('startFetchingFollowRequests')
@@ -799,9 +828,9 @@ const users = {
               useInterfaceStore().setLayoutHeight(windowHeight())
 
               // Fetch our friends
-              store.rootState.api.backendInteractor
-                .fetchFriends({ id: user.id })
-                .then((friends) => commit('addNewUsers', friends))
+              fetchFriends({ id: user.id }).then((friends) =>
+                commit('addNewUsers', friends),
+              )
             } else {
               const response = data.error
               // Authentication failed

src/services/api/api.service.js

@@ -126,6 +126,10 @@ const PLEROMA_USER_FAVORITES_TIMELINE_URL = (id) =>
 const PLEROMA_BOOKMARK_FOLDERS_URL = '/api/v1/pleroma/bookmark_folders'
 const PLEROMA_BOOKMARK_FOLDER_URL = (id) =>
   `/api/v1/pleroma/bookmark_folders/${id}`
+
+const EMOJI_PACKS_URL = (page, pageSize) =>
+  `/api/v1/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
+
 export const updateNotificationSettings = ({ credentials, settings }) => {
   const form = new FormData()
 
@@ -682,6 +686,11 @@ export const fetchTimeline = ({
   })
 }
 
+export const listEmojiPacks = ({ page, pageSize, credentials }) =>
+  promisedRequest({
+    url: EMOJI_PACKS_URL(page, pageSize),
+  })
+
 export const fetchPinnedStatuses = ({ id, credentials }) =>
   promisedRequest({
     url: MASTODON_USER_TIMELINE_URL(id) + '?pinned=true',

src/services/backend_interactor_service/backend_interactor_service.js

@@ -1,72 +0,0 @@
-import bookmarkFoldersFetcher from '../../services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js'
-import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
-import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
-import * as apiService from '../api/api.service.js'
-import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
-import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
-
-import { useInstanceStore } from 'src/stores/instance.js'
-
-const backendInteractorService = (credentials) => ({
-  startFetchingTimeline({
-    timeline,
-    store,
-    userId = false,
-    listId = false,
-    statusId = false,
-    bookmarkFolderId = false,
-    tag,
-  }) {
-    return timelineFetcher.startFetching({
-      timeline,
-      store,
-      credentials,
-      userId,
-      listId,
-      statusId,
-      bookmarkFolderId,
-      tag,
-    })
-  },
-
-  fetchTimeline(args) {
-    return timelineFetcher.fetchAndUpdate({ ...args, credentials })
-  },
-
-  startFetchingNotifications({ store }) {
-    return notificationsFetcher.startFetching({ store, credentials })
-  },
-
-  fetchNotifications(args) {
-    return notificationsFetcher.fetchAndUpdate({ ...args, credentials })
-  },
-
-  startFetchingFollowRequests({ store }) {
-    return followRequestFetcher.startFetching({ store, credentials })
-  },
-
-  startFetchingLists({ store }) {
-    return listsFetcher.startFetching({ store, credentials })
-  },
-
-  startFetchingBookmarkFolders({ store }) {
-    return bookmarkFoldersFetcher.startFetching({ store, credentials })
-  },
-
-  startUserSocket({ store }) {
-    const serv = useInstanceStore().server.replace('http', 'ws')
-    const url = apiService.getMastodonSocketURI({}, serv)
-    return apiService.ProcessedWS({ url, id: 'Unified', credentials })
-  },
-
-  ...Object.entries(apiService).reduce((acc, [key, func]) => {
-    return {
-      ...acc,
-      [key]: (args) => func({ credentials, ...args }),
-    }
-  }, {}),
-
-  verifyCredentials: apiService.verifyCredentials,
-})
-
-export default backendInteractorService

src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js

@@ -1,31 +0,0 @@
-import { fetchBookmarkFolders } from '../api/api.service.js'
-import { promiseInterval } from '../promise_interval/promise_interval.js'
-
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
-
-const fetchAndUpdate = ({ credentials }) => {
-  return fetchBookmarkFolders({ credentials })
-    .then(
-      (bookmarkFolders) => {
-        useBookmarkFoldersStore().setBookmarkFolders(bookmarkFolders)
-      },
-      (rej) => {
-        console.error(rej)
-      },
-    )
-    .catch((e) => {
-      console.error(e)
-    })
-}
-
-const startFetching = ({ credentials, store }) => {
-  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
-  boundFetchAndUpdate()
-  return promiseInterval(boundFetchAndUpdate, 240000)
-}
-
-const bookmarkFoldersFetcher = {
-  startFetching,
-}
-
-export default bookmarkFoldersFetcher

src/services/follow_manipulate/follow_manipulate.js

@@ -1,8 +1,18 @@
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import {
+  fetchUserRelationship,
+  followUser,
+  unfollowUser,
+} from 'src/services/api/api.service.js'
+
 const fetchRelationship = (attempt, userId, store) =>
   new Promise((resolve, reject) => {
     setTimeout(() => {
-      store.state.api.backendInteractor
-        .fetchUserRelationship({ id: userId })
+      fetchUserRelationship({
+        id: userId,
+        credentials: useCredentialsStore().current,
+      })
         .then((relationship) => {
           store.commit('updateUserRelationship', [relationship])
           return relationship
@@ -27,38 +37,40 @@ const fetchRelationship = (attempt, userId, store) =>
 
 export const requestFollow = (userId, store) =>
   new Promise((resolve) => {
-    store.state.api.backendInteractor
-      .followUser({ id: userId })
-      .then((updated) => {
-        store.commit('updateUserRelationship', [updated])
+    followUser({
+      id: userId,
+      credentials: useCredentialsStore().current,
+    }).then((updated) => {
+      store.commit('updateUserRelationship', [updated])
 
-        if (updated.following || (updated.locked && updated.requested)) {
-          // If we get result immediately or the account is locked, just stop.
-          resolve()
-          return
-        }
+      if (updated.following || (updated.locked && updated.requested)) {
+        // If we get result immediately or the account is locked, just stop.
+        resolve()
+        return
+      }
 
-        // But usually we don't get result immediately, so we ask server
-        // for updated user profile to confirm if we are following them
-        // Sometimes it takes several tries. Sometimes we end up not following
-        // user anyway, probably because they locked themselves and we
-        // don't know that yet.
-        // Recursive Promise, it will call itself up to 3 times.
+      // But usually we don't get result immediately, so we ask server
+      // for updated user profile to confirm if we are following them
+      // Sometimes it takes several tries. Sometimes we end up not following
+      // user anyway, probably because they locked themselves and we
+      // don't know that yet.
+      // Recursive Promise, it will call itself up to 3 times.
 
-        return fetchRelationship(1, updated, store).then(() => {
-          resolve()
-        })
+      return fetchRelationship(1, updated, store).then(() => {
+        resolve()
       })
+    })
   })
 
 export const requestUnfollow = (userId, store) =>
   new Promise((resolve) => {
-    store.state.api.backendInteractor
-      .unfollowUser({ id: userId })
-      .then((updated) => {
-        store.commit('updateUserRelationship', [updated])
-        resolve({
-          updated,
-        })
+    unfollowUser({
+      id: userId,
+      credentials: useCredentialsStore().current,
+    }).then((updated) => {
+      store.commit('updateUserRelationship', [updated])
+      resolve({
+        updated,
       })
+    })
   })

src/services/lists_fetcher/lists_fetcher.service.js

@@ -1,31 +0,0 @@
-import { fetchLists } from '../api/api.service.js'
-import { promiseInterval } from '../promise_interval/promise_interval.js'
-
-import { useListsStore } from 'src/stores/lists.js'
-
-const fetchAndUpdate = ({ credentials }) => {
-  return fetchLists({ credentials })
-    .then(
-      (lists) => {
-        useListsStore().setLists(lists)
-      },
-      (rej) => {
-        console.error(rej)
-      },
-    )
-    .catch((e) => {
-      console.error(e)
-    })
-}
-
-const startFetching = ({ credentials, store }) => {
-  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
-  boundFetchAndUpdate()
-  return promiseInterval(boundFetchAndUpdate, 240000)
-}
-
-const listsFetcher = {
-  startFetching,
-}
-
-export default listsFetcher

src/stores/admin_settings.js

@@ -4,16 +4,26 @@ import { defineStore } from 'pinia'
 import { useCredentialsStore } from 'src/stores/credentials.js'
 
 import {
+  addNewEmojiFile,
   changeStatusScope,
+  createEmojiPack,
   deleteAccounts,
+  deleteEmojiPack,
   disableMFA,
+  downloadRemoteEmojiPack,
+  downloadRemoteEmojiPackZIP,
   getAvailableFrontends,
   getInstanceConfigDescriptions,
   getInstanceDBConfig,
   getUserData,
+  importEmojiFromFS,
+  installFrontend,
+  listEmojiPacks,
+  listRemoteEmojiPacks,
   listStatuses,
   listUsers,
   pushInstanceDBConfig,
+  reloadEmoji,
   requirePasswordChange,
   resendConfirmationEmail,
   setUsersActivationStatus,
@@ -342,6 +352,12 @@ export const useAdminSettingsStore = defineStore('adminSettings', {
       })
     },
 
+    installFrontend() {
+      return installFrontend({
+        credentials: useCredentialsStore().current,
+      })
+    },
+
     // Statuses stuff
     async fetchStatuses(opts) {
       const { total, activities } = await listStatuses({
@@ -526,5 +542,62 @@ export const useAdminSettingsStore = defineStore('adminSettings', {
         window.vuex.commit('updateUserAdminData', { user })
       })
     },
+    reloadEmoji() {
+      return reloadEmoji({ credentials: useCredentialsStore().current })
+    },
+    importEmojiFromFS() {
+      return importEmojiFromFS({ credentials: useCredentialsStore().current })
+    },
+    listEmojiPacks() {
+      return listEmojiPacks({ credentials: useCredentialsStore().current })
+    },
+    listRemoteEmojiPacks() {
+      return listRemoteEmojiPacks({
+        credentials: useCredentialsStore().current,
+      })
+    },
+    addNewEmojiFile({ packName, file, shortcode, filename }) {
+      return addNewEmojiFile({
+        packName,
+        file,
+        shortcode,
+        filename,
+        credentials: useCredentialsStore().current,
+      })
+    },
+    downloadRemoteEmojiPack({ instance, packName, as }) {
+      return downloadRemoteEmojiPack({
+        instance,
+        packName,
+        as,
+        credentials: useCredentialsStore().current,
+      })
+    },
+    downloadRemoteEmojiPackZIP({ url, packName }) {
+      return downloadRemoteEmojiPackZIP({
+        url,
+        packName,
+        credentials: useCredentialsStore().current,
+      })
+    },
+    createEmojiPack({ name }) {
+      return createEmojiPack({
+        name,
+        credentials: useCredentialsStore().current,
+      })
+    },
+    deleteEmojiPack({ name }) {
+      return createEmojiPack({
+        name,
+        credentials: useCredentialsStore().current,
+      })
+    },
+    saveEmojiPackMetadata({ name, newData }) {
+      return createEmojiPack({
+        name,
+        newData,
+        credentials: useCredentialsStore().current,
+      })
+    },
   },
 })

src/stores/bookmark_folders.js

@@ -6,8 +6,10 @@ import { useCredentialsStore } from 'src/stores/credentials.js'
 import {
   createBookmarkFolder,
   deleteBookmarkFolder,
+  fetchBookmarkFolders,
   updateBookmarkFolder,
 } from 'src/services/api/api.service.js'
+import { promiseInterval } from 'src/services/promise_interval/promise_interval.js'
 
 export const useBookmarkFoldersStore = defineStore('bookmarkFolders', {
   state: () => ({
@@ -24,6 +26,23 @@ export const useBookmarkFoldersStore = defineStore('bookmarkFolders', {
     },
   },
   actions: {
+    startFetching() {
+      promiseInterval(() => {
+        this.fetcher = fetchBookmarkFolders({
+          credentials: useCredentialsStore().current,
+        })
+          .then(
+            (folders) => this.setBookmarkFolders(folders),
+            (rej) => console.error(rej),
+          )
+          .catch((e) => {
+            console.error(e)
+          })
+      }, 240000)
+    },
+    stopFetching() {
+      this.fetcher?.stop()
+    },
     setBookmarkFolders(value) {
       this.allFolders = value
     },

src/stores/emoji.js

@@ -1,9 +1,11 @@
 import { merge } from 'lodash'
 import { defineStore } from 'pinia'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 
 import { ensureFinalFallback } from 'src/i18n/languages.js'
+import { listEmojiPacks } from 'src/services/api/api.service.js'
 
 import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'
 
@@ -183,13 +185,13 @@ export const useEmojiStore = defineStore('emoji', {
 
     async getAdminPacksLocal(refresh) {
       if (!refresh && this.adminPacksLocal) return this.adminPacksLocal
-      const backendInteractor = window.vuex.state.api.backendInteractor
-      const listFunction = backendInteractor.listEmojiPacks
-
       this.adminPacksLocalLoading = true
       this.adminPacksLocal = await this.getAdminPacks(
         useInstanceStore().server,
-        listFunction,
+        () =>
+          listEmojiPacks({
+            credentials: useCredentialsStore().current,
+          }),
       )
       this.adminPacksLocalLoading = false
     },

src/stores/lists.js

@@ -1,8 +1,23 @@
 import { find, remove } from 'lodash'
 import { defineStore } from 'pinia'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import {
+  addAccountsToList,
+  createList,
+  deleteList,
+  fetchLists,
+  getList,
+  getListAccounts,
+  removeAccountsFromList,
+  updateList,
+} from 'src/services/api/api.service.js'
+import { promiseInterval } from 'src/services/promise_interval/promise_interval.js'
+
 export const useListsStore = defineStore('lists', {
   state: () => ({
+    fetcher: null,
     allLists: [],
     allListsObject: {},
   }),
@@ -18,34 +33,58 @@ export const useListsStore = defineStore('lists', {
     },
   },
   actions: {
+    startFetching() {
+      promiseInterval(() => {
+        this.fetcher = fetchLists({
+          credentials: useCredentialsStore().current,
+        })
+          .then(
+            (lists) => this.setLists(lists),
+            (rej) => console.error(rej),
+          )
+          .catch((e) => {
+            console.error(e)
+          })
+      }, 240000)
+    },
+    stopFetching() {
+      this.fetcher?.stop()
+    },
     setLists(value) {
       this.allLists = value
     },
     createList({ title }) {
-      return window.vuex.state.api.backendInteractor
-        .createList({ title })
-        .then((list) => {
-          this.setList({ listId: list.id, title })
-          return list
-        })
+      return createList({
+        title,
+        credentials: useCredentialsStore().current,
+      }).then((list) => {
+        this.setList({ listId: list.id, title })
+        return list
+      })
     },
     fetchList({ listId }) {
-      return window.vuex.state.api.backendInteractor
-        .getList({ listId })
-        .then((list) => this.setList({ listId: list.id, title: list.title }))
+      return getList({
+        listId,
+        credentials: useCredentialsStore().current,
+      }).then((list) => this.setList({ listId: list.id, title: list.title }))
     },
     fetchListAccounts({ listId }) {
-      return window.vuex.state.api.backendInteractor
-        .getListAccounts({ listId })
-        .then((accountIds) => {
-          if (!this.allListsObject[listId]) {
-            this.allListsObject[listId] = { accountIds: [] }
-          }
-          this.allListsObject[listId].accountIds = accountIds
-        })
+      return getListAccounts({
+        listId,
+        credentials: useCredentialsStore().current,
+      }).then((accountIds) => {
+        if (!this.allListsObject[listId]) {
+          this.allListsObject[listId] = { accountIds: [] }
+        }
+        this.allListsObject[listId].accountIds = accountIds
+      })
     },
     setList({ listId, title }) {
-      window.vuex.state.api.backendInteractor.updateList({ listId, title })
+      updateList({
+        listId,
+        title,
+        credentials: useCredentialsStore().current,
+      })
 
       if (!this.allListsObject[listId]) {
         this.allListsObject[listId] = { accountIds: [] }
@@ -68,46 +107,55 @@ export const useListsStore = defineStore('lists', {
       }
       this.allListsObject[listId].accountIds = accountIds
       if (added.length > 0) {
-        window.vuex.state.api.backendInteractor.addAccountsToList({
+        addAccountsToList({
           listId,
           accountIds: added,
+          credentials: useCredentialsStore().current,
         })
       }
       if (removed.length > 0) {
-        window.vuex.state.api.backendInteractor.removeAccountsFromList({
+        removeAccountsFromList({
           listId,
           accountIds: removed,
+          credentials: useCredentialsStore().current,
         })
       }
     },
     addListAccount({ listId, accountId }) {
-      return window.vuex.state.api.backendInteractor
-        .addAccountsToList({ listId, accountIds: [accountId] })
-        .then((result) => {
-          if (!this.allListsObject[listId]) {
-            this.allListsObject[listId] = { accountIds: [] }
-          }
-          this.allListsObject[listId].accountIds.push(accountId)
-          return result
-        })
+      return addAccountsToList({
+        listId,
+        accountIds: [accountId],
+        credentials: useCredentialsStore().current,
+      }).then((result) => {
+        if (!this.allListsObject[listId]) {
+          this.allListsObject[listId] = { accountIds: [] }
+        }
+        this.allListsObject[listId].accountIds.push(accountId)
+        return result
+      })
     },
     removeListAccount({ listId, accountId }) {
-      return window.vuex.state.api.backendInteractor
-        .removeAccountsFromList({ listId, accountIds: [accountId] })
-        .then((result) => {
-          if (!this.allListsObject[listId]) {
-            this.allListsObject[listId] = { accountIds: [] }
-          }
-          const { accountIds } = this.allListsObject[listId]
-          const set = new Set(accountIds)
-          set.delete(accountId)
-          this.allListsObject[listId].accountIds = [...set]
+      return removeAccountsFromList({
+        listId,
+        accountIds: [accountId],
+        credentials: useCredentialsStore().current,
+      }).then((result) => {
+        if (!this.allListsObject[listId]) {
+          this.allListsObject[listId] = { accountIds: [] }
+        }
+        const { accountIds } = this.allListsObject[listId]
+        const set = new Set(accountIds)
+        set.delete(accountId)
+        this.allListsObject[listId].accountIds = [...set]
 
-          return result
-        })
+        return result
+      })
     },
     deleteList({ listId }) {
-      window.vuex.state.api.backendInteractor.deleteList({ listId })
+      deleteList({
+        listId,
+        credentials: useCredentialsStore().current,
+      })
 
       delete this.allListsObject[listId]
       remove(this.allLists, (list) => list.id === listId)

src/stores/oauth_tokens.js

@@ -1,25 +1,33 @@
 import { defineStore } from 'pinia'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import {
+  fetchOAuthTokens,
+  revokeOAuthToken,
+} from 'src/services/api/api.service.js'
+
 export const useOAuthTokensStore = defineStore('oauthTokens', {
   state: () => ({
     tokens: [],
   }),
   actions: {
     fetchTokens() {
-      window.vuex.state.api.backendInteractor
-        .fetchOAuthTokens()
-        .then((tokens) => {
-          this.swapTokens(tokens)
-        })
+      fetchOAuthTokens({
+        credentials: useCredentialsStore().current,
+      }).then((tokens) => {
+        this.swapTokens(tokens)
+      })
     },
     revokeToken(id) {
-      window.vuex.state.api.backendInteractor
-        .revokeOAuthToken({ id })
-        .then((response) => {
-          if (response.status === 201) {
-            this.swapTokens(this.tokens.filter((token) => token.id !== id))
-          }
-        })
+      revokeOAuthToken({
+        id,
+        credentials: useCredentialsStore().current,
+      }).then((response) => {
+        if (response.status === 201) {
+          this.swapTokens(this.tokens.filter((token) => token.id !== id))
+        }
+      })
     },
     swapTokens(tokens) {
       this.tokens = tokens

src/stores/polls.js

@@ -1,6 +1,10 @@
 import { merge } from 'lodash'
 import { defineStore } from 'pinia'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
+import { fetchPoll, vote } from 'src/services/api/api.service.js'
+
 export const usePollsStore = defineStore('polls', {
   state: () => ({
     // Contains key = id, value = number of trackers for this poll
@@ -19,16 +23,17 @@ export const usePollsStore = defineStore('polls', {
       }
     },
     updateTrackedPoll(pollId) {
-      window.vuex.state.api.backendInteractor
-        .fetchPoll({ pollId })
-        .then((poll) => {
-          setTimeout(() => {
-            if (this.trackedPolls[pollId]) {
-              this.updateTrackedPoll(pollId)
-            }
-          }, 30 * 1000)
-          this.mergeOrAddPoll(poll)
-        })
+      fetchPoll({
+        pollId,
+        credentials: useCredentialsStore().current,
+      }).then((poll) => {
+        setTimeout(() => {
+          if (this.trackedPolls[pollId]) {
+            this.updateTrackedPoll(pollId)
+          }
+        }, 30 * 1000)
+        this.mergeOrAddPoll(poll)
+      })
     },
     trackPoll(pollId) {
       if (!this.trackedPolls[pollId]) {
@@ -50,12 +55,14 @@ export const usePollsStore = defineStore('polls', {
       }
     },
     votePoll({ pollId, choices }) {
-      return window.vuex.state.api.backendInteractor
-        .vote({ pollId, choices })
-        .then((poll) => {
-          this.mergeOrAddPoll(poll)
-          return poll
-        })
+      return vote({
+        pollId,
+        choices,
+        credentials: useCredentialsStore().current,
+      }).then((poll) => {
+        this.mergeOrAddPoll(poll)
+        return poll
+      })
     },
   },
 })

src/stores/sync_config.js

@@ -20,6 +20,7 @@ import { toRaw } from 'vue'
 
 import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useLocalConfigStore } from 'src/stores/local_config.js'
 
@@ -31,6 +32,7 @@ import {
   validateSetting,
 } from 'src/modules/default_config_state.js'
 import { oldDefaultConfigSync } from 'src/modules/old_default_config_state.js'
+import { updateProfileJSON } from 'src/services/api/api.service.js'
 
 export const VERSION = 2
 export const NEW_USER_DATE = new Date('2026-03-16') // date of writing this, basically
@@ -789,7 +791,10 @@ export const useSyncConfigStore = defineStore('sync_config', {
       if (!needPush) return
       this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
-      window.vuex.state.api.backendInteractor.updateProfileJSON({ params })
+      updateProfileJSON({
+        params,
+        credentials: useCredentialsStore().current,
+      })
     },
   },
   persist: {

src/stores/user_highlight.js

@@ -14,7 +14,10 @@ import {
 import { defineStore } from 'pinia'
 import { toRaw } from 'vue'
 
+import { useCredentialsStore } from 'src/stores/credentials.js'
+
 import { storage } from 'src/lib/storage.js'
+import { updateProfileJSON } from 'src/services/api/api.service.js'
 
 export const NEW_USER_DATE = new Date('2022-08-04') // date of writing this, basically
 
@@ -344,12 +347,13 @@ export const useUserHighlightStore = defineStore('user_highlight', {
       const params = {
         pleroma_settings_store: { user_highlight: this.cache },
       }
-      window.vuex.state.api.backendInteractor
-        .updateProfileJSON({ params })
-        .then((user) => {
-          this.initUserHighlight(user)
-          this.dirty = false
-        })
+      updateProfileJSON({
+        params,
+        credentials: useCredentialsStore().current,
+      }).then((user) => {
+        this.initUserHighlight(user)
+        this.dirty = false
+      })
     },
   },
   persist: {