applications/drive/src/app/containers/PreviewContainer.tsx

   1 import { useCallback, useEffect, useMemo, useRef } from 'react';
   2 import type { RouteComponentProps } from 'react-router-dom';
   3 import { useLocation } from 'react-router-dom';
   4
   5 import { c } from 'ttag';
   6
   7 import { FilePreview, NavigationControl } from '@proton/components';
   8 import { HTTP_STATUS_CODE } from '@proton/shared/lib/constants';
   9 import { getCanAdmin } from '@proton/shared/lib/drive/permissions';
  10 import { API_CUSTOM_ERROR_CODES } from '@proton/shared/lib/errors';
  11
  12 import { SignatureAlertBody } from '../components/SignatureAlert';
  13 import SignatureIcon from '../components/SignatureIcon';
  14 import { useDetailsModal } from '../components/modals/DetailsModal';
  15 import { useLinkSharingModal } from '../components/modals/ShareLinkModal/ShareLinkModal';
  16 import useIsEditEnabled from '../components/sections/useIsEditEnabled';
  17 import { useActiveShare } from '../hooks/drive/useActiveShare';
  18 import useNavigate from '../hooks/drive/useNavigate';
  19 import { useActions, useDriveSharingFlags, useFileView } from '../store';
  20 import { useOpenInDocs } from '../store/_documents';
  21 // TODO: ideally not use here
  22 import useSearchResults from '../store/_search/useSearchResults';
  23 import { getSharedStatus } from '../utils/share';
  24
  25 export default function PreviewContainer({ match }: RouteComponentProps<{ shareId: string; linkId: string }>) {
  26     const { shareId, linkId } = match.params;
  27     const {
  28         navigateToLink,
  29         navigateToSharedByMe,
  30         navigateToSharedWithMe,
  31         navigateToTrash,
  32         navigateToRoot,
  33         navigateToNoAccess,
  34         navigateToSearch,
  35     } = useNavigate();
  36     const { setFolder } = useActiveShare();
  37     const [detailsModal, showDetailsModal] = useDetailsModal();
  38     const [linkSharingModal, showLinkSharingModal] = useLinkSharingModal();
  39     const { query: lastQuery } = useSearchResults();
  40     const { isSharingInviteAvailable } = useDriveSharingFlags();
  41     const { saveFile } = useActions();
  42
  43     const isEditEnabled = useIsEditEnabled();
  44
  45     const urlParams = new URLSearchParams(useLocation().search);
  46     const isShareAction = urlParams.has('share');
  47     const referer = urlParams.get('r');
  48     const useNavigation =
  49         !referer?.startsWith('/shared-with-me') &&
  50         !referer?.startsWith('/shared-urls') &&
  51         !referer?.startsWith('/trash') &&
  52         !referer?.startsWith('/search');
  53
  54     const {
  55         permissions,
  56         isLinkLoading,
  57         isContentLoading,
  58         error,
  59         link,
  60         contents,
  61         contentsMimeType,
  62         downloadFile,
  63         navigation,
  64     } = useFileView(shareId, linkId, useNavigation);
  65
  66     const { showOpenInDocs, openInDocsAction } = useOpenInDocs(link);
  67
  68     const isAdmin = useMemo(() => getCanAdmin(permissions), [permissions]);
  69
  70     // Open sharing modal through URL parameter - needed for Proton Docs
  71     useEffect(() => {
  72         if (isShareAction) {
  73             showLinkSharingModal({ shareId, linkId });
  74         }
  75     }, []);
  76
  77     // If the link is not type of file, probably user modified the URL.
  78     useEffect(() => {
  79         if (link && !link.isFile) {
  80             navigateToLink(shareId, linkId, false);
  81         }
  82     }, [link?.isFile]);
  83
  84     useEffect(() => {
  85         if (link && !referer?.startsWith('/shared-with-me')) {
  86             setFolder({ shareId, linkId: link.parentLinkId });
  87         }
  88     }, [shareId, link?.parentLinkId]);
  89
  90     useEffect(() => {
  91         if (!error) {
  92             return;
  93         }
  94         if (error.data?.Code === API_CUSTOM_ERROR_CODES.NOT_FOUND) {
  95             navigateToNoAccess();
  96         } else if (
  97             // Block not found (storage response).
  98             error.status === HTTP_STATUS_CODE.NOT_FOUND ||
  99             error.data?.Code === API_CUSTOM_ERROR_CODES.INVALID_ID
 100         ) {
 101             navigateToRoot();
 102         }
 103     }, [error]);
 104
 105     const navigateToParent = useCallback(() => {
 106         if (referer?.startsWith('/shared-with-me')) {
 107             navigateToSharedWithMe();
 108             return;
 109         }
 110         if (referer?.startsWith('/shared-urls')) {
 111             navigateToSharedByMe();
 112             return;
 113         }
 114         if (referer?.startsWith('/trash')) {
 115             navigateToTrash();
 116             return;
 117         }
 118         if (referer?.startsWith('/search')) {
 119             if (lastQuery) {
 120                 navigateToSearch(lastQuery);
 121                 return;
 122             }
 123         }
 124         if (link?.parentLinkId) {
 125             navigateToLink(shareId, link.parentLinkId, false);
 126         }
 127     }, [link?.parentLinkId, shareId, referer]);
 128
 129     const onOpen = useCallback(
 130         (linkId: string | undefined) => {
 131             if (linkId) {
 132                 navigateToLink(shareId, linkId, true);
 133             }
 134         },
 135         [shareId]
 136     );
 137
 138     const signatureStatus = useMemo(() => {
 139         if (!link) {
 140             return;
 141         }
 142
 143         return (
 144             <SignatureIcon isFile={link.isFile} signatureIssues={link.signatureIssues} className="ml-2 color-danger" />
 145         );
 146     }, [link]);
 147
 148     const signatureConfirmation = useMemo(() => {
 149         if (!link?.signatureIssues?.blocks) {
 150             return;
 151         }
 152
 153         return (
 154             <SignatureAlertBody
 155                 signatureIssues={link.signatureIssues}
 156                 signatureAddress={link.signatureAddress}
 157                 isFile={link.isFile}
 158                 name={link.name}
 159             />
 160         );
 161     }, [link]);
 162
 163     const handleSaveFile = useCallback(
 164         (content: Uint8Array[]) => {
 165             if (!link) {
 166                 return Promise.reject('missing link');
 167             }
 168
 169             return saveFile(shareId, link.parentLinkId, link.name, link.mimeType, content);
 170         },
 171         [shareId, link?.name, link?.parentLinkId]
 172     );
 173
 174     const rootRef = useRef<HTMLDivElement>(null);
 175
 176     return (
 177         <>
 178             <FilePreview
 179                 isMetaLoading={isLinkLoading}
 180                 isLoading={isContentLoading}
 181                 error={error ? error.message || error.toString?.() || c('Info').t`Unknown error` : undefined}
 182                 contents={contents}
 183                 fileName={link?.name}
 184                 mimeType={contentsMimeType}
 185                 isSharingInviteAvailable={isSharingInviteAvailable}
 186                 sharedStatus={getSharedStatus(link)}
 187                 fileSize={link?.size}
 188                 onClose={navigateToParent}
 189                 onDownload={downloadFile}
 190                 onSave={isEditEnabled ? handleSaveFile : undefined}
 191                 onDetails={() => showDetailsModal({ shareId, linkId })}
 192                 onShare={
 193                     !isAdmin || isLinkLoading || !!link?.trashed
 194                         ? undefined
 195                         : () => showLinkSharingModal({ shareId, linkId })
 196                 }
 197                 onOpenInDocs={
 198                     showOpenInDocs
 199                         ? () => {
 200                               void openInDocsAction({ shareId, linkId });
 201                           }
 202                         : undefined
 203                 }
 204                 imgThumbnailUrl={link?.cachedThumbnailUrl}
 205                 ref={rootRef}
 206                 navigationControls={
 207                     link &&
 208                     navigation && (
 209                         <NavigationControl
 210                             current={navigation.current}
 211                             total={navigation.total}
 212                             rootRef={rootRef}
 213                             onPrev={() => onOpen?.(navigation.prevLinkId)}
 214                             onNext={() => onOpen?.(navigation.nextLinkId)}
 215                         />
 216                     )
 217                 }
 218                 signatureStatus={signatureStatus}
 219                 signatureConfirmation={signatureConfirmation}
 220             />
 221             {detailsModal}
 222             {linkSharingModal}
 223         </>
 224     );
 225 }