@magicbell/magicbell-react/dist/esm/components/UserPreferencesPanel/PreferencesCategories.js

React components for building a notification inbox for your app

import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useNotificationPreferences } from '@magicbell/react-headless';
import { useEffect, useMemo } from 'react';
import CategoryPreferences from './CategoryPreferences.js';
export default function PreferencesCategories({ channels: selectedChannels, categories: selectedCategories, onChange, }) {
    const preferences = useNotificationPreferences();
    const headerStyle = css `
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 0.7em !important;
  `;
    useEffect(() => {
        if (!preferences.lastFetchedAt) {
            preferences.fetch();
        }
    }, [preferences]);
    const categories = useMemo(() => {
        if (!preferences.categories?.length) {
            return preferences.categories;
        }
        let categories = preferences.categories;
        if (selectedCategories?.length) {
            const categoriesSet = new Set(selectedCategories);
            categories = categories.filter((category) => categoriesSet.has(category.slug));
        }
        if (selectedChannels?.length) {
            const channelsSet = new Set(selectedChannels);
            categories = categories.map((category) => ({
                ...category,
                channels: category.channels.filter((channel) => channelsSet.has(channel.slug)),
            }));
        }
        return categories;
    }, [preferences.categories, selectedChannels, selectedCategories]);
    if (!categories.length) {
        // TODO: Consider providing an "empty" screen or some other way to let the
        // user know they have no categories and could go create some.
        return null;
    }
    const channelHeaders = categories[0].channels;
    return (_jsx("div", { css: css `
        flex: 1;
        height: 100%;
        overflow-y: auto;
      `, children: _jsxs("div", { css: css `
          display: grid;
          gap: 1em;
          grid-template-columns: 2fr ${' 1fr'.repeat(channelHeaders.length).trim()};
          padding: 16px 20px !important;
        `, children: [_jsx("div", {}), channelHeaders.map((header) => (_jsx("div", { css: headerStyle, children: header.label }, header.slug))), categories.map((category) => (_jsx(CategoryPreferences, { category: category, onChange: onChange }, category.slug)))] }) }));
}
//# sourceMappingURL=PreferencesCategories.js.map