applications/drive/src/app/components/layout/sidebar/DriveSidebar/DriveSidebar.tsx

   1 import type { ReactNode } from 'react';
   2 import { useEffect, useState } from 'react';
   3
   4 import { AppsDropdown, Sidebar, SidebarDrawerItems, SidebarNav } from '@proton/components';
   5 import SidebarStorageUpsell from '@proton/components/containers/payments/subscription/SidebarStorageUpsell';
   6 import useDisplayContactsWidget from '@proton/components/hooks/useDisplayContactsWidget';
   7 import useEffectOnce from '@proton/hooks/useEffectOnce';
   8 import { APPS } from '@proton/shared/lib/constants';
   9
  10 import { useActiveShare } from '../../../../hooks/drive/useActiveShare';
  11 import { useDebug } from '../../../../hooks/drive/useDebug';
  12 import type { ShareWithKey } from '../../../../store';
  13 import { useDefaultShare } from '../../../../store';
  14 import { useCreateDevice } from '../../../../store/_shares/useCreateDevice';
  15 import { useCreatePhotos } from '../../../../store/_shares/useCreatePhotos';
  16 import { logPerformanceMarker } from '../../../../utils/performance';
  17 import DriveSidebarFooter from './DriveSidebarFooter';
  18 import DriveSidebarList from './DriveSidebarList';
  19
  20 interface Props {
  21     isHeaderExpanded: boolean;
  22     toggleHeaderExpanded: () => void;
  23     primary: ReactNode;
  24     logo: ReactNode;
  25 }
  26
  27 const DriveSidebar = ({ logo, primary, isHeaderExpanded, toggleHeaderExpanded }: Props) => {
  28     const { activeShareId } = useActiveShare();
  29     const { getDefaultShare } = useDefaultShare();
  30     const debug = useDebug();
  31
  32     const [defaultShare, setDefaultShare] = useState<ShareWithKey>();
  33     const { createDevice } = useCreateDevice();
  34     const { createPhotosShare } = useCreatePhotos();
  35
  36     useEffectOnce(() => {
  37         logPerformanceMarker('drive_performance_clicktonavrendered_histogram');
  38     });
  39     useEffect(() => {
  40         void getDefaultShare().then(setDefaultShare);
  41     }, [getDefaultShare]);
  42
  43     const displayContactsInHeader = useDisplayContactsWidget();
  44
  45     /*
  46      * The sidebar supports multiple shares, but as we currently have
  47      * only one main share in use, we gonna use the default share only,
  48      * unless the opposite is decided.
  49      */
  50     const shares = defaultShare ? [defaultShare] : [];
  51     return (
  52         <Sidebar
  53             app={APPS.PROTONDRIVE}
  54             appsDropdown={<AppsDropdown app={APPS.PROTONDRIVE} />}
  55             logo={logo}
  56             expanded={isHeaderExpanded}
  57             onToggleExpand={toggleHeaderExpanded}
  58             primary={primary}
  59             version={<DriveSidebarFooter />}
  60             growContent={false}
  61             postFooter={<SidebarStorageUpsell app={APPS.PROTONDRIVE} />}
  62         >
  63             <SidebarNav>
  64                 <div>
  65                     <DriveSidebarList shareId={activeShareId} userShares={shares} />
  66                     {displayContactsInHeader && <SidebarDrawerItems toggleHeaderDropdown={toggleHeaderExpanded} />}
  67                 </div>
  68             </SidebarNav>
  69             {debug ? <button onClick={createDevice}>Create device</button> : null}
  70             {debug ? <button onClick={createPhotosShare}>Create photos</button> : null}
  71         </Sidebar>
  72     );
  73 };
  74
  75 export default DriveSidebar;