Add report button to status ellipsis menu

CHANGELOG.md

@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 
 ## [Unreleased]
+### Added
+- Added Report button to status ellipsis menu for easier reporting
+
 ### Fixed
 - Follows/Followers tabs on user profiles now display the content properly.
 - Handle punycode in screen names

src/components/account_actions/account_actions.js

@@ -35,7 +35,7 @@ const AccountActions = {
       this.$store.dispatch('unblockUser', this.user.id)
     },
     reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
+      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
     },
     openChat () {
       this.$router.push({

src/components/extra_buttons/extra_buttons.js

@@ -9,7 +9,8 @@ import {
   faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg
+  faBookmark as faBookmarkReg,
+  faFlag
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
@@ -19,7 +20,8 @@ library.add(
   faEyeSlash,
   faThumbtack,
   faShareAlt,
-  faExternalLinkAlt
+  faExternalLinkAlt,
+  faFlag
 )
 
 const ExtraButtons = {
@@ -66,6 +68,9 @@ const ExtraButtons = {
       this.$store.dispatch('unbookmark', { id: this.status.id })
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
+    },
+    reportStatus () {
+      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
     }
   },
   computed: {

src/components/extra_buttons/extra_buttons.vue

@@ -109,6 +109,16 @@
             icon="external-link-alt"
           /><span>{{ $t("status.external_source") }}</span>
         </a>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click.prevent="reportStatus"
+          @click="close"
+        >
+          <FAIcon
+            fixed-width
+            :icon="['far', 'flag']"
+          /><span>{{ $t("user_card.report") }}</span>
+        </button>
       </div>
     </div>
     <span

src/components/user_reporting_modal/user_reporting_modal.js

@@ -48,7 +48,7 @@ const UserReportingModal = {
       // Reset state
       this.comment = ''
       this.forward = false
-      this.statusIdsToReport = []
+      this.statusIdsToReport = this.$store.state.reports.preTickedIds
       this.processing = false
       this.error = false
     },

src/modules/reports.js

@@ -4,12 +4,14 @@ const reports = {
   state: {
     userId: null,
     statuses: [],
+    preTicked: [],
     modalActivated: false
   },
   mutations: {
-    openUserReportingModal (state, { userId, statuses }) {
+    openUserReportingModal (state, { userId, statuses, preTickedIds }) {
       state.userId = userId
       state.statuses = statuses
+      state.preTickedIds = preTickedIds
       state.modalActivated = true
     },
     closeUserReportingModal (state) {
@@ -17,9 +19,15 @@ const reports = {
     }
   },
   actions: {
-    openUserReportingModal ({ rootState, commit }, userId) {
-      const statuses = filter(rootState.statuses.allStatuses, status => status.user.id === userId)
-      commit('openUserReportingModal', { userId, statuses })
+    openUserReportingModal ({ rootState, commit }, { userId, statusIds = [] }) {
+      const preTickedStatuses = statusIds.map(id => rootState.statuses.allStatusesObject[id])
+      const preTickedIds = statusIds
+      const statuses = preTickedStatuses.concat(
+        filter(rootState.statuses.allStatuses,
+          status => status.user.id === userId && !preTickedIds.includes(status.id)
+        )
+      )
+      commit('openUserReportingModal', { userId, statuses, preTickedIds })
     },
     closeUserReportingModal ({ commit }) {
       commit('closeUserReportingModal')

src/services/entity_normalizer/entity_normalizer.service.js

@@ -201,7 +201,6 @@ export const parseUser = (data) => {
   // Convert punycode to unicode
   if (output.screen_name.includes('@')) {
     const parts = output.screen_name.split('@')
-    console.log(parts)
     let unicodeDomain = punycode.toUnicode(parts[1])
     if (unicodeDomain !== parts[1]) {
       // Add some identifier so users can potentially spot spoofing attempts: