@selfcommunity/react-templates 0.4.5-courses.142 → 0.4.5-courses.143

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 +68 -18
  2. package/lib/esm/components/Lesson/Lesson.js +70 -20
  3. package/lib/umd/react-templates.js +1 -1
  4. package/package.json +6 -6
package/lib/cjs/components/Lesson/Lesson.js CHANGED
@@ -7,16 +7,19 @@ const styles_1 = require("@mui/material/styles");
7
7
  const system_1 = require("@mui/system");
8
8
  const material_1 = require("@mui/material");
9
9
  const constants_1 = require("./constants");
10
+ const types_1 = require("@selfcommunity/types");
10
11
  const react_core_1 = require("@selfcommunity/react-core");
11
12
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
12
13
  const react_ui_1 = require("@selfcommunity/react-ui");
13
14
  const api_services_1 = require("@selfcommunity/api-services");
14
15
  const react_intl_1 = require("react-intl");
16
+ const lab_1 = require("@mui/lab");
15
17
  const classes = {
16
18
  root: `${constants_1.PREFIX}-root`,
17
19
  containerRoot: `${constants_1.PREFIX}-container-root`,
18
20
  navigation: `${constants_1.PREFIX}-navigation`,
19
- navigationTitle: `${constants_1.PREFIX}-navigation-title`
21
+ navigationTitle: `${constants_1.PREFIX}-navigation-title`,
22
+ button: `${constants_1.PREFIX}-button`
20
23
  };
21
24
  const Root = (0, styles_1.styled)(material_1.Box, {
22
25
  name: constants_1.PREFIX,
@@ -42,14 +45,35 @@ function Lesson(inProps) {
42
45
  const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
43
46
  const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
44
47
  const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
45
- const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: isEditor ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER } });
46
- const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, lesson, courseId, sectionId: _sectionId });
48
+ const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, lesson, courseId: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id, sectionId: _sectionId });
49
+ const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({
50
+ id: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id,
51
+ course,
52
+ params: { view: isEditor ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER }
53
+ });
47
54
  // STATE
48
55
  const [activePanel, setActivePanel] = (0, react_1.useState)(null);
49
56
  const [settings, setSettings] = (0, react_1.useState)(null);
50
57
  const [updating, setUpdating] = (0, react_1.useState)(false);
51
58
  const [lessonContent, setLessonContent] = (0, react_1.useState)('');
52
59
  const [lessonMedias, setLessonMedias] = (0, react_1.useState)((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
60
+ const [loading, setLoading] = (0, react_1.useState)(false);
61
+ const [completed, setCompleted] = (0, react_1.useState)((scLesson === null || scLesson === void 0 ? void 0 : scLesson.completion_status) === types_1.SCCourseLessonCompletionStatusType.COMPLETED);
62
+ const currentData = (0, react_1.useMemo)(() => {
63
+ if (!scCourse || !scLesson)
64
+ return null;
65
+ return (0, react_ui_1.getCurrentSectionAndLessonIndex)(scCourse, scLesson.section_id, scLesson.id);
66
+ }, [scCourse, scLesson]);
67
+ const [currentSectionIndex, setCurrentSectionIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
68
+ const [currentLessonIndex, setCurrentLessonIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
69
+ const [currentSection, setCurrentSection] = (0, react_1.useState)(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
70
+ const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
71
+ const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
72
+ (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1) ||
73
+ (currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
74
+ ? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
75
+ : (_g = (_f = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _f === void 0 ? void 0 : _f.lessons[0]) === null || _g === void 0 ? void 0 : _g.locked);
76
+ const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
53
77
  // HANDLERS
54
78
  /**
55
79
  * Handles lesson settings change
@@ -96,14 +120,9 @@ function Lesson(inProps) {
96
120
  console.log(error);
97
121
  });
98
122
  };
99
- const currentData = (0, react_1.useMemo)(() => {
100
- if (!scCourse || !scLesson)
101
- return null;
102
- return (0, react_ui_1.getCurrentSectionAndLessonIndex)(scCourse, scLesson.section_id, scLesson.id);
103
- }, [scCourse, scLesson]);
104
- const [currentSectionIndex, setCurrentSectionIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
105
- const [currentLessonIndex, setCurrentLessonIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
106
- const [currentSection, setCurrentSection] = (0, react_1.useState)(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
123
+ /**
124
+ * Handles prev lesson navigation
125
+ */
107
126
  const handlePrev = () => {
108
127
  if (currentLessonIndex > 0) {
109
128
  const newLessonIndex = currentLessonIndex - 1;
@@ -119,6 +138,9 @@ function Lesson(inProps) {
119
138
  handleChangeLesson(prevSection.lessons[newLessonIndex], prevSection);
120
139
  }
121
140
  };
141
+ /**
142
+ * Handles next lesson navigation
143
+ */
122
144
  const handleNext = () => {
123
145
  if (currentLessonIndex < currentSection.lessons.length - 1) {
124
146
  const newLessonIndex = currentLessonIndex + 1;
@@ -132,15 +154,43 @@ function Lesson(inProps) {
132
154
  handleChangeLesson(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[newSectionIndex].lessons[0], scCourse.sections[newSectionIndex]);
133
155
  }
134
156
  };
135
- const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
136
- const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
137
- (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1) ||
138
- (currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
139
- ? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
140
- : (_g = (_f = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _f === void 0 ? void 0 : _f.lessons[0]) === null || _g === void 0 ? void 0 : _g.locked);
157
+ /**
158
+ * Handles toggle lesson complete/uncompleted
159
+ */
160
+ const toggleLessonCompletion = (c) => {
161
+ setLoading(true);
162
+ const service = completed
163
+ ? () => api_services_1.CourseService.markLessonIncomplete(scLesson.course_id, scLesson.section_id, scLesson.id)
164
+ : () => api_services_1.CourseService.markLessonComplete(scLesson.course_id, scLesson.section_id, scLesson.id);
165
+ service()
166
+ .then(() => {
167
+ setCompleted(!c);
168
+ setLoading(false);
169
+ 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
170
+ ? 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 });
171
+ setSCCourse(updatedCourse);
172
+ //TODO: fix it
173
+ if (course.num_lessons - course.num_lessons_completed === 1) {
174
+ setOpenDialog(true);
175
+ }
176
+ })
177
+ .catch((error) => {
178
+ setLoading(false);
179
+ console.log(error);
180
+ });
181
+ };
182
+ /**
183
+ * Handles complete lesson dialog close
184
+ */
185
+ const handleCloseDialog = (0, react_1.useCallback)(() => {
186
+ setOpenDialog(false);
187
+ }, [setOpenDialog]);
188
+ /**
189
+ * Rendering
190
+ */
141
191
  if (!scLesson || !scCourse) {
142
192
  return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
143
193
  }
144
- return ((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: (_h = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _h === void 0 ? void 0 : _h.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 })] })), (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))] })));
194
+ 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: (_h = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _h === void 0 ? void 0 : _h.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 && ((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: course, onClose: handleCloseDialog })] }));
145
195
  }
146
196
  exports.default = Lesson;
package/lib/esm/components/Lesson/Lesson.js CHANGED
@@ -1,20 +1,23 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useMemo, useState } from 'react';
3
+ import { Fragment, useCallback, useMemo, useState } from 'react';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { useThemeProps } from '@mui/system';
6
6
  import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
7
7
  import { PREFIX } from './constants';
8
+ import { SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
8
9
  import { useSCFetchCourse, useSCFetchLesson } from '@selfcommunity/react-core';
9
10
  import classNames from 'classnames';
10
- import { getCurrentSectionAndLessonIndex, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
11
+ import { CourseCompletedDialog, getCurrentSectionAndLessonIndex, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
11
12
  import { CourseInfoViewType, CourseService } from '@selfcommunity/api-services';
12
13
  import { FormattedMessage } from 'react-intl';
14
+ import { LoadingButton } from '@mui/lab';
13
15
  const classes = {
14
16
  root: `${PREFIX}-root`,
15
17
  containerRoot: `${PREFIX}-container-root`,
16
18
  navigation: `${PREFIX}-navigation`,
17
- navigationTitle: `${PREFIX}-navigation-title`
19
+ navigationTitle: `${PREFIX}-navigation-title`,
20
+ button: `${PREFIX}-button`
18
21
  };
19
22
  const Root = styled(Box, {
20
23
  name: PREFIX,
@@ -40,14 +43,35 @@ export default function Lesson(inProps) {
40
43
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
41
44
  const [_lessonId, setLessonId] = useState(lessonId);
42
45
  const [_sectionId, setSectionId] = useState(sectionId);
43
- const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view: isEditor ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
44
- const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, lesson, courseId, sectionId: _sectionId });
46
+ const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, lesson, courseId: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id, sectionId: _sectionId });
47
+ const { scCourse, setSCCourse } = useSCFetchCourse({
48
+ id: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id,
49
+ course,
50
+ params: { view: isEditor ? CourseInfoViewType.EDIT : CourseInfoViewType.USER }
51
+ });
45
52
  // STATE
46
53
  const [activePanel, setActivePanel] = useState(null);
47
54
  const [settings, setSettings] = useState(null);
48
55
  const [updating, setUpdating] = useState(false);
49
56
  const [lessonContent, setLessonContent] = useState('');
50
57
  const [lessonMedias, setLessonMedias] = useState((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
58
+ const [loading, setLoading] = useState(false);
59
+ const [completed, setCompleted] = useState((scLesson === null || scLesson === void 0 ? void 0 : scLesson.completion_status) === SCCourseLessonCompletionStatusType.COMPLETED);
60
+ const currentData = useMemo(() => {
61
+ if (!scCourse || !scLesson)
62
+ return null;
63
+ return getCurrentSectionAndLessonIndex(scCourse, scLesson.section_id, scLesson.id);
64
+ }, [scCourse, scLesson]);
65
+ const [currentSectionIndex, setCurrentSectionIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
66
+ const [currentLessonIndex, setCurrentLessonIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
67
+ const [currentSection, setCurrentSection] = useState(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
68
+ const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
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 === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1) ||
71
+ (currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
72
+ ? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
73
+ : (_g = (_f = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _f === void 0 ? void 0 : _f.lessons[0]) === null || _g === void 0 ? void 0 : _g.locked);
74
+ const [openDialog, setOpenDialog] = useState(false);
51
75
  // HANDLERS
52
76
  /**
53
77
  * Handles lesson settings change
@@ -94,14 +118,9 @@ export default function Lesson(inProps) {
94
118
  console.log(error);
95
119
  });
96
120
  };
97
- const currentData = useMemo(() => {
98
- if (!scCourse || !scLesson)
99
- return null;
100
- return getCurrentSectionAndLessonIndex(scCourse, scLesson.section_id, scLesson.id);
101
- }, [scCourse, scLesson]);
102
- const [currentSectionIndex, setCurrentSectionIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
103
- const [currentLessonIndex, setCurrentLessonIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
104
- const [currentSection, setCurrentSection] = useState(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
121
+ /**
122
+ * Handles prev lesson navigation
123
+ */
105
124
  const handlePrev = () => {
106
125
  if (currentLessonIndex > 0) {
107
126
  const newLessonIndex = currentLessonIndex - 1;
@@ -117,6 +136,9 @@ export default function Lesson(inProps) {
117
136
  handleChangeLesson(prevSection.lessons[newLessonIndex], prevSection);
118
137
  }
119
138
  };
139
+ /**
140
+ * Handles next lesson navigation
141
+ */
120
142
  const handleNext = () => {
121
143
  if (currentLessonIndex < currentSection.lessons.length - 1) {
122
144
  const newLessonIndex = currentLessonIndex + 1;
@@ -130,14 +152,42 @@ export default function Lesson(inProps) {
130
152
  handleChangeLesson(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[newSectionIndex].lessons[0], scCourse.sections[newSectionIndex]);
131
153
  }
132
154
  };
133
- const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
134
- const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
135
- (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1) ||
136
- (currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
137
- ? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
138
- : (_g = (_f = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _f === void 0 ? void 0 : _f.lessons[0]) === null || _g === void 0 ? void 0 : _g.locked);
155
+ /**
156
+ * Handles toggle lesson complete/uncompleted
157
+ */
158
+ const toggleLessonCompletion = (c) => {
159
+ setLoading(true);
160
+ const service = completed
161
+ ? () => CourseService.markLessonIncomplete(scLesson.course_id, scLesson.section_id, scLesson.id)
162
+ : () => CourseService.markLessonComplete(scLesson.course_id, scLesson.section_id, scLesson.id);
163
+ service()
164
+ .then(() => {
165
+ setCompleted(!c);
166
+ setLoading(false);
167
+ 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
168
+ ? 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 });
169
+ setSCCourse(updatedCourse);
170
+ //TODO: fix it
171
+ if (course.num_lessons - course.num_lessons_completed === 1) {
172
+ setOpenDialog(true);
173
+ }
174
+ })
175
+ .catch((error) => {
176
+ setLoading(false);
177
+ console.log(error);
178
+ });
179
+ };
180
+ /**
181
+ * Handles complete lesson dialog close
182
+ */
183
+ const handleCloseDialog = useCallback(() => {
184
+ setOpenDialog(false);
185
+ }, [setOpenDialog]);
186
+ /**
187
+ * Rendering
188
+ */
139
189
  if (!scLesson || !scCourse) {
140
190
  return _jsx(HiddenPlaceholder, {});
141
191
  }
142
- return (_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: (_h = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _h === void 0 ? void 0 : _h.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 })] })), _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))] })));
192
+ 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: (_h = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _h === void 0 ? void 0 : _h.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 && (_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: course, onClose: handleCloseDialog })] }));
143
193
  }