diff --git a/src/assets/empty.svg b/src/assets/empty.svg
new file mode 100644
index 00000000..29851955
--- /dev/null
+++ b/src/assets/empty.svg
@@ -0,0 +1,44 @@
+
diff --git a/src/discussions/data/hooks.js b/src/discussions/data/hooks.js
new file mode 100644
index 00000000..3236526f
--- /dev/null
+++ b/src/discussions/data/hooks.js
@@ -0,0 +1,88 @@
+/* eslint-disable import/prefer-default-export */
+import { useContext, useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation, useRouteMatch } from 'react-router';
+
+import { AppContext } from '@edx/frontend-platform/react';
+import { breakpoints, useWindowSize } from '@edx/paragon';
+
+import { Routes } from '../../data/constants';
+import { fetchCourseBlocks } from '../../data/thunks';
+import { clearRedirect } from '../posts/data';
+import { selectTopics } from '../topics/data/selectors';
+import { fetchCourseTopics } from '../topics/data/thunks';
+import { discussionsPath } from '../utils';
+import { selectAreThreadsFiltered, selectPostThreadCount } from './selectors';
+import { fetchCourseConfig } from './thunks';
+
+export function useTotalTopicThreadCount() {
+ const topics = useSelector(selectTopics);
+
+ if (!topics) {
+ return 0;
+ }
+
+ return Object.keys(topics).reduce((total, topicId) => {
+ const topic = topics[topicId];
+ return total + topic.threadCounts.discussion + topic.threadCounts.question;
+ }, 0);
+}
+
+export const useSidebarVisible = () => {
+ const isFiltered = useSelector(selectAreThreadsFiltered);
+ const totalThreads = useSelector(selectPostThreadCount);
+ const isViewingTopics = useRouteMatch(Routes.TOPICS.PATH);
+
+ if (isFiltered) {
+ return true;
+ }
+
+ if (isViewingTopics) {
+ return true;
+ }
+
+ return totalThreads > 0;
+};
+
+export function useCourseDiscussionData(courseId) {
+ const dispatch = useDispatch();
+ const { authenticatedUser } = useContext(AppContext);
+
+ useEffect(() => {
+ async function fetchBaseData() {
+ await dispatch(fetchCourseConfig(courseId));
+ await dispatch(fetchCourseTopics(courseId));
+ await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
+ }
+
+ fetchBaseData();
+ }, [courseId]);
+}
+
+export function useRedirectToThread(courseId) {
+ const dispatch = useDispatch();
+ const redirectToThread = useSelector(
+ (state) => state.threads.redirectToThread,
+ );
+ const history = useHistory();
+ const location = useLocation();
+
+ return useEffect(() => {
+ // After posting a new thread we'd like to redirect users to it, the topic and post id are temporarily
+ // stored in redirectToThread
+ if (redirectToThread) {
+ dispatch(clearRedirect());
+ const newLocation = discussionsPath(Routes.COMMENTS.PAGES['my-posts'], {
+ courseId,
+ postId: redirectToThread.threadId,
+ })(location);
+ history.push(newLocation);
+ }
+ }, [redirectToThread]);
+}
+
+export function useIsOnDesktop() {
+ const windowSize = useWindowSize();
+ return windowSize.width >= breakpoints.large.minWidth;
+}
diff --git a/src/discussions/data/selectors.js b/src/discussions/data/selectors.js
index c92daa80..6edda371 100644
--- a/src/discussions/data/selectors.js
+++ b/src/discussions/data/selectors.js
@@ -1,4 +1,5 @@
/* eslint-disable import/prefer-default-export */
+import { AllPostsFilter, PostsStatusFilter } from '../../data/constants';
export const selectAnonymousPostingConfig = state => ({
allowAnonymous: state.config.allowAnonymous,
@@ -10,3 +11,30 @@ export const selectUserIsPrivileged = state => state.config.userIsPrivileged;
export const selectDivisionSettings = state => state.config.settings;
export const selectDiscussionProvider = state => state.config.provider;
+
+export function selectAreThreadsFiltered(state) {
+ const { filters } = state.threads;
+
+ if (filters.search) {
+ return true;
+ }
+
+ return !(
+ filters.status === PostsStatusFilter.ALL
+ && filters.allPosts === AllPostsFilter.ALL_POSTS
+ );
+}
+
+export function selectTopicThreadCount(topicId) {
+ return state => {
+ const topic = state.topics.topics[topicId];
+ if (!topic) {
+ return 0;
+ }
+ return topic.threadCounts.question + topic.threadCounts.discussion;
+ };
+}
+
+export function selectPostThreadCount(state) {
+ return state.threads.totalThreads;
+}
diff --git a/src/discussions/discussions-home/DiscussionContent.jsx b/src/discussions/discussions-home/DiscussionContent.jsx
new file mode 100644
index 00000000..85acf083
--- /dev/null
+++ b/src/discussions/discussions-home/DiscussionContent.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { useSelector } from 'react-redux';
+import { Route, Switch } from 'react-router';
+
+import { Routes } from '../../data/constants';
+import { CommentsView } from '../comments';
+import { PostEditor } from '../posts';
+
+export default function DiscussionContent() {
+ const postEditorVisible = useSelector(
+ (state) => state.threads.postEditorVisible,
+ );
+ return (
+
+
+ {postEditorVisible ? (
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ )}
+
+
-
-
-
- {postEditorVisible ? (
-
-
-
- ) : (
-
-
-
-
-
-
-
-
- )}
-
-
+
+ {displayContentArea &&
}
+ {!displayContentArea && (
+
+
+ }
+ />
+ }
+ />
+
+ )}
+
+
{title}
+ {subTitle &&
{subTitle}
}
+ {action && actionText && (
+
+ )}
+
+
{intl.formatMessage(messages.noResultsFound)}
+ {intl.formatMessage(helpMessage)}
+
+ );
+}
+
+NoResults.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(NoResults);
diff --git a/src/discussions/posts/NoResults.test.jsx b/src/discussions/posts/NoResults.test.jsx
new file mode 100644
index 00000000..78dc4eea
--- /dev/null
+++ b/src/discussions/posts/NoResults.test.jsx
@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { MemoryRouter } from 'react-router';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { PostsStatusFilter } from '../../data/constants';
+import { initializeStore } from '../../store';
+import messages from '../messages';
+import { setSearchQuery, setStatusFilter } from './data';
+import NoResults from './NoResults';
+
+import './data/__factories__';
+
+let store;
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+function renderComponent(location = `/${courseId}/`) {
+ return render(
+
+
+
+
+
+
+
+
+ ,
+ );
+}
+
+describe('NoResults', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+
+ store = initializeStore();
+ });
+
+ test('component skips rendering if there are no filters', async () => {
+ renderComponent();
+ expect(
+ screen.queryByText(messages.removeFilters.defaultMessage),
+ ).not.toBeInTheDocument();
+ });
+
+ test('remove filters displays when filter is added', async () => {
+ store.dispatch(setStatusFilter(PostsStatusFilter.UNANSWERED));
+ renderComponent();
+ expect(
+ screen.queryByText(messages.removeFilters.defaultMessage),
+ ).toBeInTheDocument();
+ });
+
+ test('remove keywords displays when filter is added', async () => {
+ store.dispatch(setSearchQuery('test'));
+ renderComponent();
+ expect(
+ screen.queryByText(messages.removeKeywords.defaultMessage),
+ ).toBeInTheDocument();
+ });
+});
diff --git a/src/discussions/posts/PostsView.jsx b/src/discussions/posts/PostsView.jsx
index 691e3717..31fbfd91 100644
--- a/src/discussions/posts/PostsView.jsx
+++ b/src/discussions/posts/PostsView.jsx
@@ -20,11 +20,12 @@ import {
} from './data/selectors';
import { fetchThreads } from './data/thunks';
import PostFilterBar from './post-filter-bar/PostFilterBar';
+import NoResults from './NoResults';
import { PostLink } from './post';
function PostsList({ posts }) {
let lastPinnedIdx = null;
- return posts && posts.map((post, idx) => {
+ const postInstances = posts && posts.map((post, idx) => {
if (post.pinned && lastPinnedIdx !== false) {
lastPinnedIdx = idx;
} else if (lastPinnedIdx != null && lastPinnedIdx !== false) {
@@ -39,6 +40,12 @@ function PostsList({ posts }) {
}
return ();
});
+ return (
+ <>
+ {postInstances}
+ {posts && posts.length === 0 && }
+
+ );
}
PostsList.propTypes = {
@@ -48,6 +55,10 @@ PostsList.propTypes = {
})),
};
+PostsList.defaultProps = {
+ posts: null,
+};
+
function AllPostsList() {
const posts = useSelector(selectAllThreads);
return ;
diff --git a/src/discussions/posts/index.js b/src/discussions/posts/index.js
index 73c46675..aa8b35ac 100644
--- a/src/discussions/posts/index.js
+++ b/src/discussions/posts/index.js
@@ -1,4 +1,6 @@
/* eslint-disable import/prefer-default-export */
+export { showPostEditor } from './data';
export { default as Post } from './post/Post';
+export { default as messages } from './post-actions-bar/messages';
export { default as PostEditor } from './post-editor/PostEditor';
export { default as PostsView } from './PostsView';
diff --git a/src/discussions/topics/data/__factories__/topics.factory.js b/src/discussions/topics/data/__factories__/topics.factory.js
index 3a0e4ec0..a581a14f 100644
--- a/src/discussions/topics/data/__factories__/topics.factory.js
+++ b/src/discussions/topics/data/__factories__/topics.factory.js
@@ -33,3 +33,15 @@ Factory.define('topic.v2')
discussion: 0,
question: 0,
});
+
+Factory.define('topic.withThreads')
+ .option('topicPrefix', null, '')
+ .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
+ .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}topic-${idx}`)
+ .sequence('name', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}topic ${idx}`)
+ .sequence('usage_key', ['id', 'courseId'], (idx, id, courseId) => `block-v1:${courseId.replace('course-v1:', '')}+type@vertical+block@${id}`)
+ .attr('enabled_in_context', null, true)
+ .attr('thread_counts', [], {
+ discussion: 1,
+ question: 0,
+ });