87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { getConfig } from '@edx/frontend-platform';
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
import { Helmet } from 'react-helmet';
|
|
import { Container, Stack } from '@openedx/paragon';
|
|
import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
|
|
|
|
import SubHeader from '../generic/sub-header/SubHeader';
|
|
import messages from './messages';
|
|
import AriaLiveRegion from './AriaLiveRegion';
|
|
import ChecklistSection from './ChecklistSection';
|
|
import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
|
|
import { useCourseBestPractices, useCourseLaunch } from './data/apiHooks';
|
|
|
|
const CourseChecklist = () => {
|
|
const intl = useIntl();
|
|
const { courseId, courseDetails } = useCourseAuthoringContext();
|
|
const enableQuality = getConfig().ENABLE_CHECKLIST_QUALITY === 'true';
|
|
|
|
const {
|
|
data: bestPracticeData,
|
|
isPending: isPendingBestPacticeData,
|
|
} = useCourseBestPractices({ courseId });
|
|
|
|
const {
|
|
data: launchData,
|
|
isPending: isPendingLaunchData,
|
|
failureReason: launchError,
|
|
} = useCourseLaunch({ courseId });
|
|
|
|
const isLoadingDenied = launchError?.response?.status === 403;
|
|
|
|
if (isLoadingDenied) {
|
|
return (
|
|
<Container size="xl" className="course-unit px-4 mt-4">
|
|
<ConnectionErrorAlert />
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>
|
|
{intl.formatMessage(messages.pageTitle, {
|
|
headingTitle: intl.formatMessage(messages.headingTitle),
|
|
courseName: courseDetails?.name,
|
|
siteName: process.env.SITE_NAME,
|
|
})}
|
|
</title>
|
|
</Helmet>
|
|
<Container size="xl" className="p-4 pt-4.5">
|
|
<SubHeader
|
|
title={intl.formatMessage(messages.headingTitle)}
|
|
subtitle={intl.formatMessage(messages.headingSubtitle)}
|
|
/>
|
|
<AriaLiveRegion
|
|
{...{
|
|
isCourseLaunchChecklistLoading: isPendingLaunchData,
|
|
isCourseBestPracticeChecklistLoading: isPendingBestPacticeData,
|
|
enableQuality,
|
|
}}
|
|
/>
|
|
<Stack gap={4}>
|
|
<ChecklistSection
|
|
courseId={courseId}
|
|
dataHeading={intl.formatMessage(messages.launchChecklistLabel)}
|
|
data={launchData}
|
|
idPrefix="launchChecklist"
|
|
isLoading={isPendingLaunchData}
|
|
/>
|
|
{enableQuality && (
|
|
<ChecklistSection
|
|
courseId={courseId}
|
|
dataHeading={intl.formatMessage(messages.bestPracticesChecklistLabel)}
|
|
data={bestPracticeData}
|
|
idPrefix="bestPracticesChecklist"
|
|
isLoading={isPendingBestPacticeData}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
</Container>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CourseChecklist;
|