packages/components/containers/contacts/merge/ContactMergeDetailsModal.tsx

   1 import { useMemo } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useAddresses } from '@proton/account/addresses/hooks';
   6 import { useUserKeys } from '@proton/account/userKeys/hooks';
   7 import { Button } from '@proton/atoms';
   8 import Loader from '@proton/components/components/loader/Loader';
   9 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
  10 import ModalTwo from '@proton/components/components/modalTwo/Modal';
  11 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
  12 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  13 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  14 import useContactList from '@proton/components/containers/contacts/hooks/useContactList';
  15 import { useContactGroups } from '@proton/mail';
  16 import { useContact } from '@proton/mail/contacts/contactHooks';
  17 import { toMap } from '@proton/shared/lib/helpers/object';
  18 import type { ContactEmail } from '@proton/shared/lib/interfaces/contacts';
  19 import noop from '@proton/utils/noop';
  20
  21 import useVCardContact from '../hooks/useVCardContact';
  22 import ContactView from '../view/ContactView';
  23
  24 export interface ContactMergeDetailsModalProps {
  25     contactID: string;
  26 }
  27
  28 type Props = ContactMergeDetailsModalProps & ModalProps;
  29
  30 const ContactMergeDetailsModal = ({ contactID, ...rest }: Props) => {
  31     const [userKeysList] = useUserKeys();
  32     const [contact] = useContact(contactID);
  33     const { vCardContact, isLoading, errors } = useVCardContact({ contact, userKeysList });
  34     const { loading: loadingContactEmails, contactEmailsMap } = useContactList({});
  35
  36     const [addresses = [], loadingAddresses] = useAddresses();
  37     const ownAddresses = useMemo(() => addresses.map(({ Email }) => Email), [addresses]);
  38
  39     const [contactGroups = [], loadingContactGroups] = useContactGroups();
  40     const contactGroupsMap = useMemo(() => toMap(contactGroups), [contactGroups]);
  41
  42     if (!isLoading && !vCardContact && vCardContact === undefined) {
  43         return <>{null}</>;
  44     }
  45
  46     return (
  47         <ModalTwo size="large" className="contacts-modal" {...rest}>
  48             <ModalTwoHeader title={c('Title').t`Contact Details`} />
  49             <ModalTwoContent>
  50                 {isLoading || loadingContactEmails || loadingAddresses || loadingContactGroups ? (
  51                     <Loader />
  52                 ) : (
  53                     <ContactView
  54                         vCardContact={vCardContact!}
  55                         errors={errors}
  56                         contactID={contactID}
  57                         isPreview
  58                         contactEmails={contactEmailsMap[contactID] as ContactEmail[]}
  59                         contactGroupsMap={contactGroupsMap}
  60                         ownAddresses={ownAddresses}
  61                         onReload={noop}
  62                         onEdit={noop}
  63                         onEmailSettings={noop}
  64                         onGroupDetails={noop}
  65                         onGroupEdit={noop}
  66                         onUpgrade={noop}
  67                         onSignatureError={noop}
  68                         onDecryptionError={noop}
  69                     />
  70                 )}
  71             </ModalTwoContent>
  72             <ModalTwoFooter>
  73                 <Button color="norm" className="ml-auto" onClick={rest.onClose}>{c('Action').t`Close`}</Button>
  74             </ModalTwoFooter>
  75         </ModalTwo>
  76     );
  77 };
  78
  79 export default ContactMergeDetailsModal;