fix reporting modal

src/components/list/list.js

@@ -20,6 +20,10 @@ const List = {
       type: Function,
       default: () => '',
     },
+    preSelect: {
+      type: Array,
+      default: [],
+    },
     nonInteractive: {
       type: Boolean,
       default: false,
@@ -44,7 +48,7 @@ const List = {
   data() {
     return {
       items: [],
-      selected: new Set([]),
+      selected: new Set(this.preSelect),
       loading: false,
       bottomedOut: true,
       error: null,

src/components/settings_modal/admin_tabs/users_tab.js

@@ -108,12 +108,11 @@ const UsersTab = {
           ...this.fetchOptions,
           page,
         })
-        .then(({ count, users }) => ({ count, items: users }))
     },
   },
   watch: {
     fetchOptions() {
-      this.$refs.usersList.reset()
+      this.$refs.usersList?.reset()
     },
   },
 }

src/components/status_action_buttons/buttons_definitions.js

@@ -299,10 +299,12 @@ export const BUTTONS = [
     label: 'user_card.report',
     if: ({ loggedIn }) => loggedIn,
     action({ status }) {
-      return useReportsStore().openUserReportingModal({
+      useReportsStore().openUserReportingModal({
         userId: status.user.id,
         statusIds: [status.id],
       })
+
+      return Promise.resolve()
     },
   },
 ].map((button) => {

src/components/user_reporting_modal/user_reporting_modal.js

@@ -1,3 +1,5 @@
+import { mapState } from 'pinia'
+
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import List from 'src/components/list/list.vue'
 import Modal from 'src/components/modal/modal.vue'
@@ -16,19 +18,17 @@ const UserReportingModal = {
     return {
       comment: '',
       forward: false,
-      statusIdsToReport: [],
+      statusIdsToReport: new Set(),
       processing: false,
       error: false,
     }
   },
   computed: {
-    reportModal() {
-      return useReportsStore().reportModal
-    },
     isLoggedIn() {
       return !!this.$store.state.users.currentUser
     },
     isOpen() {
+      console.log(this.reportModal)
       return this.isLoggedIn && this.reportModal.activated
     },
     userId() {
@@ -43,31 +43,26 @@ const UserReportingModal = {
         this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
       )
     },
-    statuses() {
+    ...mapState(useReportsStore, ['reportModal']),
-      return this.reportModal.statuses
-    },
-    preTickedIds() {
-      return this.reportModal.preTickedIds
-    },
   },
   watch: {
     userId: 'resetState',
-    preTickedIds(newValue) {
-      this.statusIdsToReport = newValue
-    },
   },
   methods: {
     resetState() {
       // Reset state
       this.comment = ''
       this.forward = false
-      this.statusIdsToReport = this.preTickedIds
+      this.statusIdsToReport = new Set(this.reportModal.preTickedIds)
       this.processing = false
       this.error = false
     },
     closeModal() {
       useReportsStore().closeUserReportingModal()
     },
+    onListSelect(selected) {
+      this.statusIdsToReport = selected
+    },
     reportUser() {
       this.processing = true
       this.error = false
@@ -75,7 +70,7 @@ const UserReportingModal = {
         userId: this.userId,
         comment: this.comment,
         forward: this.forward,
-        statusIds: this.statusIdsToReport,
+        statusIds: [...this.statusIdsToReport],
       }
       this.$store.state.api.backendInteractor
         .reportUser({ ...params })
@@ -92,23 +87,6 @@ const UserReportingModal = {
     clearError() {
       this.error = false
     },
-    isChecked(statusId) {
-      return this.statusIdsToReport.indexOf(statusId) !== -1
-    },
-    toggleStatus(checked, statusId) {
-      if (checked === this.isChecked(statusId)) {
-        return
-      }
-
-      if (checked) {
-        this.statusIdsToReport.push(statusId)
-      } else {
-        this.statusIdsToReport.splice(
-          this.statusIdsToReport.indexOf(statusId),
-          1,
-        )
-      }
-    },
     resize(e) {
       const target = e.target || e
       if (!(target instanceof window.Element)) {

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -52,8 +52,10 @@
         </div>
         <div class="user-reporting-panel-right">
           <List
-            :external-items="statuses"
+            :external-items="reportModal.statuses"
+            :pre-select="reportModal.preTickedIds"
             selectable
+            @select="onListSelect"
           >
             <template #item="{item}">
               <Status

src/stores/admin_settings.js

@@ -307,8 +307,12 @@ export const useAdminSettingsStore = defineStore('adminSettings', {
           opts,
         })
 
+      const statuses = activities.map(parseStatus)
+
+      await window.vuex.dispatch('addNewStatuses', { statuses })
+
       return {
-        items: activities.map(parseStatus),
+        items: statuses,
         count: total,
       }
     },
@@ -318,10 +322,7 @@ export const useAdminSettingsStore = defineStore('adminSettings', {
       })
       const status = parseStatus(raw)
 
-      await window.vuex.dispatch('addNewStatuses', {
+      await window.vuex.dispatch('addNewStatuses', { statuses: [status] })
-        statuses: [status],
-        userId: false,
-      })
     },
 
     // Users stuff

src/stores/reports.js

@@ -15,10 +15,12 @@ export const useReportsStore = defineStore('reports', {
   }),
   actions: {
     openUserReportingModal({ userId, statusIds = [] }) {
+      console.log('ASS')
       const preTickedStatuses = statusIds.map(
         (id) => window.vuex.state.statuses.allStatusesObject[id],
       )
       const preTickedIds = statusIds
+      console.log(preTickedStatuses)
       const statuses = preTickedStatuses.concat(
         filter(
           window.vuex.state.statuses.allStatuses,