@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
33 lines • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = CategoryPreferences;
const tslib_1 = require("tslib");
const react_headless_1 = require("@magicbell/react-headless");
const react_1 = tslib_1.__importDefault(require("react"));
const TranslationsContext_js_1 = require("../../context/TranslationsContext.js");
const ToggleInput_js_1 = tslib_1.__importDefault(require("./ToggleInput.js"));
function CategoryPreferences({ category, onChange }) {
const preferences = (0, react_headless_1.useNotificationPreferences)();
const channels = category.channels;
const t = (0, TranslationsContext_js_1.useTranslate)();
const updatePreferences = async (channel, channelEnabled) => {
const preference = {
label: category.label,
slug: category.slug,
channels: [
{
label: channel.label,
slug: channel.slug,
enabled: channelEnabled,
},
],
};
await preferences.save({ categories: [preference] });
onChange?.({ category: preference });
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", null, t(`preferences.categories.${category.slug}`, category.label)),
channels.map((channel) => (react_1.default.createElement("div", { key: channel.slug },
react_1.default.createElement(ToggleInput_js_1.default, { id: `${category.slug}-${channel.slug}`, value: channel.enabled, onClick: (value) => updatePreferences(channel, value) }))))));
}
//# sourceMappingURL=CategoryPreferences.js.map