{postInstances(pinnedPosts)}
{postInstances(unpinnedPosts)}
diff --git a/src/discussions/learners/data/api.js b/src/discussions/learners/data/api.js
index 97738739..fa958a50 100644
--- a/src/discussions/learners/data/api.js
+++ b/src/discussions/learners/data/api.js
@@ -45,11 +45,10 @@ export async function getUserProfiles(usernames) {
* pagination: {count, num_pages, next, previous}
* }
*/
-export async function getUserPosts(courseId, { username, page, countFlagged }) {
+export async function getUserPosts(courseId, params) {
const learnerPostsApiUrl = `${coursesApiUrl}${courseId}/learner/`;
-
- const params = snakeCaseObject({ username, page, countFlagged });
+ const snakeCaseParams = snakeCaseObject(params);
const { data } = await getAuthenticatedHttpClient()
- .get(learnerPostsApiUrl, { params });
+ .get(learnerPostsApiUrl, { params: snakeCaseParams });
return data;
}
diff --git a/src/discussions/learners/data/slices.js b/src/discussions/learners/data/slices.js
index a67fd568..7336e826 100644
--- a/src/discussions/learners/data/slices.js
+++ b/src/discussions/learners/data/slices.js
@@ -3,7 +3,10 @@ import { createSlice } from '@reduxjs/toolkit';
import {
LearnersOrdering,
+ PostsStatusFilter,
RequestStatus,
+ ThreadOrdering,
+ ThreadType,
} from '../../../data/constants';
const learnersSlice = createSlice({
@@ -16,6 +19,12 @@ const learnersSlice = createSlice({
totalPages: null,
totalLearners: null,
sortedBy: LearnersOrdering.BY_LAST_ACTIVITY,
+ postFilter: {
+ type: ThreadType.ALL,
+ status: PostsStatusFilter.ALL,
+ orderBy: ThreadOrdering.BY_LAST_ACTIVITY,
+ cohort: '',
+ },
usernameSearch: null,
},
reducers: {
@@ -47,6 +56,10 @@ const learnersSlice = createSlice({
state.usernameSearch = payload;
state.pages = [];
},
+ setPostFilter: (state, { payload }) => {
+ state.pages = [];
+ state.postFilter = payload;
+ },
},
});
@@ -57,6 +70,7 @@ export const {
fetchLearnersDenied,
setSortedBy,
setUsernameSearch,
+ setPostFilter,
} = learnersSlice.actions;
export const learnersReducer = learnersSlice.reducer;
diff --git a/src/discussions/learners/data/thunks.js b/src/discussions/learners/data/thunks.js
index 673039f2..69f07e55 100644
--- a/src/discussions/learners/data/thunks.js
+++ b/src/discussions/learners/data/thunks.js
@@ -67,15 +67,17 @@ export function fetchLearners(courseId, {
* @param page
* @returns a promise that will update the state with the learner's posts
*/
-export function fetchUserPosts(courseId, { username, page = 1, countFlagged = false } = {}) {
+export function fetchUserPosts(courseId, params) {
return async (dispatch) => {
try {
- dispatch(fetchLearnerThreadsRequest({ courseId, author: username }));
-
- const data = await getUserPosts(courseId, { username, page, countFlagged });
+ dispatch(fetchLearnerThreadsRequest({ courseId, author: params?.username }));
+ const data = await getUserPosts(courseId, params);
const normalisedData = normaliseThreads(camelCaseObject(data));
-
- dispatch(fetchThreadsSuccess({ ...normalisedData, page, author: username }));
+ dispatch(fetchThreadsSuccess({
+ ...normalisedData,
+ page: params.page,
+ author: params.username,
+ }));
} catch (error) {
if (getHttpErrorStatus(error) === 403) {
dispatch(fetchThreadsDenied());
diff --git a/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx b/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx
new file mode 100644
index 00000000..2b0f774d
--- /dev/null
+++ b/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx
@@ -0,0 +1,89 @@
+import React, { useEffect } from 'react';
+
+import { isEmpty } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import FilterBar from '../../../components/FilterBar';
+import { selectCourseCohorts } from '../../cohorts/data/selectors';
+import { fetchCourseCohorts } from '../../cohorts/data/thunks';
+import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
+import { setPostFilter } from '../data/slices';
+
+function LearnerPostFilterBar() {
+ const dispatch = useDispatch();
+ const { courseId } = useParams();
+ const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+ const userIsGroupTa = useSelector(selectUserIsGroupTa);
+ const cohorts = useSelector(selectCourseCohorts);
+ const postFilter = useSelector(state => state.learners.postFilter);
+
+ const filtersToShow = [
+ {
+ name: 'type',
+ filters: ['type-all', 'type-discussions', 'type-questions'],
+ },
+ {
+ name: 'status',
+ filters: ['status-any', 'status-unread', 'status-unanswered', 'status-unresponded'],
+ },
+ {
+ name: 'orderBy',
+ filters: ['sort-activity', 'sort-comments', 'sort-votes'],
+ },
+ ];
+
+ if (userHasModerationPrivileges || userIsGroupTa) {
+ filtersToShow[1].filters.splice(2, 0, 'status-reported');
+ }
+
+ const handleFilterChange = (event) => {
+ const { name, value } = event.currentTarget;
+ if (name === 'type') {
+ if (postFilter.type !== value) {
+ dispatch(setPostFilter({
+ ...postFilter,
+ type: value,
+ }));
+ }
+ } else if (name === 'status') {
+ if (postFilter.status !== value) {
+ dispatch(setPostFilter({
+ ...postFilter,
+ status: value,
+ }));
+ }
+ } else if (name === 'orderBy') {
+ if (postFilter.orderBy !== value) {
+ dispatch(setPostFilter({
+ ...postFilter,
+ orderBy: value,
+ }));
+ }
+ } else if (name === 'cohort') {
+ if (postFilter.cohort !== value) {
+ dispatch(setPostFilter({
+ ...postFilter,
+ cohort: value,
+ }));
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (userHasModerationPrivileges && isEmpty(cohorts)) {
+ dispatch(fetchCourseCohorts(courseId));
+ }
+ }, [courseId, userHasModerationPrivileges]);
+
+ return (
+
+ );
+}
+
+export default LearnerPostFilterBar;
diff --git a/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.test.jsx b/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.test.jsx
new file mode 100644
index 00000000..d4281557
--- /dev/null
+++ b/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.test.jsx
@@ -0,0 +1,108 @@
+import {
+ act,
+ fireEvent,
+ render,
+ waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { generatePath, MemoryRouter, Route } from 'react-router';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { Routes } from '../../../data/constants';
+import { initializeStore } from '../../../store';
+import { DiscussionContext } from '../../common/context';
+import LearnerPostFilterBar from './LearnerPostFilterBar';
+
+let store;
+const username = 'abc123';
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const path = generatePath(
+ Routes.LEARNERS.POSTS,
+ { courseId, learnerUsername: username },
+);
+
+function renderComponent() {
+ return render(
+
+
+
+
+
+
+
+
+ ,
+ );
+}
+
+describe('LearnerPostFilterBar', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username,
+ administrator: true,
+ roles: [],
+ },
+ });
+ const initialData = {
+ config: {
+ hasModerationPrivileges: true,
+ isGroupTa: false,
+ },
+ cohorts: {
+ status: 'successful',
+ cohorts: [
+ {
+ name: 'Default Group',
+ id: 1,
+ userCount: 1,
+ groupId: null,
+ },
+ ],
+ },
+ };
+ store = initializeStore(initialData);
+ });
+
+ test('checks if all filters are visible', async () => {
+ const { queryAllByRole } = await renderComponent();
+ await act(async () => {
+ fireEvent.click(queryAllByRole('button')[0]);
+ });
+ await waitFor(() => {
+ expect(queryAllByRole('radiogroup')).toHaveLength(4);
+ });
+ });
+
+ test('checks if default values are selected', async () => {
+ const { queryAllByRole } = await renderComponent();
+ await act(async () => {
+ fireEvent.click(queryAllByRole('button')[0]);
+ });
+ await waitFor(() => {
+ expect(
+ queryAllByRole('radiogroup')[0].querySelector('input[value="all"]'),
+ ).toBeChecked();
+ expect(
+ queryAllByRole('radiogroup')[1].querySelector('input[value="statusAll"]'),
+ ).toBeChecked();
+ expect(
+ queryAllByRole('radiogroup')[2].querySelector('input[value="lastActivityAt"]'),
+ ).toBeChecked();
+ expect(
+ queryAllByRole('radiogroup')[3].querySelector('input[value=""]'),
+ ).toBeChecked();
+ });
+ });
+});
diff --git a/src/discussions/posts/data/slices.js b/src/discussions/posts/data/slices.js
index ba61f128..2c7779f7 100644
--- a/src/discussions/posts/data/slices.js
+++ b/src/discussions/posts/data/slices.js
@@ -61,6 +61,9 @@ const threadsSlice = createSlice({
}
state.status = RequestStatus.IN_PROGRESS;
},
+ clearPostsPages: (state) => {
+ state.pages = [];
+ },
fetchThreadsRequest: (state) => {
state.status = RequestStatus.IN_PROGRESS;
},
@@ -242,6 +245,7 @@ export const {
showPostEditor,
hidePostEditor,
clearRedirect,
+ clearPostsPages,
} = threadsSlice.actions;
export const threadsReducer = threadsSlice.reducer;
diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
index 0ba1d30f..8e2f7639 100644
--- a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
+++ b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -25,7 +25,7 @@ import {
import { selectThreadFilters, selectThreadSorting } from '../data/selectors';
import messages from './messages';
-const ActionItem = ({
+export const ActionItem = ({
id,
label,
value,
diff --git a/src/discussions/posts/post-filter-bar/messages.js b/src/discussions/posts/post-filter-bar/messages.js
index 9ccde1c8..5ee67ade 100644
--- a/src/discussions/posts/post-filter-bar/messages.js
+++ b/src/discussions/posts/post-filter-bar/messages.js
@@ -46,6 +46,11 @@ const messages = defineMessages({
defaultMessage: 'Unanswered',
description: 'Option in dropdown to filter to unanswered posts',
},
+ filterUnresponded: {
+ id: 'discussions.posts.status.filter.unresponded',
+ defaultMessage: 'Unresponded',
+ description: 'Option in dropdown to filter to unresponded posts',
+ },
myPosts: {
id: 'discussions.posts.filter.myPosts',
defaultMessage: 'My posts',
@@ -93,6 +98,7 @@ const messages = defineMessages({
statusFollowing {followed}
statusReported {reported}
statusUnanswered {unanswered}
+ statusUnresponded {unresponded}
other {{status}}
} {type, select,
discussion {discussions}