Migrate oauth tokens module to pinia store

src/components/settings_modal/tabs/data_import_export_tab.js

@@ -2,6 +2,7 @@ import Importer from 'src/components/importer/importer.vue'
 import Exporter from 'src/components/exporter/exporter.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { mapState } from 'vuex'
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 
 const DataImportExportTab = {
   data () {
@@ -15,7 +16,7 @@ const DataImportExportTab = {
     }
   },
   created () {
-    this.$store.dispatch('fetchTokens')
+    useOAuthTokensStore().fetchTokens()
     this.fetchBackups()
   },
   components: {

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -11,6 +11,7 @@ import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
 import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 
 const BlockList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
@@ -39,7 +40,7 @@ const MutesAndBlocks = {
     }
   },
   created () {
-    this.$store.dispatch('fetchTokens')
+    useOAuthTokensStore().fetchTokens()
     this.$store.dispatch('getKnownDomains')
   },
   components: {

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

@@ -2,6 +2,7 @@ import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Mfa from './mfa.vue'
 import localeService from 'src/services/locale/locale.service.js'
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 
 const SecurityTab = {
   data () {
@@ -28,7 +29,7 @@ const SecurityTab = {
     }
   },
   created () {
-    this.$store.dispatch('fetchTokens')
+    useOAuthTokensStore().fetchTokens()
     this.fetchAliases()
   },
   components: {
@@ -44,7 +45,7 @@ const SecurityTab = {
       return this.$store.state.instance.pleromaBackend
     },
     oauthTokens () {
-      return this.$store.state.oauthTokens.tokens.map(oauthToken => {
+      return useOAuthTokensStore().tokens.map(oauthToken => {
         return {
           id: oauthToken.id,
           appName: oauthToken.app_name,
@@ -151,7 +152,7 @@ const SecurityTab = {
     },
     revokeToken (id) {
       if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
-        this.$store.dispatch('revokeToken', id)
+        useOAuthTokensStore().revokeToken(id)
       }
     }
   }

src/modules/index.js

@@ -7,7 +7,6 @@ import config from './config.js'
 import profileConfig from './profileConfig.js'
 import adminSettings from './adminSettings.js'
 import authFlow from './auth_flow.js'
-import oauthTokens from './oauth_tokens.js'
 import drafts from './drafts.js'
 import chats from './chats.js'
 
@@ -21,7 +20,6 @@ export default {
   profileConfig,
   adminSettings,
   authFlow,
-  oauthTokens,
   drafts,
   chats
 }

src/modules/oauth_tokens.js

@@ -1,26 +0,0 @@
-const oauthTokens = {
-  state: {
-    tokens: []
-  },
-  actions: {
-    fetchTokens ({ rootState, commit }) {
-      rootState.api.backendInteractor.fetchOAuthTokens().then((tokens) => {
-        commit('swapTokens', tokens)
-      })
-    },
-    revokeToken ({ rootState, commit, state }, id) {
-      rootState.api.backendInteractor.revokeOAuthToken({ id }).then((response) => {
-        if (response.status === 201) {
-          commit('swapTokens', state.tokens.filter(token => token.id !== id))
-        }
-      })
-    }
-  },
-  mutations: {
-    swapTokens (state, tokens) {
-      state.tokens = tokens
-    }
-  }
-}
-
-export default oauthTokens

src/stores/oauth_tokens.js

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+
+export const useOAuthTokensStore = defineStore('oauthTokens', {
+  state: () => ({
+    tokens: []
+  }),
+  actions: {
+    fetchTokens () {
+      window.vuex.state.api.backendInteractor.fetchOAuthTokens().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))
+        }
+      })
+    },
+    swapTokens (tokens) {
+      this.tokens = tokens
+    }
+  }
+});