packages/components/containers/otherMailPreferences/UnreadFaviconCounterToggle.tsx

   1 import { c } from 'ttag';
   2
   3 import Toggle from '@proton/components/components/toggle/Toggle';
   4 import useApi from '@proton/components/hooks/useApi';
   5 import useEventManager from '@proton/components/hooks/useEventManager';
   6 import useNotifications from '@proton/components/hooks/useNotifications';
   7 import useToggle from '@proton/components/hooks/useToggle';
   8 import { useLoading } from '@proton/hooks';
   9 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
  10 import { updateDisplayUnreadFavicon } from '@proton/shared/lib/api/mailSettings';
  11
  12 interface Props {
  13     id?: string;
  14     className?: string;
  15 }
  16
  17 export const UnreadFaviconCounterToggle = ({ id, className }: Props) => {
  18     const [mailSettings] = useMailSettings();
  19     const { call } = useEventManager();
  20     const api = useApi();
  21
  22     const { state, toggle } = useToggle(!!mailSettings?.UnreadFavicon);
  23     const { createNotification } = useNotifications();
  24     const [loading, withLoading] = useLoading();
  25
  26     const handleChange = async (checked: boolean) => {
  27         await api(updateDisplayUnreadFavicon(+checked));
  28         await call();
  29         toggle();
  30         createNotification({ text: c('Success').t`Preference saved` });
  31     };
  32
  33     return (
  34         <Toggle
  35             id={id}
  36             className={className}
  37             checked={state}
  38             onChange={({ target }) => withLoading(handleChange(target.checked))}
  39             loading={loading}
  40         />
  41     );
  42 };