Use notification preferences

import { useNotificationPreferences, PUSH_EVENT_TYPES } from "@sublay/react-js";

function NotificationSettings() {
  const { disabledTypes, loading, updating, updatePreferences } =
    useNotificationPreferences();

  if (loading || !disabledTypes) return <Spinner />;

  const toggle = (type: (typeof PUSH_EVENT_TYPES)[number]) => {
    const next = disabledTypes.includes(type)
      ? disabledTypes.filter((t) => t !== type)
      : [...disabledTypes, type];
    return updatePreferences(next);
  };

  return (
    <ul>
      {PUSH_EVENT_TYPES.map((type) => (
        <li key={type}>
          <label>
            <input
              type="checkbox"
              // checked = push ENABLED = NOT in disabledTypes
              checked={!disabledTypes.includes(type)}
              disabled={updating}
              onChange={() => toggle(type)}
            />
            {type}
          </label>
        </li>
      ))}
    </ul>
  );
}