@selfcommunity/react-ui 0.10.2-courses.142 → 0.10.2-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.
|
@@ -13,12 +13,7 @@ const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent
|
|
|
13
13
|
const contribution_1 = require("../../utils/contribution");
|
|
14
14
|
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
|
|
15
15
|
const ContentLesson_1 = tslib_1.__importDefault(require("../Composer/Content/ContentLesson"));
|
|
16
|
-
const types_1 = require("@selfcommunity/types");
|
|
17
|
-
const react_intl_1 = require("react-intl");
|
|
18
16
|
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
|
|
19
|
-
const api_services_1 = require("@selfcommunity/api-services");
|
|
20
|
-
const lab_1 = require("@mui/lab");
|
|
21
|
-
const CourseCompletedDialog_1 = tslib_1.__importDefault(require("../CourseCompletedDialog"));
|
|
22
17
|
const classes = {
|
|
23
18
|
root: `${constants_1.PREFIX}-root`,
|
|
24
19
|
content: `${constants_1.PREFIX}-content`,
|
|
@@ -26,8 +21,7 @@ const classes = {
|
|
|
26
21
|
title: `${constants_1.PREFIX}-title`,
|
|
27
22
|
text: `${constants_1.PREFIX}-text`,
|
|
28
23
|
navigation: `${constants_1.PREFIX}-navigation`,
|
|
29
|
-
editor: `${constants_1.PREFIX}-editor
|
|
30
|
-
button: `${constants_1.PREFIX}-button`
|
|
24
|
+
editor: `${constants_1.PREFIX}-editor`
|
|
31
25
|
};
|
|
32
26
|
const Root = (0, styles_1.styled)(material_1.Box, {
|
|
33
27
|
name: constants_1.PREFIX,
|
|
@@ -41,13 +35,8 @@ function LessonObject(inProps) {
|
|
|
41
35
|
name: constants_1.PREFIX
|
|
42
36
|
});
|
|
43
37
|
const { className = null, course, lesson, editMode, EditorProps = {}, onContentChange, onMediaChange, isSubmitting } = props, rest = tslib_1.__rest(props, ["className", "course", "lesson", "editMode", "EditorProps", "onContentChange", "onMediaChange", "isSubmitting"]);
|
|
44
|
-
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
45
|
-
const [completed, setCompleted] = (0, react_1.useState)((lesson === null || lesson === void 0 ? void 0 : lesson.completion_status) === types_1.SCCourseLessonCompletionStatusType.COMPLETED);
|
|
46
|
-
const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
|
|
47
38
|
// CONTEXT
|
|
48
39
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
49
|
-
//HOOKS
|
|
50
|
-
const isCourseAdmin = (0, react_1.useMemo)(() => course && (course.join_status === types_1.SCCourseJoinStatusType.CREATOR || course.join_status === types_1.SCCourseJoinStatusType.MANAGER), [course]);
|
|
51
40
|
// HANDLERS
|
|
52
41
|
const handleChangeLesson = (0, react_1.useCallback)((content) => {
|
|
53
42
|
if (onContentChange) {
|
|
@@ -59,35 +48,14 @@ function LessonObject(inProps) {
|
|
|
59
48
|
onMediaChange(medias);
|
|
60
49
|
}
|
|
61
50
|
}, [onMediaChange]);
|
|
62
|
-
function toggleLessonCompletion(completed) {
|
|
63
|
-
setLoading(true);
|
|
64
|
-
const service = completed
|
|
65
|
-
? () => api_services_1.CourseService.markLessonIncomplete(course.id, lesson.section_id, lesson.id)
|
|
66
|
-
: () => api_services_1.CourseService.markLessonComplete(course.id, lesson.section_id, lesson.id);
|
|
67
|
-
service()
|
|
68
|
-
.then(() => {
|
|
69
|
-
setCompleted(!completed);
|
|
70
|
-
setLoading(false);
|
|
71
|
-
if (course.num_lessons - course.num_lessons_completed === 1) {
|
|
72
|
-
setOpenDialog(true);
|
|
73
|
-
}
|
|
74
|
-
})
|
|
75
|
-
.catch((error) => {
|
|
76
|
-
setLoading(false);
|
|
77
|
-
console.log(error);
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
const handleCloseDialog = (0, react_1.useCallback)(() => {
|
|
81
|
-
setOpenDialog(false);
|
|
82
|
-
}, [setOpenDialog]);
|
|
83
51
|
// RENDER
|
|
84
52
|
if (!course || !lesson) {
|
|
85
53
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
86
54
|
}
|
|
87
|
-
return ((0, jsx_runtime_1.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
55
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? ((0, jsx_runtime_1.jsx)(ContentLesson_1.default, { value: lesson,
|
|
56
|
+
//error={{error}}
|
|
57
|
+
onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
|
|
58
|
+
__html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
|
|
59
|
+
} })) })) }) })));
|
|
92
60
|
}
|
|
93
61
|
exports.default = LessonObject;
|
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import {
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
|
-
import { Box,
|
|
7
|
+
import { Box, Typography } from '@mui/material';
|
|
8
8
|
import { PREFIX } from './constants';
|
|
9
9
|
import { useSCRouting } from '@selfcommunity/react-core';
|
|
10
10
|
import CardContent from '@mui/material/CardContent';
|
|
11
11
|
import { getContributionHtml } from '../../utils/contribution';
|
|
12
12
|
import Widget from '../Widget';
|
|
13
13
|
import ContentLesson from '../Composer/Content/ContentLesson';
|
|
14
|
-
import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
|
|
15
|
-
import { FormattedMessage } from 'react-intl';
|
|
16
14
|
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
|
|
17
|
-
import { CourseService } from '@selfcommunity/api-services';
|
|
18
|
-
import { LoadingButton } from '@mui/lab';
|
|
19
|
-
import CourseCompletedDialog from '../CourseCompletedDialog';
|
|
20
15
|
const classes = {
|
|
21
16
|
root: `${PREFIX}-root`,
|
|
22
17
|
content: `${PREFIX}-content`,
|
|
@@ -24,8 +19,7 @@ const classes = {
|
|
|
24
19
|
title: `${PREFIX}-title`,
|
|
25
20
|
text: `${PREFIX}-text`,
|
|
26
21
|
navigation: `${PREFIX}-navigation`,
|
|
27
|
-
editor: `${PREFIX}-editor
|
|
28
|
-
button: `${PREFIX}-button`
|
|
22
|
+
editor: `${PREFIX}-editor`
|
|
29
23
|
};
|
|
30
24
|
const Root = styled(Box, {
|
|
31
25
|
name: PREFIX,
|
|
@@ -39,13 +33,8 @@ export default function LessonObject(inProps) {
|
|
|
39
33
|
name: PREFIX
|
|
40
34
|
});
|
|
41
35
|
const { className = null, course, lesson, editMode, EditorProps = {}, onContentChange, onMediaChange, isSubmitting } = props, rest = __rest(props, ["className", "course", "lesson", "editMode", "EditorProps", "onContentChange", "onMediaChange", "isSubmitting"]);
|
|
42
|
-
const [loading, setLoading] = useState(false);
|
|
43
|
-
const [completed, setCompleted] = useState((lesson === null || lesson === void 0 ? void 0 : lesson.completion_status) === SCCourseLessonCompletionStatusType.COMPLETED);
|
|
44
|
-
const [openDialog, setOpenDialog] = useState(false);
|
|
45
36
|
// CONTEXT
|
|
46
37
|
const scRoutingContext = useSCRouting();
|
|
47
|
-
//HOOKS
|
|
48
|
-
const isCourseAdmin = useMemo(() => course && (course.join_status === SCCourseJoinStatusType.CREATOR || course.join_status === SCCourseJoinStatusType.MANAGER), [course]);
|
|
49
38
|
// HANDLERS
|
|
50
39
|
const handleChangeLesson = useCallback((content) => {
|
|
51
40
|
if (onContentChange) {
|
|
@@ -57,34 +46,13 @@ export default function LessonObject(inProps) {
|
|
|
57
46
|
onMediaChange(medias);
|
|
58
47
|
}
|
|
59
48
|
}, [onMediaChange]);
|
|
60
|
-
function toggleLessonCompletion(completed) {
|
|
61
|
-
setLoading(true);
|
|
62
|
-
const service = completed
|
|
63
|
-
? () => CourseService.markLessonIncomplete(course.id, lesson.section_id, lesson.id)
|
|
64
|
-
: () => CourseService.markLessonComplete(course.id, lesson.section_id, lesson.id);
|
|
65
|
-
service()
|
|
66
|
-
.then(() => {
|
|
67
|
-
setCompleted(!completed);
|
|
68
|
-
setLoading(false);
|
|
69
|
-
if (course.num_lessons - course.num_lessons_completed === 1) {
|
|
70
|
-
setOpenDialog(true);
|
|
71
|
-
}
|
|
72
|
-
})
|
|
73
|
-
.catch((error) => {
|
|
74
|
-
setLoading(false);
|
|
75
|
-
console.log(error);
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
const handleCloseDialog = useCallback(() => {
|
|
79
|
-
setOpenDialog(false);
|
|
80
|
-
}, [setOpenDialog]);
|
|
81
49
|
// RENDER
|
|
82
50
|
if (!course || !lesson) {
|
|
83
51
|
return _jsx(HiddenPlaceholder, {});
|
|
84
52
|
}
|
|
85
|
-
return (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
53
|
+
return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: _jsx(Widget, { children: _jsx(CardContent, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? (_jsx(ContentLesson, { value: lesson,
|
|
54
|
+
//error={{error}}
|
|
55
|
+
onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : (_jsx(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
|
|
56
|
+
__html: getContributionHtml(lesson.html, scRoutingContext.url)
|
|
57
|
+
} })) })) }) })));
|
|
90
58
|
}
|