2 files changed, 31 insertions, 2 deletions
diff --git a/src/components/report/report.js b/src/components/report/report.js
index e81417a8..8131dd89 100644
--- a/src/components/report/report.js
+++ b/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 })
     }
   }
 }
diff --git a/src/components/report/report.vue b/src/components/report/report.vue
index 20fe1bfe..638a3aa0 100644
--- a/src/components/report/report.vue
+++ b/src/components/report/report.vue
@@ -1,5 +1,29 @@
 <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)">