Move editStatus module to store

src/components/edit_status_modal/edit_status_modal.js

@@ -2,6 +2,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import Modal from '../modal/modal.vue'
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 import get from 'lodash/get'
+import { useEditStatusStore } from '../../stores/editStatus'
 
 const EditStatusModal = {
   components: {
@@ -18,13 +19,13 @@ const EditStatusModal = {
       return !!this.$store.state.users.currentUser
     },
     modalActivated () {
-      return this.$store.state.editStatus.modalActivated
+      return useEditStatusStore().modalActivated
     },
     isFormVisible () {
       return this.isLoggedIn && !this.resettingForm && this.modalActivated
     },
     params () {
-      return this.$store.state.editStatus.params || {}
+      return useEditStatusStore().params || {}
     }
   },
   watch: {
@@ -46,7 +47,7 @@ const EditStatusModal = {
     doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
       const params = {
         store: this.$store,
-        statusId: this.$store.state.editStatus.params.statusId,
+        statusId: useEditStatusStore().params.statusId,
         status,
         spoilerText,
         sensitive,
@@ -67,7 +68,7 @@ const EditStatusModal = {
         })
     },
     closeModal () {
-      this.$store.dispatch('closeEditStatusModal')
+      useEditStatusStore().closeEditStatusModal()
     }
   }
 }

src/components/extra_buttons/extra_buttons.js

@@ -16,6 +16,7 @@ import {
   faBookmark as faBookmarkReg,
   faFlag
 } from '@fortawesome/free-regular-svg-icons'
+import { useEditStatusStore } from '../../stores/editStatus'
 
 library.add(
   faEllipsisH,
@@ -107,7 +108,7 @@ const ExtraButtons = {
     },
     editStatus () {
       this.$store.dispatch('fetchStatusSource', { id: this.status.id })
-        .then(data => this.$store.dispatch('openEditStatusModal', {
+        .then(data => useEditStatusStore().openEditStatusModal({
           statusId: this.status.id,
           subject: data.spoiler_text,
           statusText: data.text,

src/main.js

@@ -19,7 +19,6 @@ import mediaViewerModule from './modules/media_viewer.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
 import pollsModule from './modules/polls.js'
-import editStatusModule from './modules/editStatus.js'
 import statusHistoryModule from './modules/statusHistory.js'
 
 import chatsModule from './modules/chats.js'
@@ -83,7 +82,6 @@ const persistedStateOptions = {
       oauthTokens: oauthTokensModule,
       reports: reportsModule,
       polls: pollsModule,
-      editStatus: editStatusModule,
       statusHistory: statusHistoryModule,
       chats: chatsModule,
       announcements: announcementsModule

src/modules/editStatus.js

@@ -1,25 +0,0 @@
-const editStatus = {
-  state: {
-    params: null,
-    modalActivated: false
-  },
-  mutations: {
-    openEditStatusModal (state, params) {
-      state.params = params
-      state.modalActivated = true
-    },
-    closeEditStatusModal (state) {
-      state.modalActivated = false
-    }
-  },
-  actions: {
-    openEditStatusModal ({ commit }, params) {
-      commit('openEditStatusModal', params)
-    },
-    closeEditStatusModal ({ commit }) {
-      commit('closeEditStatusModal')
-    }
-  }
-}
-
-export default editStatus

src/stores/editStatus.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+export const useEditStatusStore = defineStore('editStatus', {
+  state: () => ({
+    params: null,
+    modalActivated: false
+  }),
+  actions: {
+    openEditStatusModal (params) {
+      this.params = params
+      this.modalActivated = true
+    },
+    closeEditStatusModal () {
+      this.modalActivated = false
+    }
+  }
+})