@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
90 lines (89 loc) • 5.17 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Box, Icon, MenuItem, Select, Typography, useMediaQuery, useTheme } from '@mui/material';
import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { PREFIX } from '../constants';
import MenuRow from '../MenuRow';
import { Logger } from '@selfcommunity/utils';
import { SCOPE_SC_UI } from '../../../constants/Errors';
import { LoadingButton } from '@mui/lab';
import { useSnackbar } from 'notistack';
import { SCCourseLessonStatusType } from '@selfcommunity/types';
import { CourseService } from '@selfcommunity/api-services';
import { ActionLessonType } from '../types';
const OPTIONS = [
{
id: 'ui.editCourse.tab.lessons.table.select.draft',
value: 'ui.editCourse.tab.lessons.table.select.draft'
},
{
id: 'ui.editCourse.tab.lessons.table.select.published',
value: 'ui.editCourse.tab.lessons.table.select.published'
}
];
const classes = {
changeLessonStatusPublishedWrapper: `${PREFIX}-change-lesson-status-published-wrapper`,
changeLessonStatusIconDraft: `${PREFIX}-change-lesson-status-icon-draft`
};
function ChangeLessonStatus(props) {
// PROPS
const { course, section, lesson, onChange, disabled } = props;
// HOOKS
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const { enqueueSnackbar } = useSnackbar();
// STATES
const [value, setValue] = useState('');
const [loading, setLoading] = useState(false);
// EFFECTS
useEffect(() => {
setValue(`ui.editCourse.tab.lessons.table.select.${lesson.status || 'draft'}`);
}, [lesson, setValue]);
// MEMOS
const hasPublished = useMemo(() => value === 'ui.editCourse.tab.lessons.table.select.published', [value]);
const icon = useMemo(() => value === 'ui.editCourse.tab.lessons.table.select.draft' ? (_jsx(Box, { className: classes.changeLessonStatusIconDraft })) : (_jsx(Icon, { children: "circle_checked" })), [value]);
// HANDLERS
const handleAction = useCallback((newValue) => {
setLoading(true);
const newStatus = newValue.endsWith(SCCourseLessonStatusType.DRAFT) ? SCCourseLessonStatusType.DRAFT : SCCourseLessonStatusType.PUBLISHED;
const data = {
status: newStatus
};
CourseService.patchCourseLesson(course.id, section.id, lesson.id, data)
.then(() => {
setValue(newValue);
setLoading(false);
onChange(Object.assign(Object.assign({}, lesson), { status: newStatus }), ActionLessonType.UPDATE);
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.save", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.save" }), {
variant: 'success',
autoHideDuration: 3000
});
})
.catch((error) => {
Logger.error(SCOPE_SC_UI, error);
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
variant: 'error',
autoHideDuration: 3000
});
});
}, [course, section, lesson, setLoading, setValue]);
const handleChange = useCallback((e) => handleAction(e.target.value), [handleAction]);
const handleClick = useCallback((e) => {
const newValue = e.currentTarget.getAttribute('data-value');
if (newValue !== value) {
handleAction(newValue);
}
}, [handleAction, value]);
return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
padding: 0,
':hover': {
backgroundColor: 'unset'
}
} }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
padding: 0,
':hover': {
backgroundColor: 'unset'
}
} }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }), i))) }))) }));
}
export default memo(ChangeLessonStatus);