@selfcommunity/react-ui 0.10.2-courses.185 → 0.10.2-courses.187

package/lib/cjs/components/BottomNavigation/BottomNavigation.d.ts

@@ -1,5 +1,5 @@
 import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
-export declare type BottomNavigationProps = MuiBottomNavigationProps;
+export type BottomNavigationProps = MuiBottomNavigationProps;
 /**
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
  *

package/lib/cjs/components/Course/Course.js

@@ -137,6 +137,9 @@ function Course(inProps) {
         else if ((0, course_2.isCourseCompleted)(scCourse)) {
             return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.completed", id: "ui.course.status.completed" });
         }
+        else if (scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) {
+            return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.joined", id: "ui.course.status.joined" });
+        }
         else if ((0, course_2.isCourseNew)(scCourse)) {
             return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.new", id: "ui.course.status.new" });
         }
@@ -147,22 +150,27 @@ function Course(inProps) {
      */
     let contentObj;
     if (template === course_1.SCCourseTemplateType.PREVIEW) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse)) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
+        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
                                 ? 'primary'
                                 : isCourseAdmin && !scCourse.privacy
                                     ? 'default'
-                                    : 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
+                                    : scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
+                                        ? 'warning'
+                                        : 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
                             to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                         }), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
                             to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                         }), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: scCourse.categories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet && (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse)) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
+                        (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
                             ? 'primary'
                             : isCourseAdmin && !scCourse.privacy
                                 ? 'default'
-                                : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!userProfileSnippet && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
+                                : scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
+                                    ? 'warning'
+                                    : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!userProfileSnippet && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
                         to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                     }), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: userProfileSnippet ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !scCourse.hide_member_count && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })) }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
     }

package/lib/cjs/components/CourseDashboard/Header.js

@@ -10,6 +10,7 @@ const react_1 = require("react");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_2 = require("../../types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const CourseTypePopover_1 = tslib_1.__importDefault(require("../../shared/CourseTypePopover"));
 const classes = {
     header: `${constants_1.PREFIX}-header`,
     img: `${constants_1.PREFIX}-header-img`,
@@ -29,36 +30,15 @@ function getUrlEditDashboard(course) {
 function HeaderCourseDashboard(props) {
     // PROPS
     const { course, hasAction = false } = props;
-    // STATES
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const open = Boolean(anchorEl);
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // INTL
     const intl = (0, react_intl_1.useIntl)();
-    // HANDLERS
-    const handleOpenPopover = (0, react_1.useCallback)((e) => {
-        setAnchorEl(e.currentTarget);
-    }, [setAnchorEl]);
-    const handlePopoverClose = (0, react_1.useCallback)(() => {
-        setAnchorEl(null);
-    }, [setAnchorEl]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "public" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                 privacy: intl.formatMessage({
                                                     id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                     defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                                                 })
-                                            } }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "courses" })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", color: "inherit", size: "small", className: classes.buttonPopover, onClick: handleOpenPopover }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
-                                                    typeOfCourse: intl.formatMessage({
-                                                        id: `ui.course.type.${course.type}`,
-                                                        defaultMessage: `ui.course.type.${course.type}`
-                                                    })
-                                                } }) })) })), open && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
-                                            vertical: 'bottom',
-                                            horizontal: 'left'
-                                        }, transformOrigin: {
-                                            vertical: 'top',
-                                            horizontal: 'left'
-                                        }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { padding: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] }))] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+                                            } }) }))] })), (0, jsx_runtime_1.jsx)(CourseTypePopover_1.default, { course: course })] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 exports.default = (0, react_1.memo)(HeaderCourseDashboard);

package/lib/cjs/components/CourseDashboard/Student.js

@@ -49,8 +49,7 @@ const classes = {
     box: `${constants_1.PREFIX}-box`,
     percentageWrapper: `${constants_1.PREFIX}-percentage-wrapper`,
     completedWrapper: `${constants_1.PREFIX}-completed-wrapper`,
-    contrastColor: `${constants_1.PREFIX}-contrast-color`,
-    contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
+    contrastColor: `${constants_1.PREFIX}-contrast-color`
 };
 function getUrlNextLesson(course) {
     var _a;
@@ -180,7 +179,7 @@ function Student(inProps) {
     if (!scCourse) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.userWrapper, classes.contrastBgColor) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.user }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.user }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
                                 to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                             }), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
                                         to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
@@ -190,9 +189,9 @@ function Student(inProps) {
                     scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
                 scCourse.privacy === types_1.SCCoursePrivacyType.OPEN ||
                 scCourse.privacy === types_1.SCCoursePrivacyType.DRAFT) &&
-                scCourse.description && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.box, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scCourse.description })) }))] })), (((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE || scCourse.privacy === types_1.SCCoursePrivacyType.SECRET) &&
+                scCourse.description && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.box }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scCourse.description })) }))] })), (((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE || scCourse.privacy === types_1.SCCoursePrivacyType.SECRET) &&
                 (scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
-                (scCourse.privacy === types_1.SCCoursePrivacyType.OPEN && scCourse.join_status !== types_1.SCCourseJoinStatusType.CREATOR)) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.box, classes.contrastBgColor) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.percentageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate })] })), scCourse.user_completion_rate === 100 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.completedWrapper, classes.margin) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), (0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.lessonsSections, classes.contrastBgColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
+                (scCourse.privacy === types_1.SCCoursePrivacyType.OPEN && scCourse.join_status !== types_1.SCCourseJoinStatusType.CREATOR)) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [scCourse.join_status !== null && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.progress" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.box }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.percentageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse.user_completion_rate })] }))] })), scCourse.user_completion_rate === 100 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.completedWrapper, classes.margin) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), (0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSections }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
                                         sectionsNumber: scCourse.num_sections
                                     } }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                         lessonsNumber: scCourse.num_lessons

package/lib/cjs/components/CourseDashboard/Teacher/Comments.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -13,7 +12,6 @@ const Pagination_1 = require("../../../constants/Pagination");
 const widget_1 = require("../../../utils/widget");
 const react_core_1 = require("@selfcommunity/react-core");
 const api_services_1 = require("@selfcommunity/api-services");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const classes = {
     container: `${constants_1.PREFIX}-comments-container`,
     outerWrapper: `${constants_1.PREFIX}-outer-wrapper`,
@@ -23,8 +21,7 @@ const classes = {
     userInfo: `${constants_1.PREFIX}-user-info`,
     circle: `${constants_1.PREFIX}-circle`,
     button: `${constants_1.PREFIX}-button`,
-    contrastColor: `${constants_1.PREFIX}-contrast-color`,
-    contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
+    contrastColor: `${constants_1.PREFIX}-contrast-color`
 };
 function CommentSkeleton({ id }) {
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [Array.from(new Array(id)).map((_, i) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "180px", height: "21px" })] })] }), i))), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "112px", height: "36px", className: classes.button })] }))] })));
@@ -43,7 +40,7 @@ function Comments(props) {
         cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST,
         visibleItems: endpointQueryParams.limit
     }, widget_1.stateWidgetInitializer);
-    const [isLoadingComments, setIsLoadingComments] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     // CONTEXTS
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -73,7 +70,7 @@ function Comments(props) {
     }, [scUserContext.user, _init]);
     // HANDLERS
     const handleNext = (0, react_1.useCallback)(() => {
-        setIsLoadingComments(true);
+        setIsLoading(true);
         dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
         api_services_1.http
             .request({
@@ -82,12 +79,12 @@ function Comments(props) {
         })
             .then((res) => {
             dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
-            setIsLoadingComments(false);
+            setIsLoading(false);
         })
             .catch((error) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
         });
-    }, [state.next, dispatch, setIsLoadingComments]);
+    }, [state.next, dispatch, setIsLoading]);
     // MEMOS
     const renderComments = (0, react_1.useMemo)(() => {
         const map = new Map();
@@ -100,11 +97,11 @@ function Comments(props) {
                 map.set(name, [...map.get(name), comment]);
             }
         });
-        return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.outerWrapper, classes.contrastBgColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
+        return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
     }, [state.results]);
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(CommentsSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoadingComments && (0, jsx_runtime_1.jsx)(CommentSkeleton, { id: 1 }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoadingComments, disabled: !state.next, onClick: handleNext, className: classes.contrastBgColor }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && (0, jsx_runtime_1.jsx)(CommentSkeleton, { id: 1 }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
 }
 exports.default = (0, react_1.memo)(Comments);

package/lib/cjs/components/CourseDashboard/Teacher/Info.js

@@ -8,14 +8,12 @@ const constants_1 = require("../constants");
 const CourseParticipantsButton_1 = tslib_1.__importDefault(require("../../CourseParticipantsButton"));
 const react_1 = require("react");
 const types_1 = require("../types");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const classes = {
-    info: `${constants_1.PREFIX}-info`,
-    contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
+    info: `${constants_1.PREFIX}-info`
 };
 function InfoCourseDashboard(props) {
     // PROPS
     const { title, course, position } = props;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.info, classes.contrastBgColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), position === types_1.InfoPositionType.FIRST && (0, jsx_runtime_1.jsx)(CourseParticipantsButton_1.default, { course: course }), position === types_1.InfoPositionType.SECOND && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), position === types_1.InfoPositionType.FIRST && (0, jsx_runtime_1.jsx)(CourseParticipantsButton_1.default, { course: course }), position === types_1.InfoPositionType.SECOND && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
 }
 exports.default = (0, react_1.memo)(InfoCourseDashboard);

package/lib/cjs/components/CourseDashboard/Teacher/Students.js

@@ -10,6 +10,7 @@ const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const widget_1 = require("../../../utils/widget");
 const Pagination_1 = require("../../../constants/Pagination");
+const course_1 = require("../../../types/course");
 const headerCells = [
     {
         id: 'ui.course.dashboard.teacher.tab.students.table.header.name'
@@ -62,6 +63,6 @@ function Students(props) {
             };
         }
     }, [scUserContext.user, _init]);
-    return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "dashboard", emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
+    return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
 }
 exports.default = (0, react_1.memo)(Students);

package/lib/cjs/components/CourseForm/CourseForm.js

@@ -57,8 +57,7 @@ const classes = {
     stepOne: `${constants_1.PREFIX}-step-one`,
     stepTwo: `${constants_1.PREFIX}-step-two`,
     title: `${constants_1.PREFIX}-title`,
-    contrastColor: `${constants_1.PREFIX}-contrast-color`,
-    contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
+    contrastColor: `${constants_1.PREFIX}-contrast-color`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -250,11 +249,11 @@ function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: (0, classnames_1.default)(classes.name, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                                        endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
-                                    }, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: (0, classnames_1.default)(classes.description, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
-                                    }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory, className: classes.contrastBgColor }), course && ((0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))), className: classes.contrastBgColor }))] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                                endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
+                                            }, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
+                                            }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === Course_1.SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

package/lib/cjs/components/Courses/Courses.js

@@ -45,7 +45,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
 exports.CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
     name: constants_1.PREFIX,
     slot: 'CoursesChipRoot',
-    shouldForwardProp: (prop) => prop !== 'showForMe' && prop !== 'showMyCourses'
+    shouldForwardProp: (prop) => prop !== 'showMine' && prop !== 'showManagedCourses'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
@@ -96,8 +96,8 @@ function Courses(inProps) {
     const [next, setNext] = (0, react_1.useState)(null);
     const [query, setQuery] = (0, react_1.useState)('');
     const [_categories, setCategories] = (0, react_1.useState)([]);
-    const [showForMe, setShowForMe] = (0, react_1.useState)(false);
-    const [showMyCourses, setShowMyCourses] = (0, react_1.useState)(false);
+    const [showMine, setShowMine] = (0, react_1.useState)(false);
+    const [showManagedCourses, setShowManagedCourses] = (0, react_1.useState)(false);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     const { preferences } = (0, react_core_1.useSCPreferences)();
@@ -106,14 +106,11 @@ function Courses(inProps) {
     const onlyStaffEnabled = (0, react_1.useMemo)(() => { var _a; return (_a = preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
     const canCreateCourse = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     const endpoint = (0, react_1.useMemo)(() => {
-        if (showMyCourses) {
+        if (showManagedCourses) {
             return api_services_1.Endpoints.GetJoinedCourses;
         }
-        else if (showForMe) {
-            return api_services_1.Endpoints.CourseSuggestion;
-        }
         return api_services_1.Endpoints.SearchCourses;
-    }, [showMyCourses, showForMe]);
+    }, [showManagedCourses]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const theme = (0, material_1.useTheme)();
@@ -122,10 +119,10 @@ function Courses(inProps) {
     const updatesSubscription = (0, react_1.useRef)(null);
     // HANDLERS
     const handleChipClick = () => {
-        setShowForMe(!showForMe);
+        setShowMine(!showMine);
     };
     const handleDeleteClick = () => {
-        setShowForMe(false);
+        setShowMine(false);
     };
     /**
      * Fetches courses list
@@ -135,7 +132,7 @@ function Courses(inProps) {
             .request({
             url: endpoint.url({}),
             method: endpoint.method,
-            params: Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showMyCourses && { statuses: JSON.stringify(['creator']) }))
+            params: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showManagedCourses && { statuses: JSON.stringify(['creator', 'manager']) })), (showMine && { statuses: JSON.stringify(['joined', 'manager']) }))
         })
             .then((res) => {
             setCourses(res.data.results);
@@ -156,7 +153,7 @@ function Courses(inProps) {
         else {
             fetchCourses();
         }
-    }, [contentAvailability, authUserId, showForMe, showMyCourses, _categories]);
+    }, [contentAvailability, authUserId, showMine, showManagedCourses, _categories]);
     /**
      * Subscriber for pubsub callback
      */
@@ -186,7 +183,7 @@ function Courses(inProps) {
         return api_services_1.http
             .request({
             url: next,
-            method: showMyCourses ? api_services_1.Endpoints.GetJoinedCourses.method : showForMe ? api_services_1.Endpoints.CourseSuggestion : api_services_1.Endpoints.SearchCourses.method
+            method: showManagedCourses ? api_services_1.Endpoints.GetJoinedCourses.method : api_services_1.Endpoints.SearchCourses.method
         })
             .then((res) => {
             setCourses([...courses, ...res.data.results]);
@@ -223,15 +220,15 @@ function Courses(inProps) {
                                     }
                                 }, InputProps: {
                                     endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
-                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showMyCourses ? 'primary' : 'default', variant: showMyCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCreatedByMe", defaultMessage: "ui.courses.filterByCreatedByMe" }), onClick: () => setShowMyCourses(!showMyCourses), 
-                                // @ts-expect-error this is needed to use showForMe into SCCourses
-                                showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick, 
-                                // @ts-expect-error this is needed to use showForMe into SCCourses
-                                showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), !isMobile && (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? ((0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, { template: course_1.SCCourseTemplateType.PREVIEW })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
+                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses), 
+                                // @ts-expect-error this is needed to use showMine into SCCourses
+                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
+                                // @ts-expect-error this is needed to use showMine into SCCourses
+                                showMine: showMine, deleteIcon: showMine ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? ((0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, { template: course_1.SCCourseTemplateType.PREVIEW })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
+                            } }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

package/lib/cjs/components/EditCourse/EditCourse.js

@@ -47,30 +47,6 @@ const TAB_DATA = [
         value: course_1.SCCourseEditTabType.OPTIONS
     }
 ];
-function getPanelData(course, setCourse) {
-    return [
-        {
-            value: course_1.SCCourseEditTabType.LESSONS,
-            children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: course, setCourse: setCourse })
-        },
-        {
-            value: course_1.SCCourseEditTabType.CUSTOMIZE,
-            children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: course, setCourse: setCourse })
-        },
-        {
-            value: course_1.SCCourseEditTabType.USERS,
-            children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: course })
-        },
-        {
-            value: course_1.SCCourseEditTabType.REQUESTS,
-            children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: course })
-        },
-        {
-            value: course_1.SCCourseEditTabType.OPTIONS,
-            children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: course, setCourse: setCourse })
-        }
-    ];
-}
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root',
@@ -92,7 +68,7 @@ function EditCourse(inProps) {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // HANDLERS
-    const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
+    const handleTabChange = (0, react_1.useCallback)((_e, newTabValue) => {
         if (onTabSelect) {
             onTabSelect(newTabValue);
         }
@@ -101,9 +77,34 @@ function EditCourse(inProps) {
             onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
         }
     }, [setTabValue, onTabChange, onTabSelect]);
+    // MEMOS
+    const panelData = (0, react_1.useMemo)(() => {
+        return [
+            {
+                value: course_1.SCCourseEditTabType.LESSONS,
+                children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.CUSTOMIZE,
+                children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: scCourse, setCourse: setSCCourse })
+            },
+            {
+                value: course_1.SCCourseEditTabType.USERS,
+                children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.REQUESTS,
+                children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.OPTIONS,
+                children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: scCourse, setCourse: setSCCourse })
+            }
+        ];
+    }, [scCourse, handleTabChange]);
     if (!scCourse) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { tab: tab });
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), getPanelData(scCourse, setSCCourse).map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
 }
 exports.default = EditCourse;

package/lib/cjs/components/EditCourse/Lessons/Skeleton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const constants_1 = require("../constants");
-const react_1 = require("react");
 const classes = {
     lessonTitle: `${constants_1.PREFIX}-lesson-title`,
     lessonInfoWrapper: `${constants_1.PREFIX}-lesson-info-wrapper`,
@@ -16,6 +15,6 @@ const classes = {
     actionsWrapper: `${constants_1.PREFIX}-actions-wrapper`
 };
 function LessonsSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px", className: classes.lessonTitle }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "105px", height: "32px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "159px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "100px", height: "32px" })] })), (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: classes.tableContainer }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "102px", height: "32px" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "87px", height: "32px", className: classes.margin }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "48px", height: "32px", className: classes.marginLeft }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "102px", height: "21px" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "250px", height: "54px", className: classes.margin }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "105px", height: "37px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: "36px", height: "36px" })] })) })] }) })] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px", className: classes.lessonTitle }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "105px", height: "32px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "159px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "100px", height: "32px" })] })), (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: classes.tableContainer }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "102px", height: "32px" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "87px", height: "32px", className: classes.margin }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "48px", height: "32px", className: classes.marginLeft }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "102px", height: "21px" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "250px", height: "54px", className: classes.margin }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "105px", height: "37px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: "36px", height: "36px" })] })) })] }) })] }) }))] }));
 }
 exports.default = LessonsSkeleton;

package/lib/cjs/components/EditCourse/Lessons.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
+import { SyntheticEvent } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseEditTabType } from '../../types';
 interface LessonsProps {
     course: SCCourseType;
     setCourse: (course: SCCourseType) => void;
+    handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
 declare function Lessons(props: LessonsProps): JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Lessons>;