fix: show reported label in case of reported response (#173)

* fix: show reported label in case of reported response

* fix: resolved linter issues

Co-authored-by: AhtishamShahid <ahtishamshahid@A006-00850.local>

src/discussions/data/selectors.js

@@ -8,6 +8,8 @@ export const selectAnonymousPostingConfig = state => ({
 
 export const selectUserIsPrivileged = state => state.config.userIsPrivileged;
 
+export const selectUserIsStaff = state => state.config.isUserAdmin;
+
 export const selectconfigLoadingStatus = state => state.config.status;
 
 export const selectLearnersTabEnabled = state => state.config.learnersTabEnabled;

src/discussions/data/slices.js

@@ -12,6 +12,7 @@ const configSlice = createSlice({
     allowAnonymousToPeers: false,
     userRoles: [],
     userIsPrivileged: false,
+    isUserAdmin: false,
     learnersTabEnabled: false,
     settings: {
       divisionScheme: 'none',

src/discussions/posts/PostsView.jsx

@@ -10,6 +10,7 @@ import ScrollThreshold from '../../components/ScrollThreshold';
 import { RequestStatus } from '../../data/constants';
 import { selectTopicsUnderCategory } from '../../data/selectors';
 import { DiscussionContext } from '../common/context';
+import { selectUserIsPrivileged, selectUserIsStaff } from '../data/selectors';
 import {
   selectAllThreads,
   selectThreadFilters,
@@ -35,13 +36,15 @@ function PostsList({ posts, topics }) {
   const filters = useSelector(selectThreadFilters());
   const nextPage = useSelector(selectThreadNextPage());
   const showOwnPosts = page === 'my-posts';
-
+  const userIsPrivileged = useSelector(selectUserIsPrivileged);
+  const userIsStaff = useSelector(selectUserIsStaff);
   const loadThreads = (topicIds, pageNum = undefined) => dispatch(fetchThreads(courseId, {
     topicIds,
     orderBy,
     filters,
     page: pageNum,
     author: showOwnPosts ? authenticatedUser.username : null,
+    countFlagged: userIsPrivileged || userIsStaff,
   }));
 
   useEffect(() => {

src/discussions/posts/data/api.js

@@ -26,6 +26,7 @@ export const coursesApiUrl = `${apiBaseUrl}/api/discussion/v1/courses/`;
  * @param {boolean} flagged If true, only threads that have been reported will be returned.
  * @param {string} threadType Can be 'discussion' or 'question'.
  * @param {ThreadViewStatus} view Set to "unread" on "unanswered" to filter to only those statuses.
+ * @param {boolean} countFlagged If true, abuseFlaggedCount will be available.
  * @returns {Promise<{}>}
  */
 export async function getThreads(
@@ -40,6 +41,7 @@ export async function getThreads(
     author,
     flagged,
     threadType,
+    countFlagged,
   } = {},
 ) {
   const params = snakeCaseObject({
@@ -55,8 +57,8 @@ export async function getThreads(
     requestedFields: 'profile_image',
     author,
     flagged,
+    countFlagged,
   });
-
   const { data } = await getAuthenticatedHttpClient().get(threadsApiUrl, { params });
   return data;
 }

src/discussions/posts/data/thunks.js

@@ -86,6 +86,7 @@ function normaliseThreads(data) {
  * @param {ThreadOrdering} orderBy The results will be sorted on this basis.
  * @param {ThreadFilter} filters The set of filters to apply to the thread.
  * @param {number} page Page to fetch
+ * @param {boolean} countFlagged
  * @returns {(function(*): Promise<void>)|*}
  */
 export function fetchThreads(courseId, {
@@ -94,12 +95,14 @@ export function fetchThreads(courseId, {
   author = null,
   filters = {},
   page = 1,
+  countFlagged,
 } = {}) {
   const options = {
     orderBy,
     topicIds,
     page,
     author,
+    countFlagged,
   };
   if (filters.status === PostsStatusFilter.FOLLOWING) {
     options.following = true;

src/discussions/posts/post/PostLink.jsx

@@ -68,7 +68,8 @@ function PostLink({
                       <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>
                     </div>
                   )}
-                {post.abuseFlagged
+
+                {(post.abuseFlagged || post.abuseFlaggedCount)
                   && (
                     <div className={showAnsweredBadge ? 'ml-2' : 'ml-auto'}>
                       <Badge variant="danger" data-testid="reported-post">{intl.formatMessage(messages.contentReported)}</Badge>