@selfcommunity/react-ui/lib/esm/components/EditCourse/Options.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Stack, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { PREFIX } from './constants';
import { memo, useCallback, useState } from 'react';
import { Logger } from '@selfcommunity/utils';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { useSnackbar } from 'notistack';
import SwitchForm from './Options/SwitchForm';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { LoadingButton } from '@mui/lab';
import { CourseService } from '@selfcommunity/api-services';
const classes = {
    optionsContainer: `${PREFIX}-options-container`,
    optionsWrapper: `${PREFIX}-options-wrapper`,
    optionsDivider: `${PREFIX}-options-divider`,
    optionsButtonWrapper: `${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] = useState(null);
    const [canSave, setCanSave] = useState(false);
    const [loading, setLoading] = useState(false);
    // HOOKS
    const { enqueueSnackbar } = useSnackbar();
    // EFFECTS
    useDeepCompareEffect(() => {
        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 = 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 = useCallback(() => {
        setLoading(true);
        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(_jsx(FormattedMessage, { id: "ui.contributionActionMenu.actionSuccess", defaultMessage: "ui.contributionActionMenu.actionSuccess" }), {
                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, tempOptions, setCanSave, setLoading]);
    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
}
export default memo(Options);