Andal.LND/frontend-app-learning
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add functionality to see unit draft preview (#1501)

Browse Source 
* feat: add functionality to see unit draft preview

* feat: add tests for course link redirects

* fix: course redirect unit to sequnce unit redirect

* fix: test coverage
This commit is contained in:
Kristin Aoki
2024-10-28 10:31:17 -04:00
committed by GitHub
parent 6f1159617e
commit d47433ee83
17 changed files with 1196 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/constants.ts
View File

@@ -13,6 +13,8 @@ export const DECODE_ROUTES = {
'/course/:courseId/:sequenceId/:unitId',
'/course/:courseId/:sequenceId',
'/course/:courseId',
'/preview/course/:courseId/:sequenceId/:unitId',
'/preview/course/:courseId/:sequenceId',
],
REDIRECT_HOME: 'home/:courseId',
REDIRECT_SURVEY: 'survey/:courseId',

225
src/courseware/CoursewareContainer.jsx
View File

@@ -19,62 +19,50 @@ import { handleNextSectionCelebration } from './course/celebration';
import withParamsAndNavigation from './utils';
// Look at where this is called in componentDidUpdate for more info about its usage
const checkResumeRedirect = memoize((courseStatus, courseId, sequenceId, firstSequenceId, navigate) => {
if (courseStatus === 'loaded' && !sequenceId) {
// Note that getResumeBlock is just an API call, not a redux thunk.
getResumeBlock(courseId).then((data) => {
// This is a replace because we don't want this change saved in the browser's history.
if (data.sectionId && data.unitId) {
navigate(`/course/${courseId}/${data.sectionId}/${data.unitId}`, { replace: true });
} else if (firstSequenceId) {
navigate(`/course/${courseId}/${firstSequenceId}`, { replace: true });
}
});
}
});
// Look at where this is called in componentDidUpdate for more info about its usage
const checkSectionUnitToUnitRedirect = memoize((courseStatus, courseId, sequenceStatus, section, unitId, navigate) => {
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && unitId) {
navigate(`/course/${courseId}/${unitId}`, { replace: true });
}
});
// Look at where this is called in componentDidUpdate for more info about its usage
const checkSectionToSequenceRedirect = memoize((courseStatus, courseId, sequenceStatus, section, unitId, navigate) => {
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && !unitId) {
// If the section is non-empty, redirect to its first sequence.
if (section.sequenceIds && section.sequenceIds[0]) {
navigate(`/course/${courseId}/${section.sequenceIds[0]}`, { replace: true });
// Otherwise, just go to the course root, letting the resume redirect take care of things.
} else {
navigate(`/course/${courseId}`, { replace: true });
export const checkResumeRedirect = memoize(
(courseStatus, courseId, sequenceId, firstSequenceId, navigate, isPreview) => {
if (courseStatus === 'loaded' && !sequenceId) {
// Note that getResumeBlock is just an API call, not a redux thunk.
getResumeBlock(courseId).then((data) => {
// This is a replace because we don't want this change saved in the browser's history.
if (data.sectionId && data.unitId) {
const baseUrl = `/course/${courseId}/${data.sectionId}`;
const sequenceUrl = isPreview ? `/preview${baseUrl}` : baseUrl;
navigate(`${sequenceUrl}/${data.unitId}`, { replace: true });
} else if (firstSequenceId) {
navigate(`/course/${courseId}/${firstSequenceId}`, { replace: true });
}
}, () => {});
}
},
);
// Look at where this is called in componentDidUpdate for more info about its usage
export const checkSectionUnitToUnitRedirect = memoize((
courseStatus,
courseId,
sequenceStatus,
section,
unitId,
navigate,
isPreview,
) => {
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && unitId) {
const baseUrl = `/course/${courseId}`;
const courseUrl = isPreview ? `/preview${baseUrl}` : baseUrl;
navigate(`${courseUrl}/${unitId}`, { replace: true });
}
});
// Look at where this is called in componentDidUpdate for more info about its usage
const checkUnitToSequenceUnitRedirect = memoize(
(courseStatus, courseId, sequenceStatus, sequenceMightBeUnit, sequenceId, section, routeUnitId, navigate) => {
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && !section && !routeUnitId) {
if (sequenceMightBeUnit) {
// If the sequence failed to load as a sequence, but it is marked as a possible unit, then
// we need to look up the correct parent sequence for it, and redirect there.
const unitId = sequenceId; // just for clarity during the rest of this method
getSequenceForUnitDeprecated(courseId, unitId).then(
parentId => {
if (parentId) {
navigate(`/course/${courseId}/${parentId}/${unitId}`, { replace: true });
} else {
navigate(`/course/${courseId}`, { replace: true });
}
},
() => { // error case
navigate(`/course/${courseId}`, { replace: true });
},
);
export const checkSectionToSequenceRedirect = memoize(
(courseStatus, courseId, sequenceStatus, section, unitId, navigate) => {
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && !unitId) {
// If the section is non-empty, redirect to its first sequence.
if (section.sequenceIds && section.sequenceIds[0]) {
navigate(`/course/${courseId}/${section.sequenceIds[0]}`, { replace: true });
// Otherwise, just go to the course root, letting the resume redirect take care of things.
} else {
// Invalid sequence that isn't a unit either. Redirect up to main course.
navigate(`/course/${courseId}`, { replace: true });
}
}
@@ -82,41 +70,80 @@ const checkUnitToSequenceUnitRedirect = memoize(
);
// Look at where this is called in componentDidUpdate for more info about its usage
const checkSequenceToSequenceUnitRedirect = memoize((courseId, sequenceStatus, sequence, unitId, navigate) => {
if (sequenceStatus === 'loaded' && sequence.id && !unitId) {
if (sequence.unitIds !== undefined && sequence.unitIds.length > 0) {
const nextUnitId = sequence.unitIds[sequence.activeUnitIndex];
// This is a replace because we don't want this change saved in the browser's history.
navigate(`/course/${courseId}/${sequence.id}/${nextUnitId}`, { replace: true });
export const checkUnitToSequenceUnitRedirect = memoize((
courseStatus,
courseId,
sequenceStatus,
sequenceMightBeUnit,
sequenceId,
section,
routeUnitId,
navigate,
isPreview,
) => {
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && !section && !routeUnitId) {
if (sequenceMightBeUnit) {
// If the sequence failed to load as a sequence, but it is marked as a possible unit, then
// we need to look up the correct parent sequence for it, and redirect there.
const unitId = sequenceId; // just for clarity during the rest of this method
getSequenceForUnitDeprecated(courseId, unitId).then(
parentId => {
if (parentId) {
const baseUrl = `/course/${courseId}/${parentId}`;
const sequenceUrl = isPreview ? `/preview${baseUrl}` : baseUrl;
navigate(`${sequenceUrl}/${unitId}`, { replace: true });
} else {
navigate(`/course/${courseId}`, { replace: true });
}
},
() => { // error case
navigate(`/course/${courseId}`, { replace: true });
},
);
} else {
// Invalid sequence that isn't a unit either. Redirect up to main course.
navigate(`/course/${courseId}`, { replace: true });
}
}
});
// Look at where this is called in componentDidUpdate for more info about its usage
const checkSequenceUnitMarkerToSequenceUnitRedirect = memoize(
(courseId, sequenceStatus, sequence, unitId, navigate) => {
export const checkSequenceToSequenceUnitRedirect = memoize(
(courseId, sequenceStatus, sequence, unitId, navigate, isPreview) => {
if (sequenceStatus === 'loaded' && sequence.id && !unitId) {
if (sequence.unitIds !== undefined && sequence.unitIds.length > 0) {
const baseUrl = `/course/${courseId}/${sequence.id}`;
const sequenceUrl = isPreview ? `/preview${baseUrl}` : baseUrl;
const nextUnitId = sequence.unitIds[sequence.activeUnitIndex];
// This is a replace because we don't want this change saved in the browser's history.
navigate(`${sequenceUrl}/${nextUnitId}`, { replace: true });
}
}
},
);
// Look at where this is called in componentDidUpdate for more info about its usage
export const checkSequenceUnitMarkerToSequenceUnitRedirect = memoize(
(courseId, sequenceStatus, sequence, unitId, navigate, isPreview) => {
if (sequenceStatus !== 'loaded' || !sequence.id) {
return;
}
const baseUrl = `/course/${courseId}/${sequence.id}`;
const hasUnits = sequence.unitIds?.length > 0;
if (unitId === 'first') {
if (hasUnits) {
if (hasUnits) {
const sequenceUrl = isPreview ? `/preview${baseUrl}` : baseUrl;
if (unitId === 'first') {
const firstUnitId = sequence.unitIds[0];
navigate(`/course/${courseId}/${sequence.id}/${firstUnitId}`, { replace: true });
} else {
// No units... go to general sequence page
navigate(`/course/${courseId}/${sequence.id}`, { replace: true });
}
} else if (unitId === 'last') {
if (hasUnits) {
navigate(`${sequenceUrl}/${firstUnitId}`, { replace: true });
} else if (unitId === 'last') {
const lastUnitId = sequence.unitIds[sequence.unitIds.length - 1];
navigate(`/course/${courseId}/${sequence.id}/${lastUnitId}`, { replace: true });
} else {
// No units... go to general sequence page
navigate(`/course/${courseId}/${sequence.id}`, { replace: true });
navigate(`${sequenceUrl}/${lastUnitId}`, { replace: true });
}
} else {
// No units... go to general sequence page
navigate(baseUrl, { replace: true });
}
},
);
@@ -169,6 +196,7 @@ class CoursewareContainer extends Component {
routeSequenceId,
routeUnitId,
navigate,
isPreview,
} = this.props;
// Load data whenever the course or sequence ID changes.
@@ -197,7 +225,7 @@ class CoursewareContainer extends Component {
// Check resume redirect:
// /course/:courseId -> /course/:courseId/:sequenceId/:unitId
// based on sequence/unit where user was last active.
checkResumeRedirect(courseStatus, courseId, sequenceId, firstSequenceId, navigate);
checkResumeRedirect(courseStatus, courseId, sequenceId, firstSequenceId, navigate, isPreview);
// Check section-unit to unit redirect:
// /course/:courseId/:sectionId/:unitId -> /course/:courseId/:unitId
@@ -210,33 +238,69 @@ class CoursewareContainer extends Component {
// otherwise, we could get stuck in a redirect loop, since a sequence that failed to load
// would endlessly redirect to itself through `checkSectionUnitToUnitRedirect`
// and `checkUnitToSequenceUnitRedirect`.
checkSectionUnitToUnitRedirect(courseStatus, courseId, sequenceStatus, sectionViaSequenceId, routeUnitId, navigate);
checkSectionUnitToUnitRedirect(
courseStatus,
courseId,
sequenceStatus,
sectionViaSequenceId,
routeUnitId,
navigate,
isPreview,
);
// Check section to sequence redirect:
// /course/:courseId/:sectionId -> /course/:courseId/:sequenceId
// by redirecting to the first sequence within the section.
checkSectionToSequenceRedirect(courseStatus, courseId, sequenceStatus, sectionViaSequenceId, routeUnitId, navigate);
checkSectionToSequenceRedirect(
courseStatus,
courseId,
sequenceStatus,
sectionViaSequenceId,
routeUnitId,
navigate,
);
// Check unit to sequence-unit redirect:
// /course/:courseId/:unitId -> /course/:courseId/:sequenceId/:unitId
// by filling in the ID of the parent sequence of :unitId.
checkUnitToSequenceUnitRedirect((
courseStatus, courseId, sequenceStatus, sequenceMightBeUnit,
sequenceId, sectionViaSequenceId, routeUnitId, navigate
));
checkUnitToSequenceUnitRedirect(
courseStatus,
courseId,
sequenceStatus,
sequenceMightBeUnit,
sequenceId,
sectionViaSequenceId,
routeUnitId,
navigate,
isPreview,
);
// Check sequence to sequence-unit redirect:
// /course/:courseId/:sequenceId -> /course/:courseId/:sequenceId/:unitId
// by filling in the ID the most-recently-active unit in the sequence, OR
// the ID of the first unit the sequence if none is active.
checkSequenceToSequenceUnitRedirect(courseId, sequenceStatus, sequence, routeUnitId, navigate);
checkSequenceToSequenceUnitRedirect(
courseId,
sequenceStatus,
sequence,
routeUnitId,
navigate,
isPreview,
);
// Check sequence-unit marker to sequence-unit redirect:
// /course/:courseId/:sequenceId/first -> /course/:courseId/:sequenceId/:unitId
// /course/:courseId/:sequenceId/last -> /course/:courseId/:sequenceId/:unitId
// by filling in the ID the first or last unit in the sequence.
// "Sequence unit marker" is an invented term used only in this component.
checkSequenceUnitMarkerToSequenceUnitRedirect(courseId, sequenceStatus, sequence, routeUnitId, navigate);
checkSequenceUnitMarkerToSequenceUnitRedirect(
courseId,
sequenceStatus,
sequence,
routeUnitId,
navigate,
isPreview,
);
}
handleUnitNavigationClick = () => {
@@ -334,6 +398,7 @@ CoursewareContainer.propTypes = {
fetchCourse: PropTypes.func.isRequired,
fetchSequence: PropTypes.func.isRequired,
navigate: PropTypes.func.isRequired,
isPreview: PropTypes.bool.isRequired,
};
CoursewareContainer.defaultProps = {

845
src/courseware/CoursewareContainer.test.jsx
View File

@@ -16,11 +16,19 @@ import tabMessages from '../tab-page/messages';
import { initializeMockApp, waitFor } from '../setupTest';
import { DECODE_ROUTES } from '../constants';
import CoursewareContainer from './CoursewareContainer';
import CoursewareContainer, {
checkResumeRedirect,
checkSectionToSequenceRedirect,
checkSectionUnitToUnitRedirect,
checkSequenceToSequenceUnitRedirect,
checkSequenceUnitMarkerToSequenceUnitRedirect,
checkUnitToSequenceUnitRedirect,
} from './CoursewareContainer';
import { buildSimpleCourseBlocks, buildBinaryCourseBlocks } from '../shared/data/__factories__/courseBlocks.factory';
import initializeStore from '../store';
import { appendBrowserTimezoneToUrl } from '../utils';
import { buildOutlineFromBlocks } from './data/__factories__/learningSequencesOutline.factory';
import { getSequenceForUnitDeprecatedUrl } from './data/api';
// NOTE: Because the unit creates an iframe, we choose to mock it out as its rendering isn't
// pertinent to this test. Instead, we render a simple div that displays the properties we expect
@@ -525,3 +533,838 @@ describe('CoursewareContainer', () => {
});
});
});
describe('Course redirect functions', () => {
let navigate;
let axiosMock;
beforeEach(() => {
navigate = jest.fn();
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
});
describe('isPreview equals true', () => {
describe('checkSequenceUnitMarkerToSequenceUnitRedirect', () => {
it('return when sequence is not loaded', () => {
checkSequenceUnitMarkerToSequenceUnitRedirect(
'courseId',
'loading',
{ id: 'sequence_1', unitIds: ['unit_1'] },
'first',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('return when sequence id is null', () => {
checkSequenceUnitMarkerToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: null, unitIds: ['unit_1'] },
'first',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('calls navigate with first unit id', () => {
checkSequenceUnitMarkerToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'] },
'first',
navigate,
true,
);
const expectedUrl = '/preview/course/courseId/sequence_1/unit_1';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
it('calls navigate with last unit id', () => {
checkSequenceUnitMarkerToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'] },
'last',
navigate,
true,
);
const expectedUrl = '/preview/course/courseId/sequence_1/unit_2';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
describe('checkSequenceToSequenceUnitRedirect', () => {
it('calls navigate with next unit id', () => {
checkSequenceToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'], activeUnitIndex: 0 },
null,
navigate,
true,
);
const expectedUrl = '/preview/course/courseId/sequence_1/unit_1';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
it('returns when sequence status is loading', () => {
checkSequenceToSequenceUnitRedirect(
'courseId',
'loading',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'], activeUnitIndex: 0 },
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when sequence id is null', () => {
checkSequenceToSequenceUnitRedirect(
'courseId',
'loading',
{ unitIds: ['unit_1', 'unit_2'], activeUnitIndex: 0 },
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when unit id is defined', () => {
checkSequenceToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'], activeUnitIndex: 0 },
'unit_2',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when unit ids are undefiend', () => {
checkSequenceToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', activeUnitIndex: 0 },
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
});
describe('checkUnitToSequenceUnitRedirect', () => {
const { href: apiUrl } = getSequenceForUnitDeprecatedUrl('courseId');
it('calls navigate with parentId and sequenceId', () => {
const getSequenceForUnitDeprecated = jest.fn();
axiosMock.onGet(apiUrl).reply(200, {
blocks: [{
id: 'sequence_1',
type: 'sequential',
children: ['unit_1'],
}],
});
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
const expectedUrl = '/course/courseId/sequence_1';
waitFor(() => {
expect(getSequenceForUnitDeprecated).toHaveBeenCalled();
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('calls navigate to course page when getSequenceForUnitDeprecated errors', () => {
const getSequenceForUnitDeprecated = jest.fn();
axiosMock.onGet(apiUrl).reply(404);
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
const expectedUrl = '/course/courseId';
waitFor(() => {
expect(getSequenceForUnitDeprecated).toHaveBeenCalled();
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('calls navigate to course page when no parent id is returned', () => {
const getSequenceForUnitDeprecated = jest.fn();
axiosMock.onGet(apiUrl).reply(200, {
blocks: [{
id: 'sequence_1',
type: 'sequential',
children: ['block_1'],
}],
});
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
const expectedUrl = '/course/courseId';
waitFor(() => {
expect(getSequenceForUnitDeprecated).toHaveBeenCalled();
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('calls navigate to course page when sequnce is not unit', () => {
const getSequenceForUnitDeprecated = jest.fn();
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'failed',
false,
'unit_1',
false,
null,
navigate,
true,
);
const expectedUrl = '/course/courseId';
waitFor(() => {
expect(getSequenceForUnitDeprecated).not.toHaveBeenCalled();
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('returns when course status is loading', () => {
checkUnitToSequenceUnitRedirect(
'loading',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when sequence status is not failed', () => {
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
'unit_1',
false,
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when section is defined', () => {
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
'unit_1',
true,
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when routeUnitId is defined', () => {
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
'unit_1',
false,
'unit_1',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
});
describe('checkSectionUnitToUnitRedirect', () => {
it('calls navigate with unitId', () => {
checkSectionUnitToUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_2',
navigate,
true,
);
const expectedUrl = '/preview/course/courseId/unit_2';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
it('returns when course status is loading', () => {
checkSectionUnitToUnitRedirect(
'loading',
'courseId',
'loaded',
true,
'unit_2',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when sequence status is loading', () => {
checkSectionUnitToUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
'unit_2',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when section is null', () => {
checkSectionUnitToUnitRedirect(
'loaded',
'courseId',
'loaded',
null,
'unit_2',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when unitId is null', () => {
checkSectionUnitToUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
});
describe('checkResumeRedirect', () => {
it('calls navigate with unitId', () => {
axiosMock.onGet(
`${getConfig().LMS_BASE_URL}/api/courseware/resume/courseId`,
).reply(200, {
section_id: 'section_1',
unitId: 'unit_1',
});
checkResumeRedirect(
'loaded',
'courseId',
null,
'sequence_1',
navigate,
true,
);
const expectedUrl = '/preview/course/courseId/section_1/unit_1';
waitFor(() => {
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('calls navigate with firstSequenceId', () => {
axiosMock.onGet(
`${getConfig().LMS_BASE_URL}/api/courseware/resume/courseId`,
).reply(200, {
section_id: 'section_1',
first_sequence_id: 'sequence_1',
});
checkResumeRedirect(
'loaded',
'courseId',
null,
'sequence_1',
navigate,
true,
);
const expectedUrl = '/course/courseId/sequence_1';
waitFor(() => {
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('returns after calling getResumeBlock', () => {
const getResumeBlock = jest.fn();
axiosMock.onGet(
`${getConfig().LMS_BASE_URL}/api/courseware/resume/courseId`,
).reply(200, {
course_id: 'courseId',
});
checkResumeRedirect(
'loaded',
'courseId',
null,
'sequence_1',
navigate,
true,
);
waitFor(() => {
expect(getResumeBlock).toHaveBeenCalled();
expect(navigate).not.toHaveBeenCalled();
});
});
it('returns when course status is loading', () => {
checkResumeRedirect(
'loading',
'courseId',
null,
'sequence_1',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when sequenceId is defined', () => {
checkResumeRedirect(
'loaded',
'courseId',
'sequence_3',
'sequence_1',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when getResumeBlock throws error', () => {
const getResumeBlock = jest.fn();
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/courseId`).reply(404);
checkResumeRedirect(
'loaded',
'courseId',
null,
'sequence_1',
navigate,
true,
);
waitFor(() => {
expect(getResumeBlock).toHaveBeenCalled();
expect(navigate).not.toHaveBeenCalled();
});
});
});
});
describe('isPreview equals false', () => {
describe('checkSectionToSequenceRedirect', () => {
it('calls navigate with section based sequence id', () => {
checkSectionToSequenceRedirect(
'loaded',
'courseId',
'failed',
{ sequenceIds: ['sequence_1'] },
null,
navigate,
);
const expectedUrl = '/course/courseId/sequence_1';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
it('calls navigate with course id only', () => {
checkSectionToSequenceRedirect(
'loaded',
'courseId',
'failed',
{ sequenceIds: [] },
null,
navigate,
);
const expectedUrl = '/course/courseId';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
it('returns when course status is loading', () => {
checkSectionToSequenceRedirect(
'loading',
'courseId',
'failed',
{ sequenceIds: [] },
null,
navigate,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when sequence status is not failed', () => {
checkSectionToSequenceRedirect(
'loaded',
'courseId',
'loading',
{ sequenceIds: [] },
null,
navigate,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when section is not defined', () => {
checkSectionToSequenceRedirect(
'loaded',
'courseId',
'failed',
null,
null,
navigate,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when unitId is defined', () => {
checkSectionToSequenceRedirect(
'loaded',
'courseId',
'failed',
null,
'unit_1',
navigate,
);
expect(navigate).not.toHaveBeenCalled();
});
});
describe('checkResumeRedirect', () => {
it('calls navigate with unitId', () => {
axiosMock.onGet(
`${getConfig().LMS_BASE_URL}/api/courseware/resume/courseId`,
).reply(200, {
section_id: 'section_1',
unitId: 'unit_1',
});
checkResumeRedirect(
'loaded',
'courseId',
null,
'sequence_1',
navigate,
false,
);
const expectedUrl = '/preview/course/courseId/section_1/unit_1';
waitFor(() => {
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('calls navigate with firstSequenceId', () => {
axiosMock.onGet(
`${getConfig().LMS_BASE_URL}/api/courseware/resume/courseId`,
).reply(200, {
section_id: 'section_1',
first_sequence_id: 'sequence_1',
});
checkResumeRedirect(
'loaded',
'courseId',
null,
'sequence_1',
navigate,
false,
);
const expectedUrl = '/course/courseId/sequence_1';
waitFor(() => {
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
});
describe('checkSequenceUnitMarkerToSequenceUnitRedirect', () => {
it('calls navigate with first unit id', () => {
checkSequenceUnitMarkerToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'] },
'first',
navigate,
false,
);
const expectedUrl = '/course/courseId/sequence_1/unit_1';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
it('calls navigate with base url when no unit id', () => {
checkSequenceUnitMarkerToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: [] },
'first',
navigate,
true,
);
const expectedUrl = '/course/courseId/sequence_1';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
it('calls navigate with last unit id', () => {
checkSequenceUnitMarkerToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'] },
'last',
navigate,
false,
);
const expectedUrl = '/course/courseId/sequence_1/unit_2';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
describe('checkSequenceToSequenceUnitRedirect', () => {
it('calls navigate with next unit id', () => {
checkSequenceToSequenceUnitRedirect(
'courseId',
'loaded',
{ id: 'sequence_1', unitIds: ['unit_1', 'unit_2'], activeUnitIndex: 0 },
null,
navigate,
false,
);
const expectedUrl = '/course/courseId/sequence_1/unit_1';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
describe('checkUnitToSequenceUnitRedirect', () => {
const apiUrl = getSequenceForUnitDeprecatedUrl('courseId');
it('calls navigate with parentId and sequenceId', () => {
axiosMock.onGet(apiUrl).reply(200, {
parent: { id: 'sequence_1' },
});
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
const expectedUrl = '/course/courseId/sequence_1';
waitFor(() => {
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('calls navigate to course page when getSequenceForUnitDeprecated errors', () => {
const getSequenceForUnitDeprecated = jest.fn();
axiosMock.onGet(apiUrl).reply(404);
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
const expectedUrl = '/course/courseId';
waitFor(() => {
expect(getSequenceForUnitDeprecated).toHaveBeenCalled();
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('calls navigate to course page when no parent id is returned', () => {
const getSequenceForUnitDeprecated = jest.fn();
axiosMock.onGet(apiUrl).reply(200, {
parent: { children: ['block_1'] },
});
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
const expectedUrl = '/course/courseId';
waitFor(() => {
expect(getSequenceForUnitDeprecated).toHaveBeenCalled();
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
it('returns when course status is loading', () => {
checkUnitToSequenceUnitRedirect(
'loading',
'courseId',
'failed',
true,
'unit_1',
false,
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when sequence status is not failed', () => {
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
'unit_1',
false,
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when section is defined', () => {
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
'unit_1',
true,
null,
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
it('returns when routeUnitId is defined', () => {
checkUnitToSequenceUnitRedirect(
'loaded',
'courseId',
'loaded',
true,
'unit_1',
false,
'unit_1',
navigate,
true,
);
expect(navigate).not.toHaveBeenCalled();
});
});
describe('checkSectionUnitToUnitRedirect', () => {
it('calls navigate with unitId', () => {
checkSectionUnitToUnitRedirect(
'loaded',
'courseId',
'failed',
true,
'unit_2',
navigate,
false,
);
const expectedUrl = '/course/courseId/unit_2';
expect(navigate).toHaveBeenCalledWith(expectedUrl, { replace: true });
});
});
});
});

8
src/courseware/course/Course.jsx
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { useDispatch, useSelector } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { useLocation, useNavigate } from 'react-router-dom';
import { breakpoints, useWindowSize } from '@openedx/paragon';
import { AlertList } from '@src/generic/user-messages';
@@ -38,6 +39,13 @@ const Course = ({
const section = useModel('sections', sequence ? sequence.sectionId : null);
const { enableNavigationSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
const navigationDisabled = enableNavigationSidebar || (sequence?.navigationDisabled ?? false);
const navigate = useNavigate();
const { pathname } = useLocation();
if (!isStaff && pathname.startsWith('/preview')) {
const courseUrl = pathname.replace('/preview', '');
navigate(courseUrl, { replace: true });
}
const pageTitleBreadCrumbs = [
sequence,

1
src/courseware/course/sequence/Sequence.jsx
View File

@@ -204,6 +204,7 @@ const Sequence = ({
sequenceId={sequenceId}
unitId={unitId}
unitLoadedHandler={handleUnitLoaded}
isStaff={isStaff}
/>
{unitHasLoaded && renderUnitNavigation(false)}
</div>

10
src/courseware/course/sequence/SequenceContent.jsx
View File

@@ -1,6 +1,6 @@
import React, { Suspense, useEffect } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import PageLoading from '../../../generic/PageLoading';
import { useModel } from '../../../generic/model-store';
@@ -11,12 +11,13 @@ const ContentLock = React.lazy(() => import('./content-lock'));
const SequenceContent = ({
gated,
intl,
courseId,
sequenceId,
unitId,
unitLoadedHandler,
isStaff,
}) => {
const intl = useIntl();
const sequence = useModel('sequences', sequenceId);
// Go back to the top of the page whenever the unit or sequence changes.
@@ -59,6 +60,7 @@ const SequenceContent = ({
key={unitId}
id={unitId}
onLoaded={unitLoadedHandler}
isStaff={isStaff}
/>
);
};
@@ -69,11 +71,11 @@ SequenceContent.propTypes = {
sequenceId: PropTypes.string.isRequired,
unitId: PropTypes.string,
unitLoadedHandler: PropTypes.func.isRequired,
intl: intlShape.isRequired,
isStaff: PropTypes.bool.isRequired,
};
SequenceContent.defaultProps = {
unitId: null,
};
export default injectIntl(SequenceContent);
export default SequenceContent;

7
src/courseware/course/sequence/Unit/index.jsx
View File

@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams, useLocation } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { useIntl } from '@edx/frontend-platform/i18n';
@@ -22,15 +22,18 @@ const Unit = ({
format,
onLoaded,
id,
isStaff,
}) => {
const { formatMessage } = useIntl();
const [searchParams] = useSearchParams();
const { pathname } = useLocation();
const { authenticatedUser } = React.useContext(AppContext);
const examAccess = useExamAccess({ id });
const shouldDisplayHonorCode = useShouldDisplayHonorCode({ courseId, id });
const unit = useModel(modelKeys.units, id);
const isProcessing = unit.bookmarkedUpdateState === 'loading';
const view = authenticatedUser ? views.student : views.public;
const shouldDisplayUnitPreview = pathname.startsWith('/preview') && isStaff;
const getUrl = usePluginsCallback('getIFrameUrl', () => getIFrameUrl({
id,
@@ -38,6 +41,7 @@ const Unit = ({
format,
examAccess,
jumpToId: searchParams.get('jumpToId'),
preview: shouldDisplayUnitPreview ? '1' : '0',
}));
const iframeUrl = getUrl();
@@ -74,6 +78,7 @@ Unit.propTypes = {
format: PropTypes.string,
id: PropTypes.string.isRequired,
onLoaded: PropTypes.func,
isStaff: PropTypes.bool.isRequired,
};
Unit.defaultProps = {

4
src/courseware/course/sequence/Unit/index.test.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { when } from 'jest-when';
import { formatMessage, shallow } from '@edx/react-unit-test-utils/dist';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams, useLocation } from 'react-router-dom';
import { useModel } from '@src/generic/model-store';
@@ -55,6 +55,7 @@ const props = {
format: 'test-format',
onLoaded: jest.fn().mockName('props.onLoaded'),
id: 'test-props-id',
isStaff: false,
};
const context = { authenticatedUser: { test: 'user' } };
@@ -89,6 +90,7 @@ describe('Unit component', () => {
beforeEach(() => {
useSearchParams.mockImplementation(() => [searchParams, setSearchParams]);
useLocation.mockImplementation(() => ({ pathname: `/course/${props.courseId}` }));
jest.clearAllMocks();
el = shallow(<Unit {...props} />);
});

2
src/courseware/course/sequence/Unit/urls.js
View File

@@ -13,6 +13,7 @@ export const getIFrameUrl = ({
format,
examAccess,
jumpToId,
preview,
}) => {
const xblockUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}`;
return stringifyUrl({
@@ -20,6 +21,7 @@ export const getIFrameUrl = ({
query: {
...iframeParams,
view,
preview,
...(format && { format }),
...(!examAccess.blockAccess && { exam_access: examAccess.accessToken }),
jumpToId, // Pass jumpToId as query param as fragmentIdentifier is not passed to server.

22
src/courseware/course/sequence/Unit/urls.test.js
View File

@@ -17,6 +17,7 @@ const props = {
view: 'test-view',
format: 'test-format',
examAccess: { blockAccess: false, accessToken: 'test-access-token' },
preview: false,
};
describe('urls module getIFrameUrl', () => {
@@ -28,6 +29,7 @@ describe('urls module getIFrameUrl', () => {
view: props.view,
format: props.format,
exam_access: props.examAccess.accessToken,
preview: props.preview,
},
});
expect(getIFrameUrl(props)).toEqual(url);
@@ -35,11 +37,12 @@ describe('urls module getIFrameUrl', () => {
test('no format provided, exam access blocked', () => {
const url = stringifyUrl({
url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
query: { ...iframeParams, view: props.view },
query: { ...iframeParams, view: props.view, preview: props.preview },
});
expect(getIFrameUrl({
id: props.id,
view: props.view,
preview: props.preview,
examAccess: { blockAccess: true },
})).toEqual(url);
});
@@ -50,6 +53,7 @@ describe('urls module getIFrameUrl', () => {
...iframeParams,
view: props.view,
format: props.format,
preview: props.preview,
exam_access: props.examAccess.accessToken,
jumpToId: 'some-xblock-id',
},
@@ -60,4 +64,20 @@ describe('urls module getIFrameUrl', () => {
jumpToId: 'some-xblock-id',
})).toEqual(url);
});
test('preview is true and url param equals 1', () => {
const url = stringifyUrl({
url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
query: {
...iframeParams,
view: props.view,
format: props.format,
preview: true,
exam_access: props.examAccess.accessToken,
},
});
expect(getIFrameUrl({
...props,
preview: true,
})).toEqual(url);
});
});

64
src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
View File

@@ -1,15 +1,8 @@
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { breakpoints, Button, useWindowSize } from '@openedx/paragon';
import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';
import { breakpoints, useWindowSize } from '@openedx/paragon';
import classNames from 'classnames';
import {
injectIntl,
intlShape,
isRtl,
getLocale,
} from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { useSelector } from 'react-redux';
@@ -21,9 +14,10 @@ import { useSequenceNavigationMetadata } from './hooks';
import { useModel } from '../../../../generic/model-store';
import messages from './messages';
import PreviousButton from './generic/PreviousButton';
import NextButton from './generic/NextButton';
const SequenceNavigation = ({
intl,
unitId,
sequenceId,
className,
@@ -36,6 +30,7 @@ const SequenceNavigation = ({
open,
close,
}) => {
const intl = useIntl();
const sequence = useModel('sequences', sequenceId);
const {
isFirstUnit,
@@ -76,29 +71,21 @@ const SequenceNavigation = ({
);
};
const renderPreviousButton = () => {
const disabled = isFirstUnit;
const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
return navigationDisabledPrevSequence || (
<Button
variant="link"
className="previous-btn"
onClick={previousHandler}
disabled={disabled}
iconBefore={prevArrow}
as={disabled ? undefined : Link}
to={disabled ? undefined : previousLink}
>
{shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
</Button>
);
};
const renderPreviousButton = () => navigationDisabledPrevSequence || (
<PreviousButton
variant="link"
buttonStyle="previous-btn"
onClick={previousHandler}
previousLink={previousLink}
isFirstUnit={isFirstUnit}
buttonLabel={shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
/>
);
const renderNextButton = () => {
const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl);
const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
const disabled = isLastUnit && !exitActive;
const nextArrow = isRtl(getLocale()) ? ChevronLeft : ChevronRight;
return navigationDisabledNextSequence || (
<PluginSlot
@@ -106,10 +93,8 @@ const SequenceNavigation = ({
pluginProps={{
courseId,
disabled,
buttonText,
nextArrow,
buttonText: shouldDisplayNotificationTriggerInSequence ? null : buttonText,
nextLink,
shouldDisplayNotificationTriggerInSequence,
sequenceId,
unitId,
nextSequenceHandler,
@@ -117,20 +102,16 @@ const SequenceNavigation = ({
isOpen,
open,
close,
linkComponent: Link,
}}
>
<Button
<NextButton
variant="link"
className="next-btn"
buttonStyle="next-btn"
onClick={nextHandler}
nextLink={nextLink}
disabled={disabled}
iconAfter={nextArrow}
as={disabled ? undefined : Link}
to={disabled ? undefined : nextLink}
>
{shouldDisplayNotificationTriggerInSequence ? null : buttonText}
</Button>
buttonLabel={shouldDisplayNotificationTriggerInSequence ? null : buttonText}
/>
</PluginSlot>
);
};
@@ -145,7 +126,6 @@ const SequenceNavigation = ({
};
SequenceNavigation.propTypes = {
intl: intlShape.isRequired,
sequenceId: PropTypes.string.isRequired,
unitId: PropTypes.string,
className: PropTypes.string,
@@ -169,4 +149,4 @@ SequenceNavigation.defaultProps = {
nextSequenceHandler: null,
};
export default injectIntl(SequenceNavigation);
export default SequenceNavigation;

7
src/courseware/course/sequence/sequence-navigation/UnitButton.jsx
View File

@@ -1,5 +1,5 @@
import React, { useCallback } from 'react';
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect, useSelector } from 'react-redux';
import classNames from 'classnames';
@@ -22,6 +22,9 @@ const UnitButton = ({
showTitle,
}) => {
const { courseId, sequenceId } = useSelector(state => state.courseware);
const { pathname } = useLocation();
const basePath = `/course/${courseId}/${sequenceId}/${unitId}`;
const unitPath = pathname.startsWith('/preview') ? `/preview${basePath}` : basePath;
const handleClick = useCallback(() => {
onClick(unitId);
@@ -37,7 +40,7 @@ const UnitButton = ({
onClick={handleClick}
title={title}
as={Link}
to={`/course/${courseId}/${sequenceId}/${unitId}`}
to={unitPath}
>
<UnitIcon type={contentType} />
{showTitle && <span className="unit-title">{title}</span>}

60
src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
View File

@@ -1,70 +1,53 @@
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Button } from '@openedx/paragon';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import {
injectIntl, intlShape, isRtl, getLocale,
} from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { useSelector } from 'react-redux';
import { GetCourseExitNavigation } from '../../course-exit';
import UnitNavigationEffortEstimate from './UnitNavigationEffortEstimate';
import { useSequenceNavigationMetadata } from './hooks';
import messages from './messages';
import PreviousButton from './generic/PreviousButton';
import NextButton from './generic/NextButton';
const UnitNavigation = ({
intl,
sequenceId,
unitId,
onClickPrevious,
onClickNext,
isAtTop,
}) => {
const intl = useIntl();
const {
isFirstUnit, isLastUnit, nextLink, previousLink,
} = useSequenceNavigationMetadata(sequenceId, unitId);
const { courseId } = useSelector(state => state.courseware);
const renderPreviousButton = () => {
const disabled = isFirstUnit;
const prevArrow = isRtl(getLocale()) ? faChevronRight : faChevronLeft;
return (
<Button
variant="outline-secondary"
className="previous-button mr-sm-2 d-flex align-items-center justify-content-center"
disabled={disabled}
onClick={onClickPrevious}
as={disabled ? undefined : Link}
to={disabled ? undefined : previousLink}
>
<FontAwesomeIcon icon={prevArrow} className="mr-2" size="sm" />
{intl.formatMessage(messages.previousButton)}
</Button>
);
};
const renderPreviousButton = () => (
<PreviousButton
isFirstUnit={isFirstUnit}
variant="outline-secondary"
buttonLabel={intl.formatMessage(messages.previousButton)}
buttonStyle="previous-button justify-content-center"
onClick={onClickPrevious}
previousLink={previousLink}
/>
);
const renderNextButton = () => {
const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl);
const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
const disabled = isLastUnit && !exitActive;
const nextArrow = isRtl(getLocale()) ? faChevronLeft : faChevronRight;
return (
<Button
<NextButton
variant="outline-primary"
className="next-button d-flex align-items-center justify-content-center"
buttonStyle="next-button justify-content-center"
onClick={onClickNext}
disabled={disabled}
as={disabled ? undefined : Link}
to={disabled ? undefined : nextLink}
>
<UnitNavigationEffortEstimate sequenceId={sequenceId} unitId={unitId}>
{buttonText}
</UnitNavigationEffortEstimate>
<FontAwesomeIcon icon={nextArrow} className="ml-2" size="sm" />
</Button>
buttonLabel={buttonText}
nextLink={nextLink}
hasEffortEstimate
/>
);
};
@@ -77,7 +60,6 @@ const UnitNavigation = ({
};
UnitNavigation.propTypes = {
intl: intlShape.isRequired,
sequenceId: PropTypes.string.isRequired,
unitId: PropTypes.string,
onClickPrevious: PropTypes.func.isRequired,
@@ -90,4 +72,4 @@ UnitNavigation.defaultProps = {
isAtTop: false,
};
export default injectIntl(UnitNavigation);
export default UnitNavigation;

56
src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx Normal file
View File

@@ -0,0 +1,56 @@
import PropTypes from 'prop-types';
import { Link, useLocation } from 'react-router-dom';
import { Button } from '@openedx/paragon';
import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';
import { isRtl, getLocale } from '@edx/frontend-platform/i18n';
import UnitNavigationEffortEstimate from '../UnitNavigationEffortEstimate';
const NextButton = ({
onClick,
buttonLabel,
nextLink,
variant,
buttonStyle,
disabled,
hasEffortEstimate,
}) => {
const nextArrow = isRtl(getLocale()) ? ChevronLeft : ChevronRight;
const { pathname } = useLocation();
const navLink = pathname.startsWith('/preview') ? `/preview${nextLink}` : nextLink;
const buttonContent = hasEffortEstimate ? (
<UnitNavigationEffortEstimate>
{buttonLabel}
</UnitNavigationEffortEstimate>
) : buttonLabel;
return (
<Button
variant={variant}
className={buttonStyle}
disabled={disabled}
onClick={onClick}
as={disabled ? undefined : Link}
to={disabled ? undefined : navLink}
iconAfter={nextArrow}
>
{buttonContent}
</Button>
);
};
NextButton.defaultProps = {
hasEffortEstimate: false,
};
NextButton.propTypes = {
onClick: PropTypes.func.isRequired,
buttonLabel: PropTypes.string.isRequired,
nextLink: PropTypes.string.isRequired,
variant: PropTypes.string.isRequired,
buttonStyle: PropTypes.string.isRequired,
disabled: PropTypes.bool.isRequired,
hasEffortEstimate: PropTypes.bool,
};
export default NextButton;

44
src/courseware/course/sequence/sequence-navigation/generic/PreviousButton.jsx Normal file
View File

@@ -0,0 +1,44 @@
import PropTypes from 'prop-types';
import { Link, useLocation } from 'react-router-dom';
import { Button } from '@openedx/paragon';
import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';
import { isRtl, getLocale } from '@edx/frontend-platform/i18n';
const PreviousButton = ({
onClick,
buttonLabel,
previousLink,
variant,
buttonStyle,
isFirstUnit,
}) => {
const disabled = isFirstUnit;
const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
const { pathname } = useLocation();
const navLink = pathname.startsWith('/preview') ? `/preview${previousLink}` : previousLink;
return (
<Button
variant={variant}
className={buttonStyle}
disabled={disabled}
onClick={onClick}
as={disabled ? undefined : Link}
to={disabled ? undefined : navLink}
iconBefore={prevArrow}
>
{buttonLabel}
</Button>
);
};
PreviousButton.propTypes = {
onClick: PropTypes.func.isRequired,
buttonLabel: PropTypes.string.isRequired,
previousLink: PropTypes.string.isRequired,
variant: PropTypes.string.isRequired,
buttonStyle: PropTypes.string.isRequired,
isFirstUnit: PropTypes.bool.isRequired,
};
export default PreviousButton;

6
src/courseware/data/api.js
View File

@@ -6,7 +6,7 @@ import {
} from './utils';
// Do not add further calls to this API - we don't like making use of the modulestore if we can help it
export async function getSequenceForUnitDeprecated(courseId, unitId) {
export const getSequenceForUnitDeprecatedUrl = (courseId) => {
const authenticatedUser = getAuthenticatedUser();
const url = new URL(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/`);
url.searchParams.append('course_id', courseId);
@@ -14,6 +14,10 @@ export async function getSequenceForUnitDeprecated(courseId, unitId) {
url.searchParams.append('depth', 3);
url.searchParams.append('requested_fields', 'children,discussions_url');
return url;
};
export async function getSequenceForUnitDeprecated(courseId, unitId) {
const url = getSequenceForUnitDeprecatedUrl(courseId);
const { data } = await getAuthenticatedHttpClient().get(url.href, {});
const parent = Object.values(data.blocks).find(block => block.type === 'sequential' && block.children.includes(unitId));
return parent?.id;

6
src/courseware/utils.jsx
View File

@@ -1,17 +1,21 @@
import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
const withParamsAndNavigation = WrappedComponent => {
const WithParamsNavigationComponent = props => {
const { courseId, sequenceId, unitId } = useParams();
const navigate = useNavigate();
const { pathname } = useLocation();
const isPreview = pathname.startsWith('/preview');
return (
<WrappedComponent
routeCourseId={courseId}
routeSequenceId={sequenceId}
routeUnitId={unitId}
navigate={navigate}
isPreview={isPreview}
{...props}
/>
);