packages/components/containers/labels/ToggleInheritParentFolderColor.tsx

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