applications/drive/src/app/components/modals/SelectLinkToShareModal/SelectLinkToShareModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import type { ModalStateProps } from '@proton/components';
   6 import { ModalTwo, useModalTwoStatic } from '@proton/components';
   7 import { useLoading } from '@proton/hooks';
   8
   9 import type { DecryptedLink } from '../../../store';
  10 import { useDriveSharingFlags, useTreeForModals } from '../../../store';
  11 import ModalContentLoader from '../ModalContentLoader';
  12 import type { useLinkSharingModal } from '../ShareLinkModal/ShareLinkModal';
  13 import { ModalContent } from './ModalContent';
  14
  15 interface Props {
  16     shareId: string;
  17     showLinkSharingModal: ReturnType<typeof useLinkSharingModal>[1];
  18     onClose?: () => void;
  19 }
  20
  21 const SelectedFileToShareModal = ({
  22     shareId,
  23     onClose,
  24     showLinkSharingModal,
  25     ...modalProps
  26 }: Props & ModalStateProps) => {
  27     const { rootItems, toggleExpand, isLoaded: isTreeLoaded } = useTreeForModals(shareId, { rootExpanded: true });
  28     const { isSharingInviteAvailable } = useDriveSharingFlags();
  29
  30     const [loading, withLoading] = useLoading();
  31     const [selectedFile, setSelectedFile] = useState<DecryptedLink>();
  32
  33     const onSelect = async (link: DecryptedLink) => {
  34         if (!loading) {
  35             setSelectedFile(link);
  36         }
  37     };
  38
  39     const handleSubmit = async () => {
  40         if (selectedFile) {
  41             void showLinkSharingModal({ shareId, linkId: selectedFile.linkId });
  42             onClose?.();
  43         }
  44     };
  45
  46     const isSharingDisabled = !selectedFile || !selectedFile.parentLinkId;
  47
  48     const actionTextLEGACY = selectedFile?.shareUrl ? c('Action').t`Manage link` : c('Action').t`Create link`;
  49     const actionText = c('Action').t`Share`;
  50     return (
  51         <ModalTwo
  52             onReset={onClose}
  53             onClose={onClose}
  54             onSubmit={(e: any) => {
  55                 e.preventDefault();
  56                 withLoading(handleSubmit()).catch(console.error);
  57             }}
  58             size="large"
  59             as="form"
  60             {...modalProps}
  61         >
  62             {isTreeLoaded ? (
  63                 <ModalContent
  64                     isLoading={loading}
  65                     isTreeLoaded={isTreeLoaded}
  66                     rootItems={rootItems}
  67                     selectedLinkId={selectedFile?.linkId}
  68                     isSharingDisabled={isSharingDisabled}
  69                     actionText={isSharingInviteAvailable ? actionText : actionTextLEGACY}
  70                     toggleExpand={toggleExpand}
  71                     onSelect={onSelect}
  72                 />
  73             ) : (
  74                 <ModalContentLoader>{c('Info').t`Loading`}</ModalContentLoader>
  75             )}
  76         </ModalTwo>
  77     );
  78 };
  79
  80 export default SelectedFileToShareModal;
  81 export const useFileSharingModal = () => {
  82     return useModalTwoStatic(SelectedFileToShareModal);
  83 };