@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
61 lines (60 loc) • 3.5 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Stack, styled, Tab, Typography, useThemeProps } from '@mui/material';
import { PREFIX } from './constants';
import HeaderCourseDashboard from './Header';
import { memo, useCallback, useState } from 'react';
import { InfoPositionType, TabContentType } from './types';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import InfoCourseDashboard from './Teacher/Info';
import { TabContext, TabList, TabPanel } from '@mui/lab';
import Students from './Teacher/Students';
import Comments from './Teacher/Comments';
import { useSCFetchCourse } from '@selfcommunity/react-core';
import { CourseInfoViewType } from '@selfcommunity/api-services';
import TeacherSkeleton from './Teacher/Skeleton';
const classes = {
root: `${PREFIX}-root`,
infoWrapper: `${PREFIX}-info-wrapper`,
tabList: `${PREFIX}-tab-list`,
tab: `${PREFIX}-tab`,
tabPanel: `${PREFIX}-tab-panel`,
contrastColor: `${PREFIX}-contrast-color`
};
const TAB_DATA = [
{
label: 'ui.course.dashboard.teacher.tab.students',
value: TabContentType.STUDENTS
},
{
label: 'ui.course.dashboard.teacher.tab.comments',
value: TabContentType.COMMENTS
}
];
const Root = styled(Box, {
name: PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.root
})(() => ({}));
function Teacher(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { courseId, course, className } = props, rest = __rest(props, ["courseId", "course", "className"]);
// STATES
const [tabValue, setTabValue] = useState(TabContentType.STUDENTS);
// HOOKS
const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view: CourseInfoViewType.DASHBOARD } });
// HANDLERS
const handleTabChange = useCallback((_evt, newTabValue) => {
setTabValue(newTabValue);
}, [setTabValue]);
if (!scCourse) {
return _jsx(TeacherSkeleton, {});
}
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse, hasAction: true }), _jsxs(Stack, Object.assign({ className: classes.infoWrapper }, { children: [_jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: InfoPositionType.FIRST }), _jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: InfoPositionType.SECOND })] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.contrastColor) }, i))) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentType.STUDENTS }, { children: _jsx(Students, { course: scCourse }) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentType.COMMENTS }, { children: _jsx(Comments, { course: scCourse }) }))] }))] })));
}
export default memo(Teacher);