add proper state switcher

src/components/report/report.js

@@ -13,14 +13,19 @@ const Report = {
   computed: {
     report () {
       return this.$store.state.reports.reports[this.reportId] || {}
+    },
+    state: {
+      get: function () { return this.report.state },
+      set: function (val) { this.setReportState(val) }
     }
   },
   methods: {
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
-    setReportState (id, state) {
-      return this.$store.dispatch('setReportState', { id, state })
+    setReportState (state) {
+      console.log('setting state', state)
+      return this.$store.dispatch('setReportState', { id: this.report.id, state })
     }
   }
 }

src/components/report/report.scss

@@ -2,7 +2,11 @@
 
 .Report {
   .report-content {
-    margin: 0.5em 0;
+    margin: 0.5em 0 1em;
+  }
+
+  .report-state {
+    margin: 0.5em 0 1em;
   }
 
   .reported-status {

src/components/report/report.vue

 <template>
   <div class="Report">
+    <div class="reported-user">
+      <span>{{ $t('report.reported_user') }}</span>
+      <router-link :to="generateUserProfileLink(report.acct)">
+        @{{ report.acct.screen_name }}
+      </router-link>
+    </div>
+    <div class="reporter">
+      <span>{{ $t('report.reporter') }}</span>
+      <router-link :to="generateUserProfileLink(report.actor)">
+        @{{ report.actor.screen_name }}
+      </router-link>
+    </div>
     <div class="report-state">
+      <span>{{ $t('report.state') }}</span>
       <label
         for="report-state"
         class="select"
       >
         <select
           id="report-state"
-          v-model="report.state"
+          v-model="state"
           class="form-control"
         >
           <option
             v-for="state in ['open', 'closed', 'resolved']"
             :key="state"
-            :value="report.state"
+            :value="state"
           >
             {{ $t('report.state_' + state) }}
           </option>
@@ -24,22 +37,6 @@
         />
       </label>
     </div>
-    <div class="reported-user">
-      <span>{{ $t('report.reported_user') }}</span>
-      <router-link :to="generateUserProfileLink(report.acct)">
-        @{{ report.acct.screen_name }}
-      </router-link>
-    </div>
-    <div class="reporter">
-      <span>{{ $t('report.reporter') }}</span>
-      <router-link :to="generateUserProfileLink(report.actor)">
-        @{{ report.actor.screen_name }}
-      </router-link>
-    </div>
-    <div class="report-state">
-      <span>{{ $t('report.state') }}</span>
-      <b>{{ $t('report.state_' + report.state) }}</b>
-    </div>
     <!-- eslint-disable vue/no-v-html -->
     <div
       class="report-content"

src/modules/reports.js

-import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import filter from 'lodash/filter'
 
 const reports = {
@@ -44,12 +43,14 @@ const reports = {
     },
     setReportState ({ commit, rootState }, { id, state }) {
       const oldState = rootState.reports.reports[id].state
+      console.log(oldState, state)
       commit('setReportState', { id, state })
-      backendInteractorService.setReportState({ id, state }).then(report => {
+      rootState.api.backendInteractor.setReportState({ id, state }).then(report => {
         console.log(report)
       }).catch(e => {
         console.error('Failed to set report state', e)
-        commit('setReportState', { id, oldState })
+        commit('setReportState', { id, state: oldState })
+        console.log(oldState)
       })
     },
     addReport ({ commit }, report) {