@selfcommunity/react-ui 0.10.2-courses.162 → 0.10.2-courses.164

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/SectionRow.js

@@ -60,7 +60,7 @@ function SectionRow(props) {
     // HANDLERS
     const handleExpandAccordion = (0, react_1.useCallback)(() => setOpen((prev) => !prev), [setOpen]);
     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 +71,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" }), {

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/EditCourse/Requests.js

@@ -63,7 +63,14 @@ function Requests(props) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
+    // HANDLERS
+    const handleRemoveUser = (0, react_1.useCallback)((_msg, user) => {
+        dispatch({
+            type: widget_1.actionWidgetTypes.SET_RESULTS,
+            payload: { count: state.results.length - 1, results: state.results.filter((result) => result.id !== user.id) }
+        });
+    }, [state.count, state.results, dispatch]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
@@ -79,14 +86,7 @@ function Requests(props) {
         return () => {
             updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
         };
-    }, []);
-    // HANDLERS
-    const handleRemoveUser = (0, react_1.useCallback)((user) => {
-        dispatch({
-            type: widget_1.actionWidgetTypes.SET_RESULTS,
-            payload: { count: state.count - 1, results: state.results.filter((result) => result.id !== user.id) }
-        });
-    }, [dispatch]);
+    }, [handleRemoveUser]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: (0, jsx_runtime_1.jsx)(Status_1.default, { course: course }) })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "requests", emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
 }
 exports.default = (0, react_1.memo)(Requests);

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

@@ -70,7 +70,11 @@ function Users(props) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
+    // HANDLERS
+    const handleAddUser = (0, react_1.useCallback)((_msg, user) => {
+        dispatch({ type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS, payload: { count: state.count + 1, results: [user], initialized: true } });
+    }, [state.count, dispatch]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
@@ -86,18 +90,17 @@ function Users(props) {
         return () => {
             updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
         };
-    }, []);
-    // HANDLERS
-    const handleAddUser = (0, react_1.useCallback)((user) => {
-        dispatch({ type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS, payload: { count: state.count + 1, results: [user], initialized: true } });
-    }, [dispatch]);
+    }, [handleAddUser]);
     const handleConfirm = (0, react_1.useCallback)((newUsers) => {
         const data = {
             joined: newUsers.map((user) => user.id)
         };
         api_services_1.CourseService.changeCourseUserRole(course.id, data)
             .then(() => {
-            dispatch({ type: widget_1.actionWidgetTypes.RESET });
+            dispatch({
+                type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS,
+                payload: { count: state.count + newUsers.length, results: newUsers, initialized: true }
+            });
         })
             .catch((error) => {
             dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });

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;