Skip to content

Commit a72d417

Browse files
ChrisChVChrisChV
committed
feat: Get course title from course details
1 parent 5297e3b commit a72d417

5 files changed

Lines changed: 103 additions & 54 deletions

File tree

‎src/course-outline/data/api.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { camelCaseObject, getConfig } from '@edx/frontend-platform';
22
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
33
import { XBlock } from '@src/data/types';
4-
import { CourseOutline } from './types';
4+
import { CourseOutline, CourseDetails } from './types';
55

66
const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
77

88
export const getCourseOutlineIndexApiUrl = (
99
courseId: string,
1010
) => `${getApiBaseUrl()}/api/contentstore/v1/course_index/${courseId}`;
1111

12+
export const getCourseDetailsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_details/${courseId}`;
13+
1214
export const getCourseBestPracticesApiUrl = ({
1315
courseId,
1416
excludeGraded,
@@ -46,7 +48,7 @@ export const createDiscussionsTopicsUrl = (courseId: string) => `${getApiBaseUrl
4648
/**
4749
* Get course outline index.
4850
* @param {string} courseId
49-
* @returns {Promise<courseOutline>}
51+
* @returns {Promise<CourseOutline>}
5052
*/
5153
export async function getCourseOutlineIndex(courseId: string): Promise<CourseOutline> {
5254
const { data } = await getAuthenticatedHttpClient()
@@ -55,6 +57,18 @@ export async function getCourseOutlineIndex(courseId: string): Promise<CourseOut
5557
return camelCaseObject(data);
5658
}
5759

60+
/**
61+
* Get course details.
62+
* @param {string} courseId
63+
* @returns {Promise<CourseDetails>}
64+
*/
65+
export async function getCourseDetails(courseId: string): Promise<CourseDetails> {
66+
const { data } = await getAuthenticatedHttpClient()
67+
.get(getCourseDetailsApiUrl(courseId));
68+
69+
return camelCaseObject(data);
70+
}
71+
5872
/**
5973
*
6074
* @param courseId

‎src/course-outline/data/apiHooks.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMutation, useQuery } from '@tanstack/react-query';
22
import { createCourseXblock } from '@src/course-unit/data/api';
3-
import { getCourseItem } from './api';
3+
import { getCourseDetails, getCourseItem } from './api';
44

55
export const courseOutlineQueryKeys = {
66
all: ['courseOutline'],
@@ -9,7 +9,7 @@ export const courseOutlineQueryKeys = {
99
*/
1010
contentLibrary: (courseId?: string) => [...courseOutlineQueryKeys.all, courseId],
1111
courseItemId: (itemId?: string) => [...courseOutlineQueryKeys.all, itemId],
12-
12+
courseDetails: (courseId?: string) => [...courseOutlineQueryKeys.all, courseId, 'details'],
1313
};
1414

1515
/**
@@ -33,3 +33,11 @@ export const useCourseItemData = (itemId?: string, enabled: boolean = true) => (
3333
enabled: enabled && itemId !== undefined,
3434
})
3535
);
36+
37+
export const useCourseDetails = (courseId?: string) => (
38+
useQuery({
39+
queryKey: courseOutlineQueryKeys.courseDetails(courseId),
40+
queryFn: () => getCourseDetails(courseId!),
41+
enabled: courseId !== undefined,
42+
})
43+
);

‎src/course-outline/data/types.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,15 @@ export interface CourseOutline {
2424
rerunNotificationId: null;
2525
}
2626

27+
// TODO: This interface has only basic data, all the rest needs to be added.
28+
export interface CourseDetails {
29+
course_id: string;
30+
title: string;
31+
subtitle?: string;
32+
org: string;
33+
description?: string;
34+
}
35+
2736
export interface CourseOutlineState {
2837
loadingStatus: {
2938
outlineIndexLoadingStatus: string;

‎src/library-authoring/course-import/ImportStepperModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const ImportStepperModal = ({
5252
eventKey="review-details"
5353
title={intl.formatMessage(messages.importCourseReviewDetailsStep)}
5454
>
55-
<ReviewImportDetails />
55+
<ReviewImportDetails courseId={selectedCourseId} />
5656
</Stepper.Step>
5757
</Stepper>
5858
</ModalDialog.Body>

‎src/library-authoring/course-import/ReviewImportDetails.tsx‎

Lines changed: 67 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,80 @@ import { Card, Icon, Stack } from '@openedx/paragon';
33
import { LoadingSpinner } from '@src/generic/Loading';
44
import { getItemIcon } from '@src/generic/block-type-utils';
55
import { Widgets } from '@openedx/paragon/icons';
6+
import { useCourseDetails } from '@src/course-outline/data/apiHooks';
67
import messages from './messages';
78

8-
export const ReviewImportDetails = () => (
9-
<Stack gap={4}>
10-
<Card>
11-
<Card.Section>
12-
<h4><FormattedMessage {...messages.importCourseInProgressStatusTitle} /></h4>
13-
<p><FormattedMessage {...messages.importCourseInProgressStatusBody} /></p>
14-
</Card.Section>
15-
</Card>
16-
<h4><FormattedMessage {...messages.importCourseAnalysisSummary} /></h4>
17-
<Card>
18-
<Card.Section>
19-
<Stack direction="horizontal">
20-
<Stack className="align-items-center" gap={2}>
21-
<FormattedMessage {...messages.importCourseTotalBlocks} />
9+
export const ReviewImportDetails = ({ courseId }: { courseId?: string }) => {
10+
const { data } = useCourseDetails(courseId);
11+
12+
return (
13+
<Stack gap={4}>
14+
<Card>
15+
{data ? (
16+
<Card.Section>
17+
<h4><FormattedMessage {...messages.importCourseInProgressStatusTitle} /></h4>
18+
<p>
19+
<FormattedMessage
20+
{...messages.importCourseInProgressStatusBody}
21+
values={{
22+
courseName: data?.title || '',
23+
}}
24+
/>
25+
</p>
26+
</Card.Section>
27+
) : (
28+
<div className="text-center p-3">
2229
<LoadingSpinner />
23-
</Stack>
24-
<div className="border-light-400" style={{ borderLeft: '2px solid', height: '50px' }} />
25-
<Stack className="align-items-center" gap={2}>
26-
<FormattedMessage {...messages.importCourseSections} />
27-
<Stack className="justify-content-center" direction="horizontal" gap={3}>
28-
<Icon src={getItemIcon('section')} />
30+
</div>
31+
)}
32+
</Card>
33+
<h4><FormattedMessage {...messages.importCourseAnalysisSummary} /></h4>
34+
<Card>
35+
<Card.Section>
36+
<Stack direction="horizontal">
37+
<Stack className="align-items-center" gap={2}>
38+
<FormattedMessage {...messages.importCourseTotalBlocks} />
2939
<LoadingSpinner />
3040
</Stack>
31-
</Stack>
32-
<Stack className="align-items-center" gap={2}>
33-
<FormattedMessage {...messages.importCourseSubsections} />
34-
<Stack className="justify-content-center" direction="horizontal" gap={3}>
35-
<Icon src={getItemIcon('subsection')} />
36-
<LoadingSpinner />
41+
<div className="border-light-400" style={{ borderLeft: '2px solid', height: '50px' }} />
42+
<Stack className="align-items-center" gap={2}>
43+
<FormattedMessage {...messages.importCourseSections} />
44+
<Stack className="justify-content-center" direction="horizontal" gap={3}>
45+
<Icon src={getItemIcon('section')} />
46+
<LoadingSpinner />
47+
</Stack>
3748
</Stack>
38-
</Stack>
39-
<Stack className="align-items-center" gap={2}>
40-
<FormattedMessage {...messages.importCourseUnits} />
41-
<Stack className="justify-content-center" direction="horizontal" gap={3}>
42-
<Icon src={getItemIcon('unit')} />
43-
<LoadingSpinner />
49+
<Stack className="align-items-center" gap={2}>
50+
<FormattedMessage {...messages.importCourseSubsections} />
51+
<Stack className="justify-content-center" direction="horizontal" gap={3}>
52+
<Icon src={getItemIcon('subsection')} />
53+
<LoadingSpinner />
54+
</Stack>
4455
</Stack>
45-
</Stack>
46-
<Stack className="align-items-center" gap={2}>
47-
<FormattedMessage {...messages.importCourseComponents} />
48-
<Stack className="justify-content-center" direction="horizontal" gap={3}>
49-
<Icon src={Widgets} />
50-
<LoadingSpinner />
56+
<Stack className="align-items-center" gap={2}>
57+
<FormattedMessage {...messages.importCourseUnits} />
58+
<Stack className="justify-content-center" direction="horizontal" gap={3}>
59+
<Icon src={getItemIcon('unit')} />
60+
<LoadingSpinner />
61+
</Stack>
62+
</Stack>
63+
<Stack className="align-items-center" gap={2}>
64+
<FormattedMessage {...messages.importCourseComponents} />
65+
<Stack className="justify-content-center" direction="horizontal" gap={3}>
66+
<Icon src={Widgets} />
67+
<LoadingSpinner />
68+
</Stack>
5169
</Stack>
5270
</Stack>
71+
</Card.Section>
72+
</Card>
73+
<h4><FormattedMessage {...messages.importCourseDetailsTitle} /></h4>
74+
<Card className="p-6">
75+
<Stack className="align-items-center" gap={3}>
76+
<LoadingSpinner />
77+
<FormattedMessage {...messages.importCourseDetailsLoadingBody} />
5378
</Stack>
54-
</Card.Section>
55-
</Card>
56-
<h4><FormattedMessage {...messages.importCourseDetailsTitle} /></h4>
57-
<Card className="p-6">
58-
<Stack className="align-items-center" gap={3}>
59-
<LoadingSpinner />
60-
<FormattedMessage {...messages.importCourseDetailsLoadingBody} />
61-
</Stack>
62-
</Card>
63-
</Stack>
64-
);
79+
</Card>
80+
</Stack>
81+
);
82+
};

0 commit comments

Comments
 (0)