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

src/main.js

@@ -15,7 +15,6 @@ import serverSideStorageModule from './modules/serverSideStorage.js'
 import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
-import reportsModule from './modules/reports.js'
 
 import chatsModule from './modules/chats.js'
 
@@ -75,7 +74,6 @@ const persistedStateOptions = {
       oauth: oauthModule,
       authFlow: authFlowModule,
       oauthTokens: oauthTokensModule,
-      reports: reportsModule,
       chats: chatsModule
     },
     plugins,

src/modules/reports.js

@@ -1,65 +0,0 @@
-import filter from 'lodash/filter'
-import { useInterfaceStore } from '../stores/interface'
-
-const reports = {
-  state: {
-    reportModal: {
-      userId: null,
-      statuses: [],
-      preTickedIds: [],
-      activated: false
-    },
-    reports: {}
-  },
-  mutations: {
-    openUserReportingModal (state, { userId, statuses, preTickedIds }) {
-      state.reportModal.userId = userId
-      state.reportModal.statuses = statuses
-      state.reportModal.preTickedIds = preTickedIds
-      state.reportModal.activated = true
-    },
-    closeUserReportingModal (state) {
-      state.reportModal.activated = false
-    },
-    setReportState (reportsState, { id, state }) {
-      reportsState.reports[id].state = state
-    },
-    addReport (state, report) {
-      state.reports[report.id] = report
-    }
-  },
-  actions: {
-    openUserReportingModal ({ rootState, commit }, { userId, statusIds = [] }) {
-      const preTickedStatuses = statusIds.map(id => rootState.statuses.allStatusesObject[id])
-      const preTickedIds = statusIds
-      const statuses = preTickedStatuses.concat(
-        filter(rootState.statuses.allStatuses,
-          status => status.user.id === userId && !preTickedIds.includes(status.id)
-        )
-      )
-      commit('openUserReportingModal', { userId, statuses, preTickedIds })
-    },
-    closeUserReportingModal ({ commit }) {
-      commit('closeUserReportingModal')
-    },
-    setReportState ({ commit, dispatch, rootState }, { id, state }) {
-      const oldState = rootState.reports.reports[id].state
-      commit('setReportState', { id, state })
-      rootState.api.backendInteractor.setReportState({ id, state }).catch(e => {
-        console.error('Failed to set report state', e)
-        useInterfaceStore().pushGlobalNotice({
-          level: 'error',
-          messageKey: 'general.generic_error_message',
-          messageArgs: [e.message],
-          timeout: 5000
-        })
-        commit('setReportState', { id, state: oldState })
-      })
-    },
-    addReport ({ commit }, report) {
-      commit('addReport', report)
-    }
-  }
-}
-
-export default reports

src/modules/statuses.js

@@ -18,6 +18,7 @@ import {
   maybeShowNotification
 } from '../services/notification_utils/notification_utils.js'
 import apiService from '../services/api/api.service.js'
+import { useReportsStore } from '../stores/reports.js'
 
 const emptyTl = (userId = 0) => ({
   statuses: [],
@@ -341,7 +342,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
     }
 
     if (notification.type === 'pleroma:report') {
-      dispatch('addReport', notification.report)
+      useReportsStore().addReport(notification.report)
     }
 
     if (notification.type === 'pleroma:emoji_reaction') {

src/stores/reports.js

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+
+import filter from 'lodash/filter'
+import { useInterfaceStore } from '../stores/interface'
+
+export const useReportsStore = defineStore('reports', {
+  state: () => ({
+    reportModal: {
+      userId: null,
+      statuses: [],
+      preTickedIds: [],
+      activated: false
+    },
+    reports: {}
+  }),
+  actions: {
+    openUserReportingModal ({ userId, statusIds = [] }) {
+      const preTickedStatuses = statusIds.map(id => window.vuex.state.statuses.allStatusesObject[id])
+      const preTickedIds = statusIds
+      const statuses = preTickedStatuses.concat(
+        filter(window.vuex.state.statuses.allStatuses,
+          status => status.user.id === userId && !preTickedIds.includes(status.id)
+        )
+      )
+
+      this.reportModal.userId = userId
+      this.reportModal.statuses = statuses
+      this.reportModal.preTickedIds = preTickedIds
+      this.reportModal.activated = true
+    },
+    closeUserReportingModal () {
+      this.reportModal.activated = false
+    },
+    setReportState ({ id, state }) {
+      const oldState = window.vuex.state.reports.reports[id].state
+      this.reports[id].state = state
+      window.vuex.state.api.backendInteractor.setReportState({ id, state }).catch(e => {
+        console.error('Failed to set report state', e)
+        useInterfaceStore().pushGlobalNotice({
+          level: 'error',
+          messageKey: 'general.generic_error_message',
+          messageArgs: [e.message],
+          timeout: 5000
+        })
+        this.reports[id].state = oldState
+      })
+    },
+    addReport (report) {
+      this.reports[report.id] = report
+    }
+  }
+})