@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
93 lines (92 loc) • 5.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const constants_1 = require("../constants");
const MenuRow_1 = tslib_1.__importDefault(require("../MenuRow"));
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../../constants/Errors");
const lab_1 = require("@mui/lab");
const notistack_1 = require("notistack");
const types_1 = require("@selfcommunity/types");
const api_services_1 = require("@selfcommunity/api-services");
const types_2 = require("../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: `${constants_1.PREFIX}-change-lesson-status-published-wrapper`,
changeLessonStatusIconDraft: `${constants_1.PREFIX}-change-lesson-status-icon-draft`
};
function ChangeLessonStatus(props) {
// PROPS
const { course, section, lesson, onChange, disabled } = props;
// HOOKS
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
// STATES
const [value, setValue] = (0, react_1.useState)('');
const [loading, setLoading] = (0, react_1.useState)(false);
// EFFECTS
(0, react_1.useEffect)(() => {
setValue(`ui.editCourse.tab.lessons.table.select.${lesson.status || 'draft'}`);
}, [lesson, setValue]);
// MEMOS
const hasPublished = (0, react_1.useMemo)(() => value === 'ui.editCourse.tab.lessons.table.select.published', [value]);
const icon = (0, react_1.useMemo)(() => value === 'ui.editCourse.tab.lessons.table.select.draft' ? ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.changeLessonStatusIconDraft })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" })), [value]);
// HANDLERS
const handleAction = (0, react_1.useCallback)((newValue) => {
setLoading(true);
const newStatus = newValue.endsWith(types_1.SCCourseLessonStatusType.DRAFT) ? types_1.SCCourseLessonStatusType.DRAFT : types_1.SCCourseLessonStatusType.PUBLISHED;
const data = {
status: newStatus
};
api_services_1.CourseService.patchCourseLesson(course.id, section.id, lesson.id, data)
.then(() => {
setValue(newValue);
setLoading(false);
onChange(Object.assign(Object.assign({}, lesson), { status: newStatus }), 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" }), {
variant: 'error',
autoHideDuration: 3000
});
});
}, [course, section, lesson, setLoading, setValue]);
const handleChange = (0, react_1.useCallback)((e) => handleAction(e.target.value), [handleAction]);
const handleClick = (0, react_1.useCallback)((e) => {
const newValue = e.currentTarget.getAttribute('data-value');
if (newValue !== value) {
handleAction(newValue);
}
}, [handleAction, value]);
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(MenuRow_1.default, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
padding: 0,
':hover': {
backgroundColor: 'unset'
}
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
padding: 0,
':hover': {
backgroundColor: 'unset'
}
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }), i))) }))) }));
}
exports.default = (0, react_1.memo)(ChangeLessonStatus);