Fix dispatching FetchReports and FetchUserStatuses from status module

src/store/modules/status.js

@@ -2,13 +2,21 @@ import { changeStatusScope, deleteStatus } from '@/api/status'
 
 const status = {
   actions: {
-    async ChangeStatusScope({ dispatch, getters, state }, { statusId, isSensitive, visibility }) {
+    async ChangeStatusScope({ dispatch, getters }, { statusId, isSensitive, visibility, reportCurrentPage, userId, godmode }) {
       await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
-      dispatch('FetchReports', state.currentPage)
+      if (reportCurrentPage !== 0) {
+        dispatch('FetchReports', reportCurrentPage)
+      } else if (userId.length > 0) {
+        dispatch('FetchUserStatuses', { userId, godmode })
+      }
     },
-    async DeleteStatus({ dispatch, getters, state }, { statusId }) {
+    async DeleteStatus({ dispatch, getters }, { statusId, reportCurrentPage, userId, godmode }) {
       await deleteStatus(statusId, getters.authHost, getters.token)
-      dispatch('FetchReports', state.currentPage)
+      if (reportCurrentPage !== 0) {
+        dispatch('FetchReports', reportCurrentPage)
+      } else if (userId.length > 0) {
+        dispatch('FetchUserStatuses', { userId, godmode })
+      }
     }
   }
 }

src/store/modules/userProfile.js

@@ -2,33 +2,42 @@ import { fetchUser, fetchUserStatuses } from '@/api/users'
 
 const userProfile = {
   state: {
+    statuses: [],
+    statusesLoading: true,
     user: {},
-    loading: true,
+    userProfileLoading: true
-    statuses: []
   },
   mutations: {
+    SET_STATUSES: (state, statuses) => {
+      state.statuses = statuses
+    },
+    SET_STATUSES_LOADING: (state, status) => {
+      state.statusesLoading = status
+    },
     SET_USER: (state, user) => {
       state.user = user
     },
-    SET_LOADING: (state, status) => {
+    SET_USER_PROFILE_LOADING: (state, status) => {
-      state.loading = status
+      state.userProfileLoading = status
-    },
-    SET_STATUSES: (state, statuses) => {
-      state.statuses = statuses
     }
   },
   actions: {
-    async FetchData({ commit, getters }, { id, godmode }) {
+    async FetchUserProfile({ commit, dispatch, getters }, { userId, godmode }) {
-      commit('SET_LOADING', true)
+      commit('SET_USER_PROFILE_LOADING', true)
-
-      const [userResponse, statusesResponse] = await Promise.all([
-        fetchUser(id, getters.authHost, getters.token),
-        fetchUserStatuses(id, getters.authHost, godmode, getters.token)
-      ])
 
+      const userResponse = await fetchUser(userId, getters.authHost, getters.token)
       commit('SET_USER', userResponse.data)
-      commit('SET_STATUSES', statusesResponse.data)
+      commit('SET_USER_PROFILE_LOADING', false)
-      commit('SET_LOADING', false)
+
+      dispatch('FetchUserStatuses', { userId, godmode })
+    },
+    async FetchUserStatuses({ commit, getters }, { userId, godmode }) {
+      commit('SET_STATUSES_LOADING', true)
+
+      const statuses = await fetchUserStatuses(userId, getters.authHost, godmode, getters.token)
+
+      commit('SET_STATUSES', statuses.data)
+      commit('SET_STATUSES_LOADING', false)
     }
   }
 }

src/views/reports/components/GroupedReport.vue

@@ -41,7 +41,7 @@
         <div class="line"/>
         <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
         <div v-for="status in group.status" :key="status.id">
-          <status :status="status" class="reported-status"/>
+          <status :status="status" :page="1" class="reported-status"/> <!-- Change page value when pagination is implemented -->
         </div>
       </div>
       <div v-if="group.reports">

src/views/reports/components/Report.vue

@@ -58,7 +58,7 @@
             <el-collapse>
               <el-collapse-item :title="getStatusesTitle(report.statuses)">
                 <div v-for="status in report.statuses" :key="status.id">
-                  <status :status="status" />
+                  <status :status="status" :page="currentPage"/>
                 </div>
               </el-collapse-item>
             </el-collapse>

src/views/status/Status.vue

@@ -104,6 +104,21 @@ export default {
     status: {
       type: Object,
       required: true
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    userId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    godmode: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -116,7 +131,7 @@ export default {
       return str.charAt(0).toUpperCase() + str.slice(1)
     },
     changeStatus(statusId, isSensitive, visibility) {
-      this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility })
+      this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility, reportCurrentPage: this.page, userId: this.userId, godmode: this.godmode })
     },
     deleteStatus(statusId) {
       this.$confirm('Are you sure you want to delete this status?', 'Warning', {
@@ -124,7 +139,7 @@ export default {
         cancelButtonText: 'Cancel',
         type: 'warning'
       }).then(() => {
-        this.$store.dispatch('DeleteStatus', { statusId })
+        this.$store.dispatch('DeleteStatus', { statusId, reportCurrentPage: this.page, userId: this.userId, godmode: this.godmode })
         this.$message({
           type: 'success',
           message: 'Delete completed'

src/views/users/show.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="!loading">
+  <main v-if="!userProfileLoading">
     <header>
       <el-avatar :src="user.avatar" size="large" />
       <h1>{{ user.display_name }}</h1>
@@ -69,9 +69,9 @@
         </el-col>
       </el-row>
       <el-col :span="18">
-        <el-timeline class="statuses">
+        <el-timeline v-if="!statusesLoading" class="statuses">
           <el-timeline-item v-for="status in statuses" :key="status.id">
-            <status :status="status"/>
+            <status :status="status" :user-id="user.id" :godmode="showPrivate"/>
           </el-timeline-item>
         </el-timeline>
       </el-col>
@@ -91,24 +91,25 @@ export default {
     }
   },
   computed: {
-    loading() {
+    statuses() {
-      return this.$store.state.userProfile.loading
+      return this.$store.state.userProfile.statuses
+    },
+    statusesLoading() {
+      return this.$store.state.userProfile.statusesLoading
     },
     user() {
       return this.$store.state.userProfile.user
     },
-    statuses() {
+    userProfileLoading() {
-      return this.$store.state.userProfile.statuses
+      return this.$store.state.userProfile.userProfileLoading
     }
   },
   mounted: function() {
-    this.$store.dispatch('FetchData', { id: this.$route.params.id, godmode: false })
+    this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: false })
   },
   methods: {
     onTogglePrivate() {
-      console.log(this.showPrivate)
+      this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: this.showPrivate })
-
-      this.$store.dispatch('FetchData', { id: this.$route.params.id, godmode: this.showPrivate })
     }
   }
 }