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

@@ -1,29 +1,5 @@
 <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)">
@@ -38,7 +14,28 @@
     </div>
     <div class="report-state">
       <span>{{ $t('report.state') }}</span>
-      <b>{{ $t('report.state_' + report.state) }}</b>
+      <label
+        for="report-state"
+        class="select"
+      >
+        <select
+          id="report-state"
+          v-model="state"
+          class="form-control"
+        >
+          <option
+            v-for="state in ['open', 'closed', 'resolved']"
+            :key="state"
+            :value="state"
+          >
+            {{ $t('report.state_' + state) }}
+          </option>
+        </select>
+        <FAIcon
+          class="select-down-icon"
+          icon="chevron-down"
+        />
+      </label>
     </div>
     <!-- eslint-disable vue/no-v-html -->
     <div

src/modules/reports.js

@@ -1,4 +1,3 @@
-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) {