@selfcommunity/react-ui 0.10.2-courses.163 → 0.10.2-courses.165

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

@@ -20,6 +20,10 @@ export interface CourseProps extends WidgetProps {
      * @default 'preview'
      */
     template?: SCCourseTemplateType;
+    /**
+     * It shows a different snippet type
+     */
+    userProfileSnippet?: boolean;
     /**
      * Actions
      * @default null
@@ -79,12 +83,9 @@ export interface CourseProps extends WidgetProps {
  |previewProgress|.SCCourses-preview-progress|Styles applied to indicate the progress section in the preview template.|
  |previewProgressBar|.SCCourses-preview-progress-bar|Styles applied to the progress bar in the preview template.|
  |snippetRoot|.SCCourses-snippet-root|Styles applied to the root element in the snippet template.|
- |snippetActions|.SCCourses-snippet-actions|Styles applied to the actions section in the snippet template.|
  |snippetAvatar|.SCCourses-snippet-avatar|Styles applied to the avatar element in the snippet template.|
  |snippetImage|.SCCourses-snippet-image|Styles applied to the image element in the snippet template.|
- |snippetPrimary|.SCCourses-snippet-primary|Styles applied to the primary section in the snippet template.|
- |snippetSecondary|.SCCourses-snippet-secondary|Styles applied to the secondary section in the snippet template.|
-
+ 
  *
  * @param inProps
  */

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

@@ -15,9 +15,9 @@ const CourseParticipantsButton_1 = tslib_1.__importDefault(require("../CoursePar
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
-const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const course_2 = require("../../utils/course");
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     chip: `${constants_1.PREFIX}-chip`,
@@ -36,11 +36,9 @@ const classes = {
     previewProgress: `${constants_1.PREFIX}-preview-progress`,
     previewProgressBar: `${constants_1.PREFIX}-preview-progress-bar`,
     snippetRoot: `${constants_1.PREFIX}-snippet-root`,
-    snippetActions: `${constants_1.PREFIX}-snippet-actions`,
     snippetAvatar: `${constants_1.PREFIX}-snippet-avatar`,
-    snippetImage: `${constants_1.PREFIX}-snippet-image`,
-    snippetPrimary: `${constants_1.PREFIX}-snippet-primary`,
-    snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`
+    snippetAvatarUserProfile: `${constants_1.PREFIX}-snippet-avatar-user-profile-view`,
+    snippetImage: `${constants_1.PREFIX}-snippet-image`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
@@ -52,7 +50,7 @@ const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
     slot: 'PreviewRoot',
     overridesResolver: (_props, styles) => styles.previewRoot
 })(() => ({}));
-const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+const SnippetRoot = (0, styles_1.styled)(BaseItemButton_1.default, {
     name: constants_1.PREFIX,
     slot: 'SnippetRoot',
     overridesResolver: (_props, styles) => styles.snippetRoot
@@ -96,22 +94,20 @@ const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
  |previewProgress|.SCCourses-preview-progress|Styles applied to indicate the progress section in the preview template.|
  |previewProgressBar|.SCCourses-preview-progress-bar|Styles applied to the progress bar in the preview template.|
  |snippetRoot|.SCCourses-snippet-root|Styles applied to the root element in the snippet template.|
- |snippetActions|.SCCourses-snippet-actions|Styles applied to the actions section in the snippet template.|
  |snippetAvatar|.SCCourses-snippet-avatar|Styles applied to the avatar element in the snippet template.|
  |snippetImage|.SCCourses-snippet-image|Styles applied to the image element in the snippet template.|
- |snippetPrimary|.SCCourses-snippet-primary|Styles applied to the primary section in the snippet template.|
- |snippetSecondary|.SCCourses-snippet-secondary|Styles applied to the secondary section in the snippet template.|
-
+ 
  *
  * @param inProps
  */
 function Course(inProps) {
+    var _a, _b, _c, _d, _e, _f, _g;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps"]);
+    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, userProfileSnippet } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "userProfileSnippet"]);
     // STATE
     const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
     // CONTEXT
@@ -155,20 +151,20 @@ function Course(inProps) {
                                 ? 'primary'
                                 : isCourseAdmin && !scCourse.privacy
                                     ? 'default'
-                                    : 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
+                                    : '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: !scCourse.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: scCourse.created_by.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 }, (!scCourse.created_by.deleted && {
+                        }), { 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: scCourse.created_by.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.preview", id: "ui.course.see.preview" }) })) })))] })));
+                        }), { 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, { 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: classes.snippetAvatar }), (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, { 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)
                             ? 'primary'
                             : isCourseAdmin && !scCourse.privacy
                                 ? 'default'
-                                : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
+                                : '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)
-                    }), { className: classes.snippetPrimary }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: scCourse.created_by.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.snippetPrimary }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { 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.Box, Object.assign({ className: classes.snippetActions }, { children: (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" }) })) }))) }));
+                    }), { 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" }) }))) }));
     }
     /**
      * Renders root object

package/lib/cjs/components/Course/Skeleton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SCCourseTemplateType } from '../../types/course';
 import { WidgetProps } from '../Widget';
+import { CourseProps } from './Course';
 export interface CourseSkeletonProps extends WidgetProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -20,6 +21,10 @@ export interface CourseSkeletonProps extends WidgetProps {
      * Prop to pass an action to be rendered next to the skeleton
      */
     actions?: React.ReactNode;
+    /**
+     * CourseProps
+     */
+    CourseProps?: CourseProps;
 }
 /**
  * > API documentation for the Community-JS Course Skeleton component. Learn about the available props and the CSS API.

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

@@ -7,10 +7,10 @@ const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const course_1 = require("../../types/course");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
+const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     skeletonPreviewRoot: `${constants_1.PREFIX}-skeleton-preview-root`,
@@ -29,7 +29,7 @@ const SkeletonPreviewRoot = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonPreviewRoot'
 })(() => ({}));
-const SkeletonSnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+const SkeletonSnippetRoot = (0, styles_1.styled)(BaseItemButton_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonSnippetRoot'
 })(() => ({}));
@@ -61,7 +61,7 @@ function CourseSkeleton(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, template, skeletonsAnimation = 'wave', actions } = props, rest = tslib_1.__rest(props, ["className", "template", "skeletonsAnimation", "actions"]);
+    const { className, template, skeletonsAnimation = 'wave', actions, CourseProps } = props, rest = tslib_1.__rest(props, ["className", "template", "skeletonsAnimation", "actions", "CourseProps"]);
     /**
      * Renders course object
      */
@@ -70,7 +70,7 @@ function CourseSkeleton(inProps) {
         contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.skeletonPreviewAvatar, variant: "rounded", animation: skeletonsAnimation })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "20%", height: 14, sx: { marginTop: 1 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "40%", height: 14, sx: { marginTop: 1.5 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "60%", height: 14, sx: { marginTop: 4.5 }, variant: "rectangular" })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "courses" }))] })), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
+        contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", width: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? 60 : 100, height: 60 }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "courses" }))] })), primary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 40, style: { marginBottom: 12 } })), secondary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })] })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, height: 15, width: 60 }) }))) }) }));
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
 }

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

@@ -19,14 +19,20 @@ const Errors_1 = require("../../constants/Errors");
 const notistack_1 = require("notistack");
 const Skeleton_1 = tslib_1.__importDefault(require("./Student/Skeleton"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
-const messages = {
+const BUTTON_MESSAGES = {
     dashboard: 'ui.course.dashboard.student.button.dashboard',
     request: 'ui.course.dashboard.student.button.request',
+    signUp: 'ui.course.dashboard.student.button.signUp',
     review: 'ui.course.dashboard.student.button.review',
     cancel: 'ui.course.dashboard.student.button.cancel',
     start: 'ui.course.dashboard.student.button.start',
     continue: 'ui.course.dashboard.student.button.continue'
 };
+const SNACKBAR_MESSAGES = {
+    cancel: 'ui.course.dashboard.student.snackbar.success.cancel',
+    enroll: 'ui.course.dashboard.student.snackbar.success.enroll',
+    request: 'ui.course.dashboard.student.snackbar.success.request'
+};
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     studentContainer: `${constants_1.PREFIX}-student-container`,
@@ -92,7 +98,7 @@ function Student(inProps) {
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HOOKS
-    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
     const intl = (0, react_intl_1.useIntl)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // EFFETCS
@@ -105,20 +111,24 @@ function Student(inProps) {
     const handleRequest = (0, react_1.useCallback)(() => {
         setLoadingRequest(true);
         let request;
+        let updatedCourse;
         if (sentRequest) {
             request = api_services_1.CourseService.leaveOrRemoveCourseRequest(scCourse.id);
+            updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: null });
         }
         else {
             request = api_services_1.CourseService.joinOrAcceptInviteToCourse(scCourse.id);
+            updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE ? types_1.SCCourseJoinStatusType.REQUESTED : types_1.SCCourseJoinStatusType.JOINED });
         }
         request
             .then(() => {
-            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.dashboard.student.snackbar.success.${sentRequest ? 'cancel' : 'request'}`, defaultMessage: `ui.course.dashboard.student.snackbar.success.${sentRequest ? 'cancel' : 'request'}` }), {
+            setSCCourse(updatedCourse);
+            setSentRequest((prev) => !prev);
+            setLoadingRequest(false);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: sentRequest ? SNACKBAR_MESSAGES.request : scCourse.join_status === null ? SNACKBAR_MESSAGES.enroll : SNACKBAR_MESSAGES.cancel, defaultMessage: sentRequest ? SNACKBAR_MESSAGES.request : scCourse.join_status === null ? SNACKBAR_MESSAGES.enroll : SNACKBAR_MESSAGES.cancel }), {
                 variant: 'success',
                 autoHideDuration: 3000
             });
-            setSentRequest((prev) => !prev);
-            setLoadingRequest(false);
         })
             .catch((error) => {
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
@@ -133,10 +143,16 @@ function Student(inProps) {
         if (!scCourse) {
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
-        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: messages.dashboard, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), color: "inherit", variant: "outlined" })), ((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
-                    (scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.JOINED)) ||
-                    (scCourse.privacy === types_1.SCCoursePrivacyType.OPEN && scCourse.join_status !== types_1.SCCourseJoinStatusType.CREATOR)) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: scCourse.user_completion_rate === 0 ? messages.start : scCourse.user_completion_rate === 100 ? messages.review : messages.continue, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)), disabled: getIsNextLessonLocked(scCourse), color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined })), scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
-                    (scCourse.join_status === null || scCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: sentRequest ? messages.cancel : messages.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: BUTTON_MESSAGES.dashboard, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), color: "inherit", variant: "outlined" })), (((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.jsx)(ActionButton_1.default, { labelId: scCourse.join_status === null
+                        ? BUTTON_MESSAGES.signUp
+                        : scCourse.user_completion_rate === 0
+                            ? BUTTON_MESSAGES.start
+                            : scCourse.user_completion_rate === 100
+                                ? BUTTON_MESSAGES.review
+                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
+                    (scCourse.join_status === null || scCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: sentRequest ? BUTTON_MESSAGES.cancel : BUTTON_MESSAGES.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
@@ -145,12 +161,12 @@ function Student(inProps) {
                                 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)
-                                    }), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })) })), (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.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })] })), actionButton] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), ((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
+                                    }), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })) })), (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.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })] })), actionButton] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE || scCourse.privacy === types_1.SCCoursePrivacyType.SECRET) &&
                 (scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR ||
                     scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER ||
                     scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
                 scCourse.privacy === types_1.SCCoursePrivacyType.OPEN ||
-                scCourse.privacy === types_1.SCCoursePrivacyType.DRAFT) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { 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" }, { children: scCourse.description })) }))] })), ((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
+                scCourse.privacy === types_1.SCCoursePrivacyType.DRAFT) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { 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" }, { 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: classes.margin }, { 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: 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 === 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" }, { 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: classes.margin }, { 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

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

@@ -25,12 +25,12 @@ function FieldName(props) {
     const { endpoint, row, isNewRow, handleManageRow, editMode, handleDisableEditMode } = props;
     // STATES
     const [loading, setLoading] = (0, react_1.useState)(false);
-    const [name, setName] = (0, react_1.useState)(null);
+    const [name, setName] = (0, react_1.useState)(row.name);
     // HOOKS
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // DEBOUNCE
-    const debounceSetData = (0, material_1.debounce)((name) => {
-        setName(name);
+    const debounceSetData = (0, material_1.debounce)((newName) => {
+        setName(newName);
     }, 300);
     // HANDLERS
     const handleChange = (0, react_1.useCallback)((e) => {

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

@@ -17,6 +17,7 @@ const react_core_1 = require("@selfcommunity/react-core");
 const Errors_1 = require("../../../constants/Errors");
 const types_1 = require("../types");
 const hooks_1 = require("../hooks");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
 const classes = {
     cellWidth: `${constants_1.PREFIX}-cell-width`,
     cellAlignRight: `${constants_1.PREFIX}-cell-align-right`,
@@ -37,13 +38,14 @@ function LessonRow(props) {
     const { provider, course, section, lesson, isNewRow, handleManageLesson } = props;
     // STATES
     const [editMode, setEditMode] = (0, react_1.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HOOKS
     const { isDisabled } = (0, hooks_1.useDisabled)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // HANDLERS
-    const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
+    const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true), 100), [setEditMode]);
     const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
     const handleDeleteLesson = (0, react_1.useCallback)(() => {
         api_services_1.CourseService.deleteCourseLesson(course.id, section.id, lesson.id)
@@ -62,11 +64,14 @@ function LessonRow(props) {
             });
         });
     }, [course, section, lesson, handleManageLesson]);
+    const handleOpenDialog = (0, react_1.useCallback)(() => {
+        setOpen((prev) => !prev);
+    }, [setOpen]);
     return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "4%" }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled" }, { children: "drag" })) })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
                         url: () => isNewRow
                             ? api_services_1.Endpoints.CreateCourseLesson.url({ id: course.id, section_id: section.id })
                             : api_services_1.Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
                         method: isNewRow ? api_services_1.Endpoints.CreateCourseLesson.method : api_services_1.Endpoints.PatchCourseLesson.method
-                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(ChangeLessonStatus_1.default, { course: course, section: section, lesson: lesson, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { 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.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { 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.editCourse.tab.lessons.table.menu.view", defaultMessage: "ui.editCourse.tab.lessons.table.menu.view" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { 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.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleDeleteLesson }, { 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.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })));
+                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(ChangeLessonStatus_1.default, { course: course, section: section, lesson: lesson, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { 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.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { 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.editCourse.tab.lessons.table.menu.view", defaultMessage: "ui.editCourse.tab.lessons.table.menu.view" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { 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.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { 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.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteLesson })] }))] })));
 }
 exports.default = (0, react_1.memo)(LessonRow);

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

@@ -20,6 +20,7 @@ const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const types_2 = require("../types");
 const hooks_1 = require("../hooks");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
 const classes = {
     tableBodyIconWrapper: `${constants_1.PREFIX}-table-body-icon-wrapper`,
     tableBodyAccordion: `${constants_1.PREFIX}-table-body-accordion`,
@@ -34,7 +35,8 @@ function SectionRow(props) {
     // PROPS
     const { course, provider, section, isNewRow, handleManageSection } = props;
     // STATES
-    const [open, setOpen] = (0, react_1.useState)(true);
+    const [expand, setExpand] = (0, react_1.useState)(true);
+    const [open, setOpen] = (0, react_1.useState)(false);
     const [editMode, setEditMode] = (0, react_1.useState)(false);
     const [lessons, setLessons] = (0, react_1.useState)([]);
     // HOOKS
@@ -58,9 +60,9 @@ function SectionRow(props) {
         };
     }, []);
     // HANDLERS
-    const handleExpandAccordion = (0, react_1.useCallback)(() => setOpen((prev) => !prev), [setOpen]);
+    const handleExpandAccordion = (0, react_1.useCallback)(() => setExpand((prev) => !prev), [setExpand]);
     const handleDragEnd = (0, react_1.useCallback)((e) => {
-        if (!e.destination) {
+        if (!e.destination || e.destination.index === e.source.index) {
             return;
         }
         const tempLessons = Array.from(section.lessons);
@@ -71,7 +73,13 @@ function SectionRow(props) {
             lessons_order: tempLessons.map((tempLesson) => tempLesson.id)
         };
         api_services_1.CourseService.patchCourseSection(course.id, section.id, data)
-            .then(() => handleManageSection(tempSection, types_2.ActionLessonType.UPDATE))
+            .then(() => {
+            handleManageSection(tempSection, types_2.ActionLessonType.UPDATE);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.save", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.save" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
             .catch((error) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
@@ -127,11 +135,14 @@ function SectionRow(props) {
             }
         }
     }, [section, handleManageSection]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef, className: classes.tableBodyAccordion }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: handleExpandAccordion }, { children: open ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled" }, { children: "drag" }))] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
+    const handleOpenDialog = (0, react_1.useCallback)(() => {
+        setOpen((prev) => !prev);
+    }, [setOpen]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef, className: classes.tableBodyAccordion }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: handleExpandAccordion }, { children: expand ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled" }, { children: "drag" }))] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
                                 url: () => isNewRow
                                     ? api_services_1.Endpoints.CreateCourseSection.url({ id: course.id })
                                     : api_services_1.Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
                                 method: isNewRow ? api_services_1.Endpoints.CreateCourseSection.method : api_services_1.Endpoints.PatchCourseSection.method
-                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "53px", sx: { margin: 'auto', borderRadius: '5px' } })) : ((0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { 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.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleDeleteSection }, { 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.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
+                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "53px", sx: { margin: 'auto', borderRadius: '5px' } })) : ((0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { 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.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { 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.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
 }
 exports.default = (0, react_1.memo)(SectionRow);

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

@@ -75,7 +75,7 @@ function Lessons(props) {
     }, []);
     // HANDLERS
     const handleDragEnd = (0, react_1.useCallback)((e) => {
-        if (!e.destination) {
+        if (!e.destination || e.destination.index === e.source.index) {
             return;
         }
         const tempSections = Array.from(course.sections);
@@ -85,7 +85,13 @@ function Lessons(props) {
             sections_order: tempSections.map((tempSection) => tempSection.id)
         };
         api_services_1.CourseService.patchCourse(course.id, data)
-            .then(() => setCourse(Object.assign(Object.assign({}, course), { sections: tempSections })))
+            .then(() => {
+            setCourse(Object.assign(Object.assign({}, course), { sections: tempSections }));
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.save", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.save" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
             .catch((error) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {

package/lib/cjs/components/UserCreatedCoursesWidget/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS User Profile Categories Followed Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserCreatedCoursesWidgetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserCategoriesFollowedWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserCreatedCoursesWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function UserCreatedCoursesWidgetSkeleton(props: any): JSX.Element;

package/lib/cjs/components/UserCreatedCoursesWidget/Skeleton.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
+const Skeleton_1 = tslib_1.__importDefault(require("../Course/Skeleton"));
+const course_1 = require("../../types/course");
+const PREFIX = 'SCUserCreatedCoursesWidgetSkeleton';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    list: `${PREFIX}-list`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS User Profile Categories Followed Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserCreatedCoursesWidgetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserCategoriesFollowedWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserCreatedCoursesWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function UserCreatedCoursesWidgetSkeleton(props) {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(3)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { template: course_1.SCCourseTemplateType.SNIPPET, CourseProps: { userProfileSnippet: true }, elevation: 0 }) }, index))) })) }), ");"] })));
+}
+exports.default = UserCreatedCoursesWidgetSkeleton;

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

@@ -0,0 +1,68 @@
+import { CacheStrategies } from '@selfcommunity/utils';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { WidgetProps } from '../Widget';
+import { VirtualScrollerItemProps } from '../../types/virtualScroller';
+import { CourseProps } from '../Course';
+export interface UserCreatedCoursesWidgetProps extends VirtualScrollerItemProps, WidgetProps {
+    /**
+     * The user id
+     * @default null
+     */
+    userId: number;
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Limit the number of courses to show
+     * @default false
+     */
+    limit?: number;
+    /**
+     * Props to spread to single course object
+     * @default empty object
+     */
+    CourseProps?: CourseProps;
+    /**
+     * Caching strategies
+     * @default CacheStrategies.CACHE_FIRST
+     */
+    cacheStrategy?: CacheStrategies;
+    /**
+     * Props to spread to subscribed courses dialog
+     * @default {}
+     */
+    DialogProps?: BaseDialogProps;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Profile Courses Created Widget component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders the list of the courses that the given user follows.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserCreatedCourses)
+
+ #### Import
+ ```jsx
+ import {UserCreatedCoursesWidget} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCUserCreatedCoursesWidget` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserCreatedCoursesWidget-root|Styles applied to the root element.|
+ |title|.SCUserCreatedCoursesWidget-title|Styles applied to the title element.|
+ |noResults|.SCUserCreatedCoursesWidget-no-results|Styles applied to no results section.|
+ |showMore|.SCUserCreatedCoursesWidget-show-more|Styles applied to show more button element.|
+ |dialogRoot|.SCUserCreatedCoursesWidget-dialog-root|Styles applied to the root dialog element.|
+ |endMessage|.SCUserCreatedCoursesWidget-end-message|Styles applied to the end message element.|
+ * @param inProps
+ */
+export default function UserCreatedCoursesWidget(inProps: UserCreatedCoursesWidgetProps): JSX.Element;