From d5e11e279ff70aab7f82611cdbafec6b6d6c252a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 8 Apr 2020 18:56:01 +0300
Subject: [PATCH] Update displaying accounts in reports and statuses

---
 src/api/__mocks__/reports.js                |  14 +--
 src/components/Status/index.vue             |  21 +++-
 src/views/reports/components/NoteCard.vue   |   2 +-
 src/views/reports/components/Report.vue     |  15 ++-
 src/views/reports/components/ReportCard.vue | 127 --------------------
 src/views/statuses/index.vue                |   1 +
 src/views/users/show.vue                    |   2 +-
 7 files changed, 36 insertions(+), 146 deletions(-)
 delete mode 100644 src/views/reports/components/ReportCard.vue

diff --git a/src/api/__mocks__/reports.js b/src/api/__mocks__/reports.js
index 36fc2008..5c6fe3a1 100644
--- a/src/api/__mocks__/reports.js
+++ b/src/api/__mocks__/reports.js
@@ -1,14 +1,14 @@
 const reports = [
-  { created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame', tags: [] }, actor: { acct: 'admin' }, state: 'open', id: '2', content: 'This is a report', statuses: [] },
-  { created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool', tags: [] }, actor: { acct: 'admin2' }, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '3', content: '', statuses: [] },
-  { created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame', tags: [] }, actor: { acct: 'admin' }, state: 'open', id: '5', content: 'This is a report', statuses: [] },
-  { created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool', tags: [] }, actor: { acct: 'admin2' }, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
+  { created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '2', content: 'This is a report', statuses: [] },
+  { created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
+  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '3', content: '', statuses: [] },
+  { created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '5', content: 'This is a report', statuses: [] },
+  { created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
     { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'public', sensitive: false, id: '11', content: 'Hey!', url: '', created_at: '2019-05-10T21:35:33.000Z' },
     { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'unlisted', sensitive: true, id: '10', content: 'Bye!', url: '', created_at: '2019-05-10T21:00:33.000Z' }
   ] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '6', content: '', statuses: [] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '4', content: '', statuses: [] }
+  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '6', content: '', statuses: [] },
+  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '4', content: '', statuses: [] }
 ]
 
 export async function fetchReports(filter, page, pageSize, authHost, token) {
diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 50fbcfb0..90058332 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -5,13 +5,17 @@
         <div class="status-header">
           <div class="status-account-container">
             <div class="status-account">
-              <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(status.account)"/>
-              <img :src="status.account.avatar" class="status-avatar-img">
-              <h3 class="status-account-name">{{ status.account.display_name }}</h3>
+              <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
+              <img :src="account.avatar" class="status-avatar-img">
+              <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
+                <h3 class="status-account-name">{{ account.display_name }}</h3>
+              </a>
+              <span v-else>
+                <h3 class="status-account-name">{{ account.display_name }}</h3>
+                <h3 class="status-account-name deactivated"> (deactivated)</h3>
+              </span>
             </div>
-            <a :href="status.account.url" target="_blank" class="account">
-              @{{ status.account.acct }}
-            </a>
+
           </div>
           <div class="status-actions">
             <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
@@ -121,6 +125,11 @@ import moment from 'moment'
 export default {
   name: 'Status',
   props: {
+    account: {
+      type: Object,
+      required: false,
+      default: () => { return {} }
+    },
     fetchStatusesByInstance: {
       type: Boolean,
       required: false,
diff --git a/src/views/reports/components/NoteCard.vue b/src/views/reports/components/NoteCard.vue
index 379e752b..79637f16 100644
--- a/src/views/reports/components/NoteCard.vue
+++ b/src/views/reports/components/NoteCard.vue
@@ -8,7 +8,7 @@
             <h3 class="note-actor-name">{{ note.user.display_name }}</h3>
           </div>
           <a :href="note.user.url" target="_blank">
-            @{{ note.user.acct }}
+            @{{ note.user.display_name }}
           </a>
         </div>
         <div>
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 4df72383..b0cb6eb2 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -33,9 +33,13 @@
               :src="report.account.avatar"
               alt="avatar"
               class="avatar-img">
-            <a :href="report.account.url" target="_blank" class="account">
-              <span>{{ report.account.acct }}</span>
+            <a v-if="!report.account.deactivated" :href="report.account.url" target="_blank" class="account">
+              <span>{{ report.account.display_name }}</span>
             </a>
+            <span v-else>
+              {{ report.account.display_name }}
+              <span class="deactivated"> (deactivated)</span>
+            </span>
           </div>
           <div v-if="report.content.length > 0">
             <el-divider class="divider"/>
@@ -51,14 +55,14 @@
               alt="avatar"
               class="avatar-img">
             <a :href="report.actor.url" target="_blank" class="account">
-              <span>{{ report.actor.acct }}</span>
+              <span>{{ report.actor.display_name }}</span>
             </a>
           </div>
           <div v-if="showStatuses(report.statuses)" class="statuses">
             <el-collapse>
               <el-collapse-item :title="getStatusesTitle(report.statuses)">
                 <div v-for="status in report.statuses" :key="status.id">
-                  <status :status="status" :show-checkbox="false" :page="currentPage"/>
+                  <status :status="status" :account="status.account.display_name ? status.account : report.account" :show-checkbox="false" :page="currentPage"/>
                 </div>
               </el-collapse-item>
             </el-collapse>
@@ -183,6 +187,9 @@ export default {
   .divider {
     margin: 15px 0;
   }
+  .deactivated {
+    color: gray;
+  }
   .el-card__body {
     padding: 17px;
   }
diff --git a/src/views/reports/components/ReportCard.vue b/src/views/reports/components/ReportCard.vue
deleted file mode 100644
index 430b58bb..00000000
--- a/src/views/reports/components/ReportCard.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <el-card v-for="report in reports" :key="report.id" class="report-card">
-      <div slot="header">
-        <div class="report-header">
-          <div class="report-actor-container">
-            <div class="report-actor">
-              <img :src="report.actor.avatar" class="report-avatar-img">
-              <h3 class="report-actor-name">{{ report.actor.display_name }}</h3>
-            </div>
-            <a :href="report.actor.url" target="_blank">
-              @{{ report.actor.acct }}
-            </a>
-          </div>
-          <div>
-            <el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
-            <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
-                <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
-                <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </div>
-      </div>
-      <div class="report-body">
-        <span class="report-content" v-html="report.content"/>
-        {{ parseTimestamp(report.created_at) }}
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-
-export default {
-  name: 'Statuses',
-  props: {
-    reports: {
-      type: Array,
-      required: true
-    }
-  },
-  methods: {
-    capitalizeFirstLetter(str) {
-      return str.charAt(0).toUpperCase() + str.slice(1)
-    },
-    changeReportState(state, id) {
-      this.$store.dispatch('ChangeReportState', [{ state, id }])
-    },
-    getStateType(state) {
-      switch (state) {
-        case 'closed':
-          return 'info'
-        case 'resolved':
-          return 'success'
-        default:
-          return 'primary'
-      }
-    },
-    parseTimestamp(timestamp) {
-      return moment(timestamp).format('YYYY-MM-DD HH:mm')
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
-  a {
-    text-decoration: underline;
-  }
-  .el-icon-arrow-right {
-    margin-right: 6px;
-  }
-  .report-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    height: 40px;
-  }
-  .report-actor {
-    display: flex;
-    align-items: center;
-  }
-  .report-actor-name {
-    margin: 0;
-    height: 22px;
-  }
-  .report-avatar-img {
-    width: 15px;
-    height: 15px;
-    margin-right: 5px;
-  }
-  .report-body {
-    display: flex;
-    flex-direction: column;
-  }
-  .report-card {
-    margin-bottom: 15px;
-  }
-  .report-content {
-    font-size: 15px;
-  }
-  .report-header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  @media only screen and (max-width:480px) {
-    .el-card__header {
-      padding: 10px 17px;
-    }
-    .report-header {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      height: auto;
-    }
-    .report-tag {
-      margin: 3px 0 6px;
-    }
-  }
-</style>
diff --git a/src/views/statuses/index.vue b/src/views/statuses/index.vue
index 88bfab6c..fab0c221 100644
--- a/src/views/statuses/index.vue
+++ b/src/views/statuses/index.vue
@@ -40,6 +40,7 @@
     <div v-for="status in statuses" :key="status.id" class="status-container">
       <status
         :status="status"
+        :account="status.account"
         :show-checkbox="isDesktop"
         :fetch-statuses-by-instance="true"
         @status-selection="handleStatusSelection" />
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 23c87247..e6a27458 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -91,7 +91,7 @@
         </el-checkbox>
         <el-timeline v-if="!statusesLoading" class="statuses">
           <el-timeline-item v-for="status in statuses" :key="status.id">
-            <status :status="status" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
+            <status :status="status" :account="status.account" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
           </el-timeline-item>
           <p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
         </el-timeline>