@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
78 lines (77 loc) • 6.89 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { SCNotification, useSCUser } from '@selfcommunity/react-core';
import classNames from 'classnames';
import SettingsSkeleton from './SettingsSkeleton';
import { useSnackbar } from 'notistack';
import { DEFAULT_SETTINGS } from '../../../constants/UserProfile';
import { SCUserProfileSettings } from '../../../types';
import { PREFIX } from '../constants';
const classes = {
root: `${PREFIX}-settings-root`,
control: `${PREFIX}-control`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'SettingsRoot'
})(() => ({}));
export default function Settings(props) {
// PROPS
const { id = null, className = null, settings = [...DEFAULT_SETTINGS], onEditSuccess = null, startActions = null, endActions = null } = props, rest = __rest(props, ["id", "className", "settings", "onEditSuccess", "startActions", "endActions"]);
// CONTEXT
const scUserContext = useSCUser();
// STATE
const [_settings, setSetting] = useState(null);
// HOOKS
const { enqueueSnackbar } = useSnackbar();
// EFFECTS
useEffect(() => {
if (scUserContext.user) {
setSetting(scUserContext.managers.settings.all());
}
}, [scUserContext.user, scUserContext.managers.settings.all]);
// HANDLERS
const handleChange = (event) => {
scUserContext.managers.settings
.update(event.target.name, parseInt(event.target.value, 10))
.then((res) => {
setSetting(res);
if (onEditSuccess) {
onEditSuccess();
}
else {
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.userProfileEditSettings.saved", defaultMessage: "ui.userProfileEditSettings.saved" }), {
variant: 'success',
autoHideDuration: 3000
});
}
})
.catch((error) => {
console.log(error);
});
};
// RENDER
if (!scUserContext.user) {
return null;
}
if (_settings === null) {
return _jsx(SettingsSkeleton, {});
}
const renderSetting = (setting) => {
switch (setting) {
case SCUserProfileSettings.NOTIFICATION:
return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.notification.title", defaultMessage: "ui.userProfileEditSettings.notification.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.notification.label", defaultMessage: "ui.userProfileEditSettings.notification.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "notification settings", value: _settings.show_toast_notifications, name: SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.common.yes", defaultMessage: "ui.common.yes" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.common.no", defaultMessage: "ui.common.no" }) })] }))] }) }))] }, setting));
case SCUserProfileSettings.INTERACTION:
return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.title", defaultMessage: "ui.userProfileEditSettings.interaction.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.label", defaultMessage: "ui.userProfileEditSettings.interaction.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.qa_frequency, name: SCNotification.NOTIFICATIONS_SETTINGS_QA_FREQUENCY, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: -1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.immediatly", defaultMessage: "ui.userProfileEditSettings.interaction.immediatly" }) }), _jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.daily", defaultMessage: "ui.userProfileEditSettings.interaction.daily" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.never", defaultMessage: "ui.userProfileEditSettings.interaction.never" }) })] }))] }) }))] }, setting));
case SCUserProfileSettings.PRIVATE_MESSAGE:
return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.title", defaultMessage: "ui.userProfileEditSettings.privateMessage.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.label", defaultMessage: "ui.userProfileEditSettings.privateMessage.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.email_notification_not_qa, name: SCNotification.NOTIFICATIONS_SETTINGS_EMAIL_NOT_QA, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.email", defaultMessage: "ui.userProfileEditSettings.privateMessage.email" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.frontend", defaultMessage: "ui.userProfileEditSettings.privateMessage.frontend" }) })] }))] }) }))] }, setting));
default:
return null;
}
};
return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [startActions, settings.map((setting) => renderSetting(setting)), endActions] })));
}