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