wip

src/components/notification/notification.vue

@@ -185,7 +185,7 @@
         </div>
         <Report
           v-else-if="notification.type === 'pleroma:report'"
-          :report="notification.report"
+          :report-id="notification.report.id"
         />
         <template v-else>
           <status-content

src/components/report/report.js

@@ -4,18 +4,23 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 
 const Report = {
   props: [
-    'report'
+    'reportId'
   ],
   components: {
     StatusContent,
     Timeago
   },
+  computed: {
+    report () {
+      return this.$store.state.reports.reports[this.reportId] || {}
+    }
+  },
   methods: {
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
     setReportState (id, state) {
-      return this.$store.state.api.backendInteractor.setReportState({ id, state })
+      return this.$store.dispatch('setReportState', { id, state })
     }
   }
 }

src/components/report/report.vue

 <template>
   <div class="Report">
+    <div class="report-state">
+      <label
+        for="report-state"
+        class="select"
+      >
+        <select
+          id="report-state"
+          v-model="report.state"
+          class="form-control"
+        >
+          <option
+            v-for="state in ['open', 'closed', 'resolved']"
+            :key="state"
+            :value="report.state"
+          >
+            {{ $t('report.state_' + state) }}
+          </option>
+        </select>
+        <FAIcon
+          class="select-down-icon"
+          icon="chevron-down"
+        />
+      </label>
+    </div>
     <div class="reported-user">
       <span>{{ $t('report.reported_user') }}</span>
       <router-link :to="generateUserProfileLink(report.acct)">

src/modules/reports.js

+import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import filter from 'lodash/filter'
 
 const reports = {
   state: {
-    userId: null,
-    statuses: [],
-    preTickedIds: [],
-    modalActivated: false
+    reportModal: {
+      userId: null,
+      statuses: [],
+      preTickedIds: [],
+      activated: false
+    },
+    reports: {}
   },
   mutations: {
     openUserReportingModal (state, { userId, statuses, preTickedIds }) {
-      state.userId = userId
-      state.statuses = statuses
-      state.preTickedIds = preTickedIds
-      state.modalActivated = true
+      state.reportModal.userId = userId
+      state.reportModal.statuses = statuses
+      state.reportModal.preTickedIds = preTickedIds
+      state.reportModal.activated = true
     },
     closeUserReportingModal (state) {
-      state.modalActivated = false
+      state.reportModal.modalActivated = false
+    },
+    setReportState (reportsState, { id, state }) {
+      reportsState.reports[id].state = state
+    },
+    addReport (state, report) {
+      state.reports[report.id] = report
     }
   },
   actions: {
@@ -31,6 +41,19 @@ const reports = {
     },
     closeUserReportingModal ({ commit }) {
       commit('closeUserReportingModal')
+    },
+    setReportState ({ commit, rootState }, { id, state }) {
+      const oldState = rootState.reports.reports[id].state
+      commit('setReportState', { id, state })
+      backendInteractorService.setReportState({ id, state }).then(report => {
+        console.log(report)
+      }).catch(e => {
+        console.error('Failed to set report state', e)
+        commit('setReportState', { id, oldState })
+      })
+    },
+    addReport ({ commit }, report) {
+      commit('addReport', report)
     }
   }
 }

src/modules/statuses.js

@@ -317,6 +317,10 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
       notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
     }
 
+    if (notification.type === 'pleroma:report') {
+      dispatch('addReport', notification.report)
+    }
+
     if (notification.type === 'pleroma:emoji_reaction') {
       dispatch('fetchEmojiReactionsBy', notification.status.id)
     }