@selfcommunity/react-ui 0.10.2-courses.193 → 0.10.2-courses.195

package/lib/esm/components/LessonCommentObject/LessonCommentObject.js

@@ -178,7 +178,7 @@ export default function LessonCommentObject(inProps) {
      */
     function renderComment(comment) {
         const summaryHtml = getCommentContributionHtml(comment.html, scRoutingContext.url);
-        return (_jsx(React.Fragment, { children: editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, medias: comment.medias, autoFocus: true, id: `edit-${comment.id}`, onSave: handleUpdate, onCancel: handleCancel, editable: !isSavingComment, EditorProps: { uploadFile: true, uploadImage: false } }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.created_by.community_badge }, { children: _jsx(Avatar, { alt: obj.created_by.username, variant: "circular", src: comment.created_by.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsx(_Fragment, { children: _jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.created_by.username })) })), _jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(DateTimeAgo, { date: comment.created_at, showStartIcon: false })] }), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), obj.medias && obj.medias.length > 0 && (_jsx(_Fragment, { children: obj.medias.map((media) => {
+        return (_jsx(React.Fragment, { children: editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, medias: comment.medias, autoFocus: true, id: `edit-${comment.id}`, onSave: handleUpdate, onCancel: handleCancel, editable: !isSavingComment, EditorProps: { uploadFile: true, uploadImage: false, isLessonCommentEditor: true } }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.created_by.community_badge }, { children: _jsx(Avatar, { alt: obj.created_by.username, variant: "circular", src: comment.created_by.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsx(_Fragment, { children: _jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.created_by.username })) })), _jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(DateTimeAgo, { date: comment.created_at, showStartIcon: false })] }), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), obj.medias && obj.medias.length > 0 && (_jsx(_Fragment, { children: obj.medias.map((media) => {
                                             return _jsx(LessonFilePreview, { className: classes.mediaContent, media: media }, media.id);
                                         }) }))] }), scUserContext.user && scUserContext.user.id === comment.created_by.id && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(LessonCommentActionsMenu, { lesson: lessonObject, commentObject: comment, onDelete: handleDelete, onEdit: handleEdit }) })))] })) }) })) }, comment.id));
     }

package/lib/esm/components/LessonCommentObjects/LessonCommentObjects.js

@@ -174,5 +174,5 @@ export default function LessonCommentObjects(inProps) {
     if (!commentsObject.comments.length && commentsObject.isLoadingNext) {
         return _jsx(LessonCommentsObjectSkeleton, Object.assign({ count: 5 }, CommentsObjectSkeletonProps));
     }
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsxs(_Fragment, { children: [_jsx(_Fragment, { children: commentsObject.comments.length > 0 ? (_jsx(InfiniteScroll, Object.assign({ height: '100%', dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: _jsx(LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: _jsx(List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => (_jsx(ListItem, { children: _jsx(LessonCommentObject, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && (_jsx(CommentObjectReply, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon: true, editable: !commenting, onReply: handleCommentAction, EditorProps: { placeholder: intl.formatMessage(messages.commentEditorPlaceholder), uploadFile: true, uploadImage: false } }, replyKey))] }) })));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsxs(_Fragment, { children: [_jsx(_Fragment, { children: commentsObject.comments.length > 0 ? (_jsx(InfiniteScroll, Object.assign({ height: '100%', dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: _jsx(LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: _jsx(List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => (_jsx(ListItem, { children: _jsx(LessonCommentObject, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && (_jsx(CommentObjectReply, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon: true, editable: !commenting, onReply: handleCommentAction, EditorProps: { placeholder: intl.formatMessage(messages.commentEditorPlaceholder), uploadFile: true, uploadImage: false, isLessonCommentEditor: true } }, replyKey))] }) })));
 }

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js

@@ -65,7 +65,9 @@ export function VideoConference(inProps) {
         { source: Track.Source.Camera, withPlaceholder: true },
         { source: Track.Source.ScreenShare, withPlaceholder: false }
     ], { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false });
-    const tracksNoParticipants = useMemo(() => tracks.filter((t) => t.participant.name === scUserContext.user.username || t.participant.name === speakerFocused.username || t.source === 'screen_share'), [tracks, scUserContext.user]);
+    const tracksNoParticipants = useMemo(() => tracks.filter((t) => t.participant.name === scUserContext.user.username ||
+        (speakerFocused && t.participant.name === speakerFocused.username) ||
+        t.source === 'screen_share'), [tracks, scUserContext.user]);
     const handleBlur = React.useCallback((event) => {
         var _a, _b;
         if (event.target) {

package/lib/esm/components/Notification/Course/Course.js

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import { SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
@@ -55,9 +56,13 @@ export default function CourseNotification(props) {
                     }), { onClick: notificationObject.course.created_by.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.course.created_by.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
-                            course: notificationObject.course.name,
-                            link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: chunks }))
-                        } })] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+                            name: notificationObject.course.name,
+                            link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                    ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                    : SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: chunks })))
+                        } })] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                : SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
     }
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.course.created_by.deleted && {
                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.course.created_by)
@@ -66,7 +71,11 @@ export default function CourseNotification(props) {
                         }), { onClick: notificationObject.course.created_by.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.course.created_by.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                course: notificationObject.course.name,
-                                link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: chunks }))
-                            } }), _jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                                name: notificationObject.course.name,
+                                link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                        ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                        : SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: chunks })))
+                            } }), notificationObject.type !== SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON && (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                : SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Notification/Notification.js

@@ -309,6 +309,7 @@ export default function UserNotification(inProps) {
             return _jsx(EventNotification, { notificationObject: n }, i);
         }
         else if (n.type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
             n.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
             n.type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
             n.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||

package/lib/esm/components/SnippetNotifications/SnippetNotifications.js

@@ -270,6 +270,7 @@ export default function SnippetNotifications(inProps) {
             return _jsx(EventNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (n.type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
             n.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
             n.type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
             n.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||

package/lib/esm/components/ToastNotifications/ToastNotifications.js

@@ -126,7 +126,8 @@ export default function UserToastNotifications(inProps) {
                 content = _jsx(EventNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
-                n.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+                type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
+                type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
                 type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
                 type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
                 type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {

package/lib/esm/shared/AccordionLessons/AccordionLessons.js

@@ -56,7 +56,7 @@ export default function AccordionLessons(inProps) {
     if (!course) {
         return _jsx(AccordionLessonSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_less" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
                                                     date: intl.formatDate(section.available_date, { day: 'numeric', month: 'numeric', year: 'numeric' }),
                                                     hour: intl.formatDate(section.available_date, { hour: 'numeric', minute: 'numeric' })
                                                 } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {

package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Icon, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import RowSkeleton from './RowSkeleton';
 import { LoadingButton } from '@mui/lab';
 import { SCCourseJoinStatusType } from '@selfcommunity/types';
@@ -52,7 +52,7 @@ function CourseUsersTable(inProps) {
     const ref = useRef(null);
     // CONTEXTS
     const scUserContext = useSCUser();
-    // HOOKS
+    // INTL
     const intl = useIntl();
     // EFFECTS
     useEffect(() => {
@@ -118,7 +118,7 @@ function CourseUsersTable(inProps) {
                                     }
                                     return (_jsx(TableCell, Object.assign({ width: mode === SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
                                 }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
-                                    users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date()).toLocaleDateString() })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date()).toLocaleDateString() })) }), mode === SCCourseUsersTableModeType.EDIT &&
+                                    users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== SCCourseJoinStatusType.CREATOR &&
                                                 scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && _jsx(EmptyStatus, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription }), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }