applications/drive/src/app/components/sections/SharedWithMe/SharedWithMeView.tsx

   1 import { useEffect } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useAppTitle } from '@proton/components';
   6
   7 import { useActiveShare } from '../../../hooks/drive/useActiveShare';
   8 import { useDriveSharingFlags, useSharedWithMeView } from '../../../store';
   9 import { Actions, traceTelemetry } from '../../../utils/telemetry';
  10 import { FileBrowserStateProvider } from '../../FileBrowser';
  11 import ToolbarRow from '../ToolbarRow/ToolbarRow';
  12 import SharedWithMe from './SharedWithMe';
  13 import SharedWithMeToolbar from './SharedWithMeToolbar';
  14
  15 const SharedWithMeView = () => {
  16     useAppTitle(c('Title').t`Shared with me`);
  17     const { activeShareId, setDefaultRoot } = useActiveShare();
  18
  19     useEffect(() => {
  20         setDefaultRoot();
  21         traceTelemetry(Actions.SignUpFlowAndRedirectCompleted).end();
  22     }, []);
  23
  24     const sharedWithMeView = useSharedWithMeView(activeShareId);
  25     const hasSharedItems = !!sharedWithMeView.items.length;
  26
  27     const { isSharingInviteAvailable } = useDriveSharingFlags();
  28     if (!hasSharedItems && !isSharingInviteAvailable) {
  29         return null;
  30     }
  31
  32     // rootShareId is unique per item in shared with me section, so we can use it as id key
  33     return (
  34         <FileBrowserStateProvider itemIds={sharedWithMeView.items.map(({ rootShareId }) => rootShareId)}>
  35             <ToolbarRow
  36                 titleArea={<span className="text-strong pl-1">{c('Info').t`Shared with me`}</span>}
  37                 toolbar={<SharedWithMeToolbar shareId={activeShareId} items={sharedWithMeView.items} />}
  38             />
  39             <SharedWithMe shareId={activeShareId} sharedWithMeView={sharedWithMeView} />
  40         </FileBrowserStateProvider>
  41     );
  42 };
  43
  44 export default SharedWithMeView;