packages/components/containers/mail/MailDensityModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { useUserSettings } from '@proton/account/userSettings/hooks';
   4 import { Button } from '@proton/atoms';
   5 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   6 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   7 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   8 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
   9 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  10 import useApi from '@proton/components/hooks/useApi';
  11 import useEventManager from '@proton/components/hooks/useEventManager';
  12 import useNotifications from '@proton/components/hooks/useNotifications';
  13 import { useLoading } from '@proton/hooks';
  14 import { updateDensity } from '@proton/shared/lib/api/settings';
  15 import type { DENSITY } from '@proton/shared/lib/constants';
  16
  17 import DensityRadiosCards from '../layouts/DensityRadiosCards';
  18
  19 import './ModalSettingsLayoutCards.scss';
  20
  21 const MailDensityModal = (props: ModalProps) => {
  22     const api = useApi();
  23     const { call } = useEventManager();
  24     const [{ Density }] = useUserSettings();
  25     const [loading, withLoading] = useLoading();
  26     const { createNotification } = useNotifications();
  27     const title = c('Title').t`Mailbox density`;
  28
  29     const { onClose } = props;
  30
  31     const handleChangeDensity = async (density: DENSITY) => {
  32         await api(updateDensity(density));
  33         await call();
  34         createNotification({ text: c('Success').t`Preference saved` });
  35     };
  36
  37     const handleSubmit = () => onClose?.();
  38
  39     return (
  40         <ModalTwo {...props}>
  41             <ModalTwoHeader title={title} />
  42             <ModalTwoContent>
  43                 <div className="flex flex-column flex-nowrap mb-4">
  44                     <span className="mb-4" id="densityMode_desc">
  45                         {c('Label').t`Select what your list of messages looks like by default.`}
  46                     </span>
  47                     <DensityRadiosCards
  48                         density={Density}
  49                         describedByID="densityMode_desc"
  50                         onChange={(value) => withLoading(handleChangeDensity(value))}
  51                         loading={loading}
  52                         liClassName="w-full"
  53                         className="layoutCards-two-per-row"
  54                     />
  55                 </div>
  56             </ModalTwoContent>
  57             <ModalTwoFooter>
  58                 <Button className="ml-auto" color="norm" onClick={handleSubmit}>{c('Action').t`OK`}</Button>
  59             </ModalTwoFooter>
  60         </ModalTwo>
  61     );
  62 };
  63
  64 export default MailDensityModal;