@selfcommunity/react-templates 0.4.5-courses.173 → 0.4.5-courses.175

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.
Files changed (4) hide show
  1. package/lib/cjs/components/Lesson/Lesson.js +10 -5
  2. package/lib/esm/components/Lesson/Lesson.js +10 -5
  3. package/lib/umd/react-templates.js +1 -1
  4. package/package.json +6 -6
package/lib/cjs/components/Lesson/Lesson.js CHANGED
@@ -56,7 +56,7 @@ function Lesson(inProps) {
56
56
  const [lessonContent, setLessonContent] = (0, react_1.useState)('');
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
- const [completed, setCompleted] = (0, react_1.useState)((scLesson === null || scLesson === void 0 ? void 0 : scLesson.completion_status) === types_1.SCCourseLessonCompletionStatusType.COMPLETED);
59
+ const [completed, setCompleted] = (0, react_1.useState)(null);
60
60
  const currentData = (0, react_1.useMemo)(() => {
61
61
  if (!scCourse || !scLesson)
62
62
  return null;
@@ -78,6 +78,11 @@ function Lesson(inProps) {
78
78
  setCurrentSection(scCourse.sections[currentData.currentSectionIndex] || null);
79
79
  }
80
80
  }, [scCourse, currentData]);
81
+ (0, react_1.useEffect)(() => {
82
+ if (scLesson) {
83
+ setCompleted(scLesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED);
84
+ }
85
+ }, [scLesson]);
81
86
  // HANDLERS
82
87
  /**
83
88
  * Handles lesson settings change
@@ -169,17 +174,17 @@ function Lesson(inProps) {
169
174
  /**
170
175
  * Handles toggle lesson complete/uncompleted
171
176
  */
172
- const toggleLessonCompletion = (c) => {
177
+ const toggleLessonCompletion = () => {
173
178
  setLoading(true);
174
179
  const service = completed
175
180
  ? () => api_services_1.CourseService.markLessonIncomplete(scLesson.course_id, scLesson.section_id, scLesson.id)
176
181
  : () => api_services_1.CourseService.markLessonComplete(scLesson.course_id, scLesson.section_id, scLesson.id);
177
182
  service()
178
183
  .then(() => {
179
- setCompleted(!c);
184
+ setCompleted(!completed);
180
185
  setLoading(false);
181
186
  const updatedCourse = Object.assign(Object.assign({}, scCourse), { sections: scCourse.sections.map((section) => (Object.assign(Object.assign({}, section), { lessons: section.lessons.map((lesson) => lesson.id === scLesson.id
182
- ? Object.assign(Object.assign({}, lesson), { completion_status: c ? types_1.SCCourseLessonCompletionStatusType.UNCOMPLETED : types_1.SCCourseLessonCompletionStatusType.COMPLETED }) : lesson) }))), num_lessons_completed: c ? scCourse.num_lessons_completed - 1 : scCourse.num_lessons_completed + 1 });
187
+ ? Object.assign(Object.assign({}, lesson), { completion_status: completed ? types_1.SCCourseLessonCompletionStatusType.UNCOMPLETED : types_1.SCCourseLessonCompletionStatusType.COMPLETED }) : lesson) }))), num_lessons_completed: completed ? scCourse.num_lessons_completed - 1 : scCourse.num_lessons_completed + 1 });
183
188
  setSCCourse(updatedCourse);
184
189
  if (updatedCourse.num_lessons === updatedCourse.num_lessons_completed) {
185
190
  setOpenDialog(true);
@@ -202,6 +207,6 @@ function Lesson(inProps) {
202
207
  if (!scLesson || !scCourse) {
203
208
  return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
204
209
  }
205
- 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: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.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 }), !isEditor && !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(completed) }, { 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 })] }));
210
+ 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: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.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 }), !isEditor && !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 })] }));
206
211
  }
207
212
  exports.default = Lesson;
package/lib/esm/components/Lesson/Lesson.js CHANGED
@@ -54,7 +54,7 @@ export default function Lesson(inProps) {
54
54
  const [lessonContent, setLessonContent] = useState('');
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
- const [completed, setCompleted] = useState((scLesson === null || scLesson === void 0 ? void 0 : scLesson.completion_status) === SCCourseLessonCompletionStatusType.COMPLETED);
57
+ const [completed, setCompleted] = useState(null);
58
58
  const currentData = useMemo(() => {
59
59
  if (!scCourse || !scLesson)
60
60
  return null;
@@ -76,6 +76,11 @@ export default function Lesson(inProps) {
76
76
  setCurrentSection(scCourse.sections[currentData.currentSectionIndex] || null);
77
77
  }
78
78
  }, [scCourse, currentData]);
79
+ useEffect(() => {
80
+ if (scLesson) {
81
+ setCompleted(scLesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED);
82
+ }
83
+ }, [scLesson]);
79
84
  // HANDLERS
80
85
  /**
81
86
  * Handles lesson settings change
@@ -167,17 +172,17 @@ export default function Lesson(inProps) {
167
172
  /**
168
173
  * Handles toggle lesson complete/uncompleted
169
174
  */
170
- const toggleLessonCompletion = (c) => {
175
+ const toggleLessonCompletion = () => {
171
176
  setLoading(true);
172
177
  const service = completed
173
178
  ? () => CourseService.markLessonIncomplete(scLesson.course_id, scLesson.section_id, scLesson.id)
174
179
  : () => CourseService.markLessonComplete(scLesson.course_id, scLesson.section_id, scLesson.id);
175
180
  service()
176
181
  .then(() => {
177
- setCompleted(!c);
182
+ setCompleted(!completed);
178
183
  setLoading(false);
179
184
  const updatedCourse = Object.assign(Object.assign({}, scCourse), { sections: scCourse.sections.map((section) => (Object.assign(Object.assign({}, section), { lessons: section.lessons.map((lesson) => lesson.id === scLesson.id
180
- ? Object.assign(Object.assign({}, lesson), { completion_status: c ? SCCourseLessonCompletionStatusType.UNCOMPLETED : SCCourseLessonCompletionStatusType.COMPLETED }) : lesson) }))), num_lessons_completed: c ? scCourse.num_lessons_completed - 1 : scCourse.num_lessons_completed + 1 });
185
+ ? Object.assign(Object.assign({}, lesson), { completion_status: completed ? SCCourseLessonCompletionStatusType.UNCOMPLETED : SCCourseLessonCompletionStatusType.COMPLETED }) : lesson) }))), num_lessons_completed: completed ? scCourse.num_lessons_completed - 1 : scCourse.num_lessons_completed + 1 });
181
186
  setSCCourse(updatedCourse);
182
187
  if (updatedCourse.num_lessons === updatedCourse.num_lessons_completed) {
183
188
  setOpenDialog(true);
@@ -200,5 +205,5 @@ export default function Lesson(inProps) {
200
205
  if (!scLesson || !scCourse) {
201
206
  return _jsx(HiddenPlaceholder, {});
202
207
  }
203
- 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: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.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 }), !isEditor && !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(completed) }, { 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 })] }));
208
+ 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: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.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 }), !isEditor && !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 })] }));
204
209
  }