@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
97 lines (96 loc) • 5.19 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_intl_1 = require("react-intl");
const constants_1 = require("./constants");
const react_1 = require("react");
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../constants/Errors");
const notistack_1 = require("notistack");
const SwitchForm_1 = tslib_1.__importDefault(require("./Options/SwitchForm"));
const use_deep_compare_effect_1 = tslib_1.__importDefault(require("use-deep-compare-effect"));
const lab_1 = require("@mui/lab");
const api_services_1 = require("@selfcommunity/api-services");
const classes = {
optionsContainer: `${constants_1.PREFIX}-options-container`,
optionsWrapper: `${constants_1.PREFIX}-options-wrapper`,
optionsDivider: `${constants_1.PREFIX}-options-divider`,
optionsButtonWrapper: `${constants_1.PREFIX}-options-button-wrapper`
};
const OPTIONS = {
enforce_lessons_order: {
title: 'ui.editCourse.tab.options',
description: 'ui.editCourse.tab.options.description'
},
new_comment_notification_enabled: {
title: 'ui.editCourse.tab.options.notifications',
description: 'ui.editCourse.tab.options.notifications.description'
},
hide_member_count: {
title: 'ui.editCourse.tab.options.permissions',
description: 'ui.editCourse.tab.options.permissions.description'
}
};
function Options(props) {
// PROPS
const { course, setCourse } = props;
// STATES
const [tempOptions, setTempOptions] = (0, react_1.useState)(null);
const [canSave, setCanSave] = (0, react_1.useState)(false);
const [loading, setLoading] = (0, react_1.useState)(false);
// HOOKS
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
// EFFECTS
(0, use_deep_compare_effect_1.default)(() => {
if (!tempOptions) {
return;
}
if (course.enforce_lessons_order !== tempOptions.enforce_lessons_order ||
course.new_comment_notification_enabled !== tempOptions.new_comment_notification_enabled ||
course.hide_member_count !== tempOptions.hide_member_count) {
setCanSave(true);
}
else {
setCanSave(false);
}
}, [course, tempOptions, setCanSave]);
// HANDLERS
const handleChange = (0, react_1.useCallback)((key, value) => {
setTempOptions((prevOptions) => {
if (!prevOptions) {
return {
enforce_lessons_order: course.enforce_lessons_order,
new_comment_notification_enabled: course.new_comment_notification_enabled,
hide_member_count: course.hide_member_count,
[key]: value
};
}
return Object.assign(Object.assign({}, prevOptions), { [key]: value });
});
}, [setTempOptions, course]);
const handleSubmit = (0, react_1.useCallback)(() => {
setLoading(true);
api_services_1.CourseService.patchCourse(course.id, Object.assign({ id: course.id }, tempOptions))
.then((data) => {
setCourse(Object.assign(Object.assign({}, course), data));
setTempOptions(null);
setCanSave(false);
setLoading(false);
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.actionSuccess", defaultMessage: "ui.contributionActionMenu.actionSuccess" }), {
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, tempOptions, setCanSave, setLoading]);
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.optionsContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => ((0, jsx_runtime_1.jsx)(SwitchForm_1.default, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
}
exports.default = (0, react_1.memo)(Options);