packages/components/containers/messages/EmbeddedToggle.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 { updateHideEmbeddedImages } from '@proton/shared/lib/api/mailSettings';
  10 import { SHOW_IMAGES } from '@proton/shared/lib/mail/mailSettings';
  11
  12 interface Props {
  13     id: string;
  14     hideEmbeddedImages: number;
  15     onChange: (value: number) => void;
  16 }
  17
  18 const EmbeddedToggle = ({ id, hideEmbeddedImages, onChange }: Props) => {
  19     const { createNotification } = useNotifications();
  20     const [loading, withLoading] = useLoading();
  21     const { call } = useEventManager();
  22     const api = useApi();
  23     const { state, toggle } = useToggle(hideEmbeddedImages === SHOW_IMAGES.SHOW);
  24
  25     const handleChange = async (checked: boolean) => {
  26         const bit = checked ? SHOW_IMAGES.SHOW : SHOW_IMAGES.HIDE;
  27         await api(updateHideEmbeddedImages(bit));
  28         await call();
  29         toggle();
  30         onChange(bit);
  31         createNotification({ text: c('Success').t`Preference saved` });
  32     };
  33     return (
  34         <Toggle
  35             id={id}
  36             checked={state}
  37             onChange={({ target }) => withLoading(handleChange(target.checked))}
  38             loading={loading}
  39         />
  40     );
  41 };
  42
  43 export default EmbeddedToggle;