50b2e15731
For smaller courses, there is a feature under the new provider for grouping topics at the subsection level so that when navigating the course, all topics under a subsection show up in the sidebar instead of just the current unit. This implements that functionality by checking if the discussion is loaded in-context, and if grouping at subsection is enabled, and if so, displaying the current subsection's topics.
103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import SearchInfo from '../../components/SearchInfo';
|
|
import { selectCurrentCategoryGrouping, selectTopicsUnderCategory } from '../../data/selectors';
|
|
import { DiscussionContext } from '../common/context';
|
|
import {
|
|
selectAllThreads,
|
|
selectTopicThreads,
|
|
} from './data/selectors';
|
|
import { setSearchQuery } from './data/slices';
|
|
import PostFilterBar from './post-filter-bar/PostFilterBar';
|
|
import PostsList from './PostsList';
|
|
|
|
function AllPostsList() {
|
|
const posts = useSelector(selectAllThreads);
|
|
return <PostsList posts={posts} topics={null} />;
|
|
}
|
|
|
|
function TopicPostsList({ topicId }) {
|
|
const posts = useSelector(selectTopicThreads([topicId]));
|
|
return <PostsList posts={posts} topics={[topicId]} />;
|
|
}
|
|
|
|
TopicPostsList.propTypes = {
|
|
topicId: PropTypes.string.isRequired,
|
|
};
|
|
|
|
function CategoryPostsList({ category }) {
|
|
const { inContext } = useContext(DiscussionContext);
|
|
const groupedCategory = useSelector(selectCurrentCategoryGrouping)(category);
|
|
// If grouping at subsection is enabled, only apply it when browsing discussions in context in the learning MFE.
|
|
const topicIds = useSelector(selectTopicsUnderCategory)(inContext ? groupedCategory : category);
|
|
const posts = useSelector(selectTopicThreads(topicIds));
|
|
return <PostsList posts={posts} topics={topicIds} />;
|
|
}
|
|
|
|
CategoryPostsList.propTypes = {
|
|
category: PropTypes.string.isRequired,
|
|
};
|
|
|
|
function PostsView() {
|
|
const {
|
|
topicId,
|
|
category,
|
|
} = useContext(DiscussionContext);
|
|
const dispatch = useDispatch();
|
|
const searchString = useSelector(({ threads }) => threads.filters.search);
|
|
const resultsFound = useSelector(({ threads }) => threads.totalThreads);
|
|
const textSearchRewrite = useSelector(({ threads }) => threads.textSearchRewrite);
|
|
const loadingStatus = useSelector(({ threads }) => threads.status);
|
|
|
|
let postsListComponent;
|
|
|
|
if (topicId) {
|
|
postsListComponent = <TopicPostsList topicId={topicId} />;
|
|
} else if (category) {
|
|
postsListComponent = <CategoryPostsList category={category} />;
|
|
} else {
|
|
postsListComponent = <AllPostsList />;
|
|
}
|
|
|
|
const handleKeyDown = (event) => {
|
|
const { key } = event;
|
|
if (key !== 'ArrowDown' && key !== 'ArrowUp') { return; }
|
|
const option = event.target;
|
|
|
|
let selectedOption;
|
|
if (key === 'ArrowDown') { selectedOption = option.nextElementSibling; }
|
|
if (key === 'ArrowUp') { selectedOption = option.previousElementSibling; }
|
|
|
|
if (selectedOption) {
|
|
selectedOption.focus();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="discussion-posts d-flex flex-column h-100">
|
|
{searchString && (
|
|
<SearchInfo
|
|
count={resultsFound}
|
|
text={searchString}
|
|
loadingStatus={loadingStatus}
|
|
onClear={() => dispatch(setSearchQuery(''))}
|
|
textSearchRewrite={textSearchRewrite}
|
|
/>
|
|
)}
|
|
<PostFilterBar />
|
|
<div className="border-bottom border-light-400" />
|
|
<div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
|
|
{postsListComponent}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
PostsView.propTypes = {
|
|
};
|
|
|
|
export default PostsView;
|