@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
54 lines (53 loc) • 5.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar, Button, Icon, IconButton, Skeleton, Stack, styled, Typography, useMediaQuery, useTheme } from '@mui/material';
import { Fragment, memo, useCallback, useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import BaseDialog from '../BaseDialog';
import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
import { PREFIX } from './constants';
import AccordionLessons from '../AccordionLessons';
import { CourseService } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { SCOPE_SC_UI } from '../../constants/Errors';
import UserAvatar from '../UserAvatar';
const classes = {
dialogRoot: `${PREFIX}-dialog-root`,
contentWrapper: `${PREFIX}-content-wrapper`,
infoOuterWrapper: `${PREFIX}-info-outer-wrapper`,
infoInnerWrapper: `${PREFIX}-info-inner-wrapper`,
avatarWrapper: `${PREFIX}-avatar-wrapper`,
avatar: `${PREFIX}-avatar`
};
const DialogRoot = styled(BaseDialog, {
name: PREFIX,
slot: 'DialogRoot',
overridesResolver: (_props, styles) => styles.dialogRoot
})(() => ({}));
function SeeProgressButton(props) {
// PROPS
const { course, user } = props;
// STATES
const [open, setOpen] = useState(false);
const [student, setStudent] = useState(null);
// CONTEXTS
const scRoutingContext = useSCRouting();
// HOOKS
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
// EFFECTS
useEffect(() => {
if (open && !student) {
CourseService.getSpecificCourseInfo(course.id, { user: user.id })
.then((data) => setStudent(data))
.catch((error) => Logger.error(SCOPE_SC_UI, error));
}
}, [open, student, course, user]);
// HANDLERS
const handleToggleOpen = useCallback(() => {
setOpen((prev) => !prev);
}, [setOpen]);
return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: _jsx(Typography, Object.assign({ variant: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Link, Object.assign({}, (!course.created_by.deleted && {
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
}), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) }))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
}
export default memo(SeeProgressButton);