@selfcommunity/react-templates 0.4.5-courses.111 → 0.4.5-courses.113
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SCCourseLessonType } from '@selfcommunity/types';
|
|
2
2
|
import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
|
|
3
3
|
export interface LessonProps {
|
|
4
4
|
/**
|
|
@@ -6,22 +6,23 @@ export interface LessonProps {
|
|
|
6
6
|
* @default null
|
|
7
7
|
*/
|
|
8
8
|
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* The course object
|
|
11
|
-
*/
|
|
12
|
-
course?: SCCourseType;
|
|
13
9
|
/**
|
|
14
10
|
* The course id
|
|
15
11
|
*/
|
|
16
|
-
courseId
|
|
12
|
+
courseId: string | number;
|
|
17
13
|
/**
|
|
18
14
|
* The section id
|
|
19
15
|
*/
|
|
20
|
-
sectionId: number;
|
|
16
|
+
sectionId: string | number;
|
|
17
|
+
/**
|
|
18
|
+
* The lesson object
|
|
19
|
+
* @default null
|
|
20
|
+
*/
|
|
21
|
+
lesson?: SCCourseLessonType;
|
|
21
22
|
/**
|
|
22
23
|
* The lesson id
|
|
23
24
|
*/
|
|
24
|
-
lessonId?: number;
|
|
25
|
+
lessonId?: string | number;
|
|
25
26
|
/**
|
|
26
27
|
* Props to spread to LessonAppbar Component
|
|
27
28
|
* @default {}
|
|
@@ -32,6 +33,15 @@ export interface LessonProps {
|
|
|
32
33
|
* @default {}
|
|
33
34
|
*/
|
|
34
35
|
LessonDrawerProps?: LessonDrawerProps;
|
|
36
|
+
/**
|
|
37
|
+
* Opens edit mode
|
|
38
|
+
* @default false
|
|
39
|
+
*/
|
|
40
|
+
editMode?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Callback fired on edit mode close
|
|
43
|
+
*/
|
|
44
|
+
handleCloseEditMode?: () => void;
|
|
35
45
|
/**
|
|
36
46
|
* Any other properties
|
|
37
47
|
*/
|
|
@@ -7,7 +7,6 @@ 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");
|
|
11
10
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
12
11
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
13
12
|
const react_ui_1 = require("@selfcommunity/react-ui");
|
|
@@ -37,26 +36,20 @@ function Lesson(inProps) {
|
|
|
37
36
|
props: inProps,
|
|
38
37
|
name: constants_1.PREFIX
|
|
39
38
|
});
|
|
40
|
-
const { className = null,
|
|
39
|
+
const { className = null, courseId, sectionId, lesson = null, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, handleCloseEditMode } = props, rest = tslib_1.__rest(props, ["className", "courseId", "sectionId", "lesson", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "handleCloseEditMode"]);
|
|
41
40
|
// HOOKS
|
|
42
41
|
const theme = (0, material_1.useTheme)();
|
|
43
42
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
44
43
|
const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
|
|
45
44
|
const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
|
|
46
|
-
const
|
|
47
|
-
const {
|
|
48
|
-
const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
45
|
+
const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, params: { view: editMode ? 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 });
|
|
49
47
|
// STATE
|
|
50
48
|
const [activePanel, setActivePanel] = (0, react_1.useState)(null);
|
|
51
49
|
const [settings, setSettings] = (0, react_1.useState)(null);
|
|
52
50
|
const [updating, setUpdating] = (0, react_1.useState)(false);
|
|
53
51
|
const [lessonContent, setLessonContent] = (0, react_1.useState)('');
|
|
54
52
|
const [lessonMedias, setLessonMedias] = (0, react_1.useState)((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
|
|
55
|
-
const [editMode, setEditMode] = (0, react_1.useState)(isCourseAdmin);
|
|
56
|
-
const isEditMode = editMode;
|
|
57
|
-
// const isEditMode = useMemo(() => {
|
|
58
|
-
// return value.startsWith(scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, {}));
|
|
59
|
-
// }, [value, scRoutingContext]);
|
|
60
53
|
// HANDLERS
|
|
61
54
|
/**
|
|
62
55
|
* Handles lesson settings change
|
|
@@ -70,7 +63,7 @@ function Lesson(inProps) {
|
|
|
70
63
|
};
|
|
71
64
|
const handleCloseDrawer = () => {
|
|
72
65
|
setActivePanel(null);
|
|
73
|
-
|
|
66
|
+
handleCloseEditMode && handleCloseEditMode();
|
|
74
67
|
};
|
|
75
68
|
const handleLessonContentEdit = (html) => {
|
|
76
69
|
setLessonContent(html);
|
|
@@ -141,6 +134,6 @@ function Lesson(inProps) {
|
|
|
141
134
|
if (!scLesson || !scCourse) {
|
|
142
135
|
return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
|
|
143
136
|
}
|
|
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:
|
|
137
|
+
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: (_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.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))] })));
|
|
145
138
|
}
|
|
146
139
|
exports.default = Lesson;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SCCourseLessonType } from '@selfcommunity/types';
|
|
2
2
|
import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
|
|
3
3
|
export interface LessonProps {
|
|
4
4
|
/**
|
|
@@ -6,22 +6,23 @@ export interface LessonProps {
|
|
|
6
6
|
* @default null
|
|
7
7
|
*/
|
|
8
8
|
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* The course object
|
|
11
|
-
*/
|
|
12
|
-
course?: SCCourseType;
|
|
13
9
|
/**
|
|
14
10
|
* The course id
|
|
15
11
|
*/
|
|
16
|
-
courseId
|
|
12
|
+
courseId: string | number;
|
|
17
13
|
/**
|
|
18
14
|
* The section id
|
|
19
15
|
*/
|
|
20
|
-
sectionId: number;
|
|
16
|
+
sectionId: string | number;
|
|
17
|
+
/**
|
|
18
|
+
* The lesson object
|
|
19
|
+
* @default null
|
|
20
|
+
*/
|
|
21
|
+
lesson?: SCCourseLessonType;
|
|
21
22
|
/**
|
|
22
23
|
* The lesson id
|
|
23
24
|
*/
|
|
24
|
-
lessonId?: number;
|
|
25
|
+
lessonId?: string | number;
|
|
25
26
|
/**
|
|
26
27
|
* Props to spread to LessonAppbar Component
|
|
27
28
|
* @default {}
|
|
@@ -32,6 +33,15 @@ export interface LessonProps {
|
|
|
32
33
|
* @default {}
|
|
33
34
|
*/
|
|
34
35
|
LessonDrawerProps?: LessonDrawerProps;
|
|
36
|
+
/**
|
|
37
|
+
* Opens edit mode
|
|
38
|
+
* @default false
|
|
39
|
+
*/
|
|
40
|
+
editMode?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Callback fired on edit mode close
|
|
43
|
+
*/
|
|
44
|
+
handleCloseEditMode?: () => void;
|
|
35
45
|
/**
|
|
36
46
|
* Any other properties
|
|
37
47
|
*/
|
|
@@ -5,7 +5,6 @@ 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 { SCCourseJoinStatusType } from '@selfcommunity/types';
|
|
9
8
|
import { useSCFetchCourse, useSCFetchLesson } from '@selfcommunity/react-core';
|
|
10
9
|
import classNames from 'classnames';
|
|
11
10
|
import { getCurrentSectionAndLessonIndex, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
|
|
@@ -35,26 +34,20 @@ export default function Lesson(inProps) {
|
|
|
35
34
|
props: inProps,
|
|
36
35
|
name: PREFIX
|
|
37
36
|
});
|
|
38
|
-
const { className = null,
|
|
37
|
+
const { className = null, courseId, sectionId, lesson = null, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, handleCloseEditMode } = props, rest = __rest(props, ["className", "courseId", "sectionId", "lesson", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "handleCloseEditMode"]);
|
|
39
38
|
// HOOKS
|
|
40
39
|
const theme = useTheme();
|
|
41
40
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
42
41
|
const [_lessonId, setLessonId] = useState(lessonId);
|
|
43
42
|
const [_sectionId, setSectionId] = useState(sectionId);
|
|
44
|
-
const
|
|
45
|
-
const {
|
|
46
|
-
const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
43
|
+
const { scCourse } = useSCFetchCourse({ id: courseId, params: { view: editMode ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
|
|
44
|
+
const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, lesson, courseId, sectionId: _sectionId });
|
|
47
45
|
// STATE
|
|
48
46
|
const [activePanel, setActivePanel] = useState(null);
|
|
49
47
|
const [settings, setSettings] = useState(null);
|
|
50
48
|
const [updating, setUpdating] = useState(false);
|
|
51
49
|
const [lessonContent, setLessonContent] = useState('');
|
|
52
50
|
const [lessonMedias, setLessonMedias] = useState((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
|
|
53
|
-
const [editMode, setEditMode] = useState(isCourseAdmin);
|
|
54
|
-
const isEditMode = editMode;
|
|
55
|
-
// const isEditMode = useMemo(() => {
|
|
56
|
-
// return value.startsWith(scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, {}));
|
|
57
|
-
// }, [value, scRoutingContext]);
|
|
58
51
|
// HANDLERS
|
|
59
52
|
/**
|
|
60
53
|
* Handles lesson settings change
|
|
@@ -68,7 +61,7 @@ export default function Lesson(inProps) {
|
|
|
68
61
|
};
|
|
69
62
|
const handleCloseDrawer = () => {
|
|
70
63
|
setActivePanel(null);
|
|
71
|
-
|
|
64
|
+
handleCloseEditMode && handleCloseEditMode();
|
|
72
65
|
};
|
|
73
66
|
const handleLessonContentEdit = (html) => {
|
|
74
67
|
setLessonContent(html);
|
|
@@ -139,5 +132,5 @@ export default function Lesson(inProps) {
|
|
|
139
132
|
if (!scLesson || !scCourse) {
|
|
140
133
|
return _jsx(HiddenPlaceholder, {});
|
|
141
134
|
}
|
|
142
|
-
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode:
|
|
135
|
+
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: (_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.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))] })));
|
|
143
136
|
}
|