107 lines
3.9 KiB
JavaScript
107 lines
3.9 KiB
JavaScript
import React, {
|
|
useCallback, useContext, useEffect, useMemo,
|
|
} from 'react';
|
|
|
|
import { Spinner } from '@openedx/paragon';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
|
|
import { RequestStatus, Routes } from '../../data/constants';
|
|
import DiscussionContext from '../common/context';
|
|
import { selectDiscussionProvider } from '../data/selectors';
|
|
import { selectTopicThreadsIds } from '../posts/data/selectors';
|
|
import PostsList from '../posts/PostsList';
|
|
import { discussionsPath, handleKeyDown } from '../utils';
|
|
import {
|
|
selectArchivedTopic, selectLoadingStatus, selectNonCoursewareTopics,
|
|
selectSubsection, selectSubsectionUnits, selectUnits,
|
|
} from './data/selectors';
|
|
import fetchCourseTopicsV3 from './data/thunks';
|
|
import { BackButton, NoResults } from './components';
|
|
import messages from './messages';
|
|
import { Topic } from './topic';
|
|
|
|
const TopicPostsView = () => {
|
|
const intl = useIntl();
|
|
const location = useLocation();
|
|
const dispatch = useDispatch();
|
|
const { courseId, topicId, category } = useContext(DiscussionContext);
|
|
const provider = useSelector(selectDiscussionProvider);
|
|
const topicsStatus = useSelector(selectLoadingStatus);
|
|
const postsIds = useSelector(selectTopicThreadsIds([topicId]));
|
|
const selectedSubsectionUnits = useSelector(selectSubsectionUnits(category));
|
|
const selectedSubsection = useSelector(selectSubsection(category));
|
|
const units = useSelector(selectUnits);
|
|
const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
|
|
const selectedArchivedTopic = useSelector(selectArchivedTopic(topicId));
|
|
const topicsInProgress = topicsStatus === RequestStatus.IN_PROGRESS;
|
|
|
|
const selectedUnit = useMemo(() => (
|
|
units?.find(unit => unit.id === topicId)
|
|
), [units, topicId]);
|
|
|
|
const selectedNonCoursewareTopic = useMemo(() => (
|
|
nonCoursewareTopics?.find(topic => topic.id === topicId)
|
|
), [nonCoursewareTopics, topicId]);
|
|
|
|
const backButtonPath = useCallback(() => {
|
|
const path = selectedUnit ? Routes.TOPICS.CATEGORY : Routes.TOPICS.ALL;
|
|
const params = selectedUnit ? { courseId, category: selectedUnit?.parentId } : { courseId };
|
|
return discussionsPath(path, params)(location);
|
|
}, [selectedUnit]);
|
|
|
|
useEffect(() => {
|
|
if (provider && topicsStatus === RequestStatus.IDLE) {
|
|
dispatch(fetchCourseTopicsV3(courseId));
|
|
}
|
|
}, [provider]);
|
|
|
|
return (
|
|
<div className="discussion-posts d-flex flex-column h-100">
|
|
{topicId ? (
|
|
<BackButton
|
|
loading={topicsInProgress}
|
|
path={backButtonPath()}
|
|
title={selectedUnit?.name || selectedNonCoursewareTopic?.name || selectedArchivedTopic?.name
|
|
|| intl.formatMessage(messages.unnamedTopic)}
|
|
/>
|
|
) : (
|
|
<BackButton
|
|
loading={topicsInProgress}
|
|
path={discussionsPath(Routes.TOPICS.ALL, { courseId })(location)}
|
|
title={selectedSubsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
|
|
/>
|
|
)}
|
|
<div className="border-bottom border-light-400" />
|
|
<div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
|
|
{topicId ? (
|
|
<PostsList
|
|
postsIds={postsIds}
|
|
topicsIds={[topicId]}
|
|
parentIsLoading={topicsInProgress}
|
|
/>
|
|
) : (
|
|
selectedSubsectionUnits?.map((unit) => (
|
|
<Topic
|
|
key={unit.id}
|
|
topic={unit}
|
|
/>
|
|
))
|
|
)}
|
|
{(category && selectedSubsectionUnits.length === 0 && topicsStatus === RequestStatus.SUCCESSFUL) && (
|
|
<NoResults />
|
|
)}
|
|
{(category && topicsInProgress) && (
|
|
<div className="d-flex justify-content-center p-4">
|
|
<Spinner animation="border" variant="primary" size="lg" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TopicPostsView);
|