Move reports module to store

src/components/account_actions/account_actions.js

@@ -7,6 +7,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
 } from '@fortawesome/free-solid-svg-icons'
+import { useReportsStore } from '../../stores/reports'
 
 library.add(
   faEllipsisV
@@ -73,7 +74,7 @@ const AccountActions = {
       this.hideConfirmRemoveUserFromFollowers()
     },
     reportUser () {
-      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
+      useReportsStore().openUserReportingModal({ userId: this.user.id })
     },
     openChat () {
       this.$router.push({

src/components/extra_buttons/extra_buttons.js

@@ -18,6 +18,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons'
 import { useEditStatusStore } from '../../stores/editStatus'
 import { useStatusHistoryStore } from '../../stores/statusHistory'
+import { useReportsStore } from '../../stores/reports'
 
 library.add(
   faEllipsisH,
@@ -105,7 +106,7 @@ const ExtraButtons = {
         .catch(err => this.$emit('onError', err.error.error))
     },
     reportStatus () {
-      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
+      useReportsStore().openUserReportingModal({ userId: this.status.user.id, statusIds: [this.status.id] })
     },
     editStatus () {
       this.$store.dispatch('fetchStatusSource', { id: this.status.id })

src/components/report/report.js

@@ -1,3 +1,4 @@
+import { useReportsStore } from '../../stores/reports'
 import Select from '../select/select.vue'
 import StatusContent from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'
@@ -14,7 +15,7 @@ const Report = {
   },
   computed: {
     report () {
-      return this.$store.state.reports.reports[this.reportId] || {}
+      return useReportsStore().reports[this.reportId] || {}
     },
     state: {
       get: function () { return this.report.state },
@@ -26,7 +27,7 @@ const Report = {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
     setReportState (state) {
-      return this.$store.dispatch('setReportState', { id: this.report.id, state })
+      return useReportsStore().setReportState({ id: this.report.id, state })
     }
   }
 }

src/components/user_reporting_modal/user_reporting_modal.js

@@ -3,6 +3,7 @@ import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import Modal from '../modal/modal.vue'
 import UserLink from '../user_link/user_link.vue'
+import { useReportsStore } from '../../stores/reports'
 
 const UserReportingModal = {
   components: {
@@ -23,7 +24,7 @@ const UserReportingModal = {
   },
   computed: {
     reportModal () {
-      return this.$store.state.reports.reportModal
+      return useReportsStore().reportModal
     },
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
@@ -63,7 +64,7 @@ const UserReportingModal = {
       this.error = false
     },
     closeModal () {
-      this.$store.dispatch('closeUserReportingModal')
+      useReportsStore().closeUserReportingModal()
     },
     reportUser () {
       this.processing = true