@selfcommunity/react-templates 0.4.5-courses.178 → 0.4.5-courses.180
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Lesson/Lesson.d.ts +0 -5
- package/lib/cjs/components/Lesson/Lesson.js +35 -45
- package/lib/esm/components/Lesson/Lesson.d.ts +0 -5
- package/lib/esm/components/Lesson/Lesson.js +36 -46
- package/lib/umd/{649.js → 461.js} +2 -2
- package/lib/umd/react-templates.js +1 -1
- package/package.json +6 -6
- /package/lib/umd/{649.js.LICENSE.txt → 461.js.LICENSE.txt} +0 -0
|
@@ -34,20 +34,20 @@ const Container = (0, styles_1.styled)(material_1.Box, {
|
|
|
34
34
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
35
35
|
})(() => ({}));
|
|
36
36
|
function Lesson(inProps) {
|
|
37
|
-
var _a, _b, _c
|
|
37
|
+
var _a, _b, _c;
|
|
38
38
|
// PROPS
|
|
39
39
|
const props = (0, system_1.useThemeProps)({
|
|
40
40
|
props: inProps,
|
|
41
41
|
name: constants_1.PREFIX
|
|
42
42
|
});
|
|
43
|
-
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {},
|
|
43
|
+
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = tslib_1.__rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
44
44
|
// HOOKS
|
|
45
45
|
const theme = (0, material_1.useTheme)();
|
|
46
46
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
47
47
|
const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
|
|
48
48
|
const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
|
|
49
49
|
const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
50
|
-
const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, params: { view:
|
|
50
|
+
const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, params: { view: editMode ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER } });
|
|
51
51
|
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
|
|
52
52
|
// STATE
|
|
53
53
|
const [activePanel, setActivePanel] = (0, react_1.useState)(null);
|
|
@@ -57,28 +57,28 @@ function Lesson(inProps) {
|
|
|
57
57
|
const [lessonMedias, setLessonMedias] = (0, react_1.useState)((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
|
|
58
58
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
59
59
|
const [completed, setCompleted] = (0, react_1.useState)(null);
|
|
60
|
-
const
|
|
61
|
-
if (!scCourse ||
|
|
62
|
-
return
|
|
63
|
-
return (
|
|
64
|
-
}, [scCourse
|
|
65
|
-
const [
|
|
66
|
-
const [
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
|
|
70
|
-
(currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_b = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _b === void 0 ? void 0 : _b.length) - 1) ||
|
|
71
|
-
(currentLessonIndex < ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1
|
|
72
|
-
? (_d = currentSection.lessons[currentLessonIndex + 1]) === null || _d === void 0 ? void 0 : _d.locked
|
|
73
|
-
: (_f = (_e = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _e === void 0 ? void 0 : _e.lessons[0]) === null || _f === void 0 ? void 0 : _f.locked);
|
|
60
|
+
const availableLessons = (0, react_1.useMemo)(() => {
|
|
61
|
+
if (!(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections))
|
|
62
|
+
return [];
|
|
63
|
+
return scCourse.sections.flatMap((section) => section.lessons.map((lesson) => (Object.assign(Object.assign({}, lesson), { section }))));
|
|
64
|
+
}, [scCourse]);
|
|
65
|
+
const [currentLessonIndex, setCurrentLessonIndex] = (0, react_1.useState)(availableLessons.findIndex((lesson) => lesson.id === lessonId));
|
|
66
|
+
const [currentSection, setCurrentSection] = (0, react_1.useState)(((_b = availableLessons[currentLessonIndex]) === null || _b === void 0 ? void 0 : _b.section) || null);
|
|
67
|
+
const isPrevDisabled = availableLessons.length === 0 || currentLessonIndex <= 0;
|
|
68
|
+
const isNextDisabled = availableLessons.length === 0 || currentLessonIndex >= availableLessons.length - 1 || ((_c = availableLessons[currentLessonIndex + 1]) === null || _c === void 0 ? void 0 : _c.locked);
|
|
74
69
|
const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
|
|
75
70
|
const isCourseAdmin = (0, react_1.useMemo)(() => scCourse && scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR, [scCourse]);
|
|
76
71
|
//EFFECTS
|
|
77
72
|
(0, react_1.useEffect)(() => {
|
|
78
|
-
|
|
79
|
-
|
|
73
|
+
const index = availableLessons.findIndex((lesson) => lesson.id === lessonId);
|
|
74
|
+
setCurrentLessonIndex(index);
|
|
75
|
+
}, [lessonId, availableLessons]);
|
|
76
|
+
(0, react_1.useEffect)(() => {
|
|
77
|
+
var _a;
|
|
78
|
+
if (availableLessons.length > 0 && currentLessonIndex >= 0) {
|
|
79
|
+
setCurrentSection(((_a = availableLessons[currentLessonIndex]) === null || _a === void 0 ? void 0 : _a.section) || null);
|
|
80
80
|
}
|
|
81
|
-
}, [
|
|
81
|
+
}, [currentLessonIndex, availableLessons]);
|
|
82
82
|
(0, react_1.useEffect)(() => {
|
|
83
83
|
if (scLesson) {
|
|
84
84
|
setCompleted(scLesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED);
|
|
@@ -142,35 +142,25 @@ function Lesson(inProps) {
|
|
|
142
142
|
* Handles prev lesson navigation
|
|
143
143
|
*/
|
|
144
144
|
const handlePrev = () => {
|
|
145
|
-
if (
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
const prevSection = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[prevSectionIndex];
|
|
153
|
-
const newLessonIndex = prevSection.lessons.length - 1;
|
|
154
|
-
setCurrentSectionIndex(prevSectionIndex);
|
|
155
|
-
setCurrentLessonIndex(newLessonIndex);
|
|
156
|
-
handleChangeLesson(prevSection.lessons[newLessonIndex], prevSection);
|
|
157
|
-
}
|
|
145
|
+
if (isPrevDisabled)
|
|
146
|
+
return;
|
|
147
|
+
const newLessonIndex = currentLessonIndex - 1;
|
|
148
|
+
const newLesson = availableLessons[newLessonIndex];
|
|
149
|
+
setCurrentLessonIndex(newLessonIndex);
|
|
150
|
+
setCurrentSection(newLesson.section);
|
|
151
|
+
handleChangeLesson(newLesson, newLesson.section);
|
|
158
152
|
};
|
|
159
153
|
/**
|
|
160
154
|
* Handles next lesson navigation
|
|
161
155
|
*/
|
|
162
156
|
const handleNext = () => {
|
|
163
|
-
if (
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
setCurrentSectionIndex(newSectionIndex);
|
|
171
|
-
setCurrentLessonIndex(0);
|
|
172
|
-
handleChangeLesson(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[newSectionIndex].lessons[0], scCourse.sections[newSectionIndex]);
|
|
173
|
-
}
|
|
157
|
+
if (isNextDisabled)
|
|
158
|
+
return;
|
|
159
|
+
const newLessonIndex = currentLessonIndex + 1;
|
|
160
|
+
const newLesson = availableLessons[newLessonIndex];
|
|
161
|
+
setCurrentLessonIndex(newLessonIndex);
|
|
162
|
+
setCurrentSection(newLesson.section);
|
|
163
|
+
handleChangeLesson(newLesson, newLesson.section);
|
|
174
164
|
};
|
|
175
165
|
/**
|
|
176
166
|
* Handles toggle lesson complete/uncompleted
|
|
@@ -208,6 +198,6 @@ function Lesson(inProps) {
|
|
|
208
198
|
if (!scLesson || !scCourse) {
|
|
209
199
|
return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
|
|
210
200
|
}
|
|
211
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to:
|
|
201
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: availableLessons.length } }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigationTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }) }))] })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isCourseAdmin && !editMode && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: toggleLessonCompletion }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === react_ui_1.SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && (0, jsx_runtime_1.jsx)(react_ui_1.CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
|
|
212
202
|
}
|
|
213
203
|
exports.default = Lesson;
|
|
@@ -8,7 +8,7 @@ import { PREFIX } from './constants';
|
|
|
8
8
|
import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
|
|
9
9
|
import { useSCFetchCourse, useSCFetchLesson } from '@selfcommunity/react-core';
|
|
10
10
|
import classNames from 'classnames';
|
|
11
|
-
import { CourseCompletedDialog,
|
|
11
|
+
import { CourseCompletedDialog, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
|
|
12
12
|
import { CourseInfoViewType, CourseService } from '@selfcommunity/api-services';
|
|
13
13
|
import { FormattedMessage } from 'react-intl';
|
|
14
14
|
import { LoadingButton } from '@mui/lab';
|
|
@@ -32,20 +32,20 @@ const Container = styled(Box, {
|
|
|
32
32
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
33
33
|
})(() => ({}));
|
|
34
34
|
export default function Lesson(inProps) {
|
|
35
|
-
var _a, _b, _c
|
|
35
|
+
var _a, _b, _c;
|
|
36
36
|
// PROPS
|
|
37
37
|
const props = useThemeProps({
|
|
38
38
|
props: inProps,
|
|
39
39
|
name: PREFIX
|
|
40
40
|
});
|
|
41
|
-
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {},
|
|
41
|
+
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
42
42
|
// HOOKS
|
|
43
43
|
const theme = useTheme();
|
|
44
44
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
45
45
|
const [_lessonId, setLessonId] = useState(lessonId);
|
|
46
46
|
const [_sectionId, setSectionId] = useState(sectionId);
|
|
47
47
|
const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
48
|
-
const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, params: { view:
|
|
48
|
+
const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, params: { view: editMode ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
|
|
49
49
|
const { enqueueSnackbar } = useSnackbar();
|
|
50
50
|
// STATE
|
|
51
51
|
const [activePanel, setActivePanel] = useState(null);
|
|
@@ -55,28 +55,28 @@ export default function Lesson(inProps) {
|
|
|
55
55
|
const [lessonMedias, setLessonMedias] = useState((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
|
|
56
56
|
const [loading, setLoading] = useState(false);
|
|
57
57
|
const [completed, setCompleted] = useState(null);
|
|
58
|
-
const
|
|
59
|
-
if (!scCourse ||
|
|
60
|
-
return
|
|
61
|
-
return
|
|
62
|
-
}, [scCourse
|
|
63
|
-
const [
|
|
64
|
-
const [
|
|
65
|
-
const
|
|
66
|
-
const
|
|
67
|
-
const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
|
|
68
|
-
(currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_b = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _b === void 0 ? void 0 : _b.length) - 1) ||
|
|
69
|
-
(currentLessonIndex < ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1
|
|
70
|
-
? (_d = currentSection.lessons[currentLessonIndex + 1]) === null || _d === void 0 ? void 0 : _d.locked
|
|
71
|
-
: (_f = (_e = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _e === void 0 ? void 0 : _e.lessons[0]) === null || _f === void 0 ? void 0 : _f.locked);
|
|
58
|
+
const availableLessons = useMemo(() => {
|
|
59
|
+
if (!(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections))
|
|
60
|
+
return [];
|
|
61
|
+
return scCourse.sections.flatMap((section) => section.lessons.map((lesson) => (Object.assign(Object.assign({}, lesson), { section }))));
|
|
62
|
+
}, [scCourse]);
|
|
63
|
+
const [currentLessonIndex, setCurrentLessonIndex] = useState(availableLessons.findIndex((lesson) => lesson.id === lessonId));
|
|
64
|
+
const [currentSection, setCurrentSection] = useState(((_b = availableLessons[currentLessonIndex]) === null || _b === void 0 ? void 0 : _b.section) || null);
|
|
65
|
+
const isPrevDisabled = availableLessons.length === 0 || currentLessonIndex <= 0;
|
|
66
|
+
const isNextDisabled = availableLessons.length === 0 || currentLessonIndex >= availableLessons.length - 1 || ((_c = availableLessons[currentLessonIndex + 1]) === null || _c === void 0 ? void 0 : _c.locked);
|
|
72
67
|
const [openDialog, setOpenDialog] = useState(false);
|
|
73
68
|
const isCourseAdmin = useMemo(() => scCourse && scCourse.join_status === SCCourseJoinStatusType.CREATOR, [scCourse]);
|
|
74
69
|
//EFFECTS
|
|
75
70
|
useEffect(() => {
|
|
76
|
-
|
|
77
|
-
|
|
71
|
+
const index = availableLessons.findIndex((lesson) => lesson.id === lessonId);
|
|
72
|
+
setCurrentLessonIndex(index);
|
|
73
|
+
}, [lessonId, availableLessons]);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
var _a;
|
|
76
|
+
if (availableLessons.length > 0 && currentLessonIndex >= 0) {
|
|
77
|
+
setCurrentSection(((_a = availableLessons[currentLessonIndex]) === null || _a === void 0 ? void 0 : _a.section) || null);
|
|
78
78
|
}
|
|
79
|
-
}, [
|
|
79
|
+
}, [currentLessonIndex, availableLessons]);
|
|
80
80
|
useEffect(() => {
|
|
81
81
|
if (scLesson) {
|
|
82
82
|
setCompleted(scLesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED);
|
|
@@ -140,35 +140,25 @@ export default function Lesson(inProps) {
|
|
|
140
140
|
* Handles prev lesson navigation
|
|
141
141
|
*/
|
|
142
142
|
const handlePrev = () => {
|
|
143
|
-
if (
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
const prevSection = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[prevSectionIndex];
|
|
151
|
-
const newLessonIndex = prevSection.lessons.length - 1;
|
|
152
|
-
setCurrentSectionIndex(prevSectionIndex);
|
|
153
|
-
setCurrentLessonIndex(newLessonIndex);
|
|
154
|
-
handleChangeLesson(prevSection.lessons[newLessonIndex], prevSection);
|
|
155
|
-
}
|
|
143
|
+
if (isPrevDisabled)
|
|
144
|
+
return;
|
|
145
|
+
const newLessonIndex = currentLessonIndex - 1;
|
|
146
|
+
const newLesson = availableLessons[newLessonIndex];
|
|
147
|
+
setCurrentLessonIndex(newLessonIndex);
|
|
148
|
+
setCurrentSection(newLesson.section);
|
|
149
|
+
handleChangeLesson(newLesson, newLesson.section);
|
|
156
150
|
};
|
|
157
151
|
/**
|
|
158
152
|
* Handles next lesson navigation
|
|
159
153
|
*/
|
|
160
154
|
const handleNext = () => {
|
|
161
|
-
if (
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
setCurrentSectionIndex(newSectionIndex);
|
|
169
|
-
setCurrentLessonIndex(0);
|
|
170
|
-
handleChangeLesson(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[newSectionIndex].lessons[0], scCourse.sections[newSectionIndex]);
|
|
171
|
-
}
|
|
155
|
+
if (isNextDisabled)
|
|
156
|
+
return;
|
|
157
|
+
const newLessonIndex = currentLessonIndex + 1;
|
|
158
|
+
const newLesson = availableLessons[newLessonIndex];
|
|
159
|
+
setCurrentLessonIndex(newLessonIndex);
|
|
160
|
+
setCurrentSection(newLesson.section);
|
|
161
|
+
handleChangeLesson(newLesson, newLesson.section);
|
|
172
162
|
};
|
|
173
163
|
/**
|
|
174
164
|
* Handles toggle lesson complete/uncompleted
|
|
@@ -206,5 +196,5 @@ export default function Lesson(inProps) {
|
|
|
206
196
|
if (!scLesson || !scCourse) {
|
|
207
197
|
return _jsx(HiddenPlaceholder, {});
|
|
208
198
|
}
|
|
209
|
-
return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to:
|
|
199
|
+
return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: availableLessons.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isCourseAdmin && !editMode && (_jsx(LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && _jsx(Icon, { children: "arrow_next" }), endIcon: completed && _jsx(Icon, { children: "circle_checked" }), onClick: toggleLessonCompletion }, { children: completed ? (_jsx(FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : (_jsx(FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && _jsx(CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
|
|
210
200
|
}
|