applications/drive/src/app/components/layout/DriveWindow.tsx

   1 import { useState } from 'react';
   2 import { useLocation } from 'react-router-dom';
   3
   4 import { useUser } from '@proton/account/user/hooks';
   5 import {
   6     CalendarDrawerAppButton,
   7     ContactDrawerAppButton,
   8     DrawerApp,
   9     DrawerSidebar,
  10     DrawerVisibilityButton,
  11     PrivateAppContainer,
  12     PrivateMainArea,
  13     QuickSettingsAppButton,
  14     SidebarLogo,
  15     TopBanners,
  16     useDrawer,
  17     useOpenDrawerOnLoad,
  18     useToggle,
  19 } from '@proton/components';
  20 import { APPS } from '@proton/shared/lib/constants';
  21 import { isAppInView } from '@proton/shared/lib/drawer/helpers';
  22 import { DRAWER_NATIVE_APPS } from '@proton/shared/lib/drawer/interfaces';
  23 import isTruthy from '@proton/utils/isTruthy';
  24
  25 import { useIsActiveLinkReadOnly } from '../../store/_views/utils';
  26 import AppErrorBoundary from '../AppErrorBoundary';
  27 import FileRecoveryBanner from '../ResolveLockedVolumes/LockedVolumesBanner';
  28 import DriveQuickSettings from '../drawer/DriveQuickSettings';
  29 import { DriveHeaderPrivate } from './DriveHeader';
  30 import { getDriveDrawerPermissions } from './drawerPermissions';
  31 import { ActionMenuButton } from './sidebar/ActionMenu/ActionMenuButton';
  32 import DriveSidebar from './sidebar/DriveSidebar';
  33
  34 interface Props {
  35     children?: JSX.Element | JSX.Element[];
  36 }
  37
  38 const DriveWindow = ({ children }: Props) => {
  39     const [user] = useUser();
  40     const { state: expanded, toggle: toggleExpanded } = useToggle();
  41
  42     const [recoveryBannerVisible, setRecoveryBannerVisible] = useState(true);
  43
  44     const { isReadOnly } = useIsActiveLinkReadOnly();
  45
  46     useOpenDrawerOnLoad();
  47     const { appInView, showDrawerSidebar } = useDrawer();
  48     const location = useLocation();
  49
  50     const fileRecoveryBanner = recoveryBannerVisible ? (
  51         <FileRecoveryBanner
  52             onClose={() => {
  53                 setRecoveryBannerVisible(false);
  54             }}
  55         />
  56     ) : null;
  57
  58     const top = <TopBanners app={APPS.PROTONDRIVE}>{fileRecoveryBanner}</TopBanners>;
  59
  60     const drawerSettingsButton = (
  61         <QuickSettingsAppButton aria-expanded={isAppInView(DRAWER_NATIVE_APPS.QUICK_SETTINGS, appInView)} />
  62     );
  63
  64     const logo = <SidebarLogo to="/" app={APPS.PROTONDRIVE} />;
  65     const header = (
  66         <DriveHeaderPrivate
  67             isHeaderExpanded={expanded}
  68             toggleHeaderExpanded={toggleExpanded}
  69             settingsButton={drawerSettingsButton}
  70         />
  71     );
  72
  73     const permissions = getDriveDrawerPermissions({ user });
  74     const drawerSidebarButtons = [
  75         permissions.contacts && (
  76             <ContactDrawerAppButton aria-expanded={isAppInView(DRAWER_NATIVE_APPS.CONTACTS, appInView)} />
  77         ),
  78         permissions.calendar && <CalendarDrawerAppButton aria-expanded={isAppInView(APPS.PROTONCALENDAR, appInView)} />,
  79     ].filter(isTruthy);
  80
  81     const isNewUploadDisabled = location.pathname === '/devices' || isReadOnly;
  82
  83     const sidebar = (
  84         <DriveSidebar
  85             logo={logo}
  86             primary={<ActionMenuButton className="hidden md:flex" disabled={isNewUploadDisabled} />}
  87             isHeaderExpanded={expanded}
  88             toggleHeaderExpanded={toggleExpanded}
  89         />
  90     );
  91
  92     const canShowDrawer = drawerSidebarButtons.length > 0;
  93
  94     return (
  95         <PrivateAppContainer
  96             top={top}
  97             header={header}
  98             sidebar={sidebar}
  99             drawerApp={<DrawerApp customAppSettings={<DriveQuickSettings />} />}
 100         >
 101             <PrivateMainArea
 102                 drawerSidebar={<DrawerSidebar buttons={drawerSidebarButtons} />}
 103                 drawerVisibilityButton={canShowDrawer ? <DrawerVisibilityButton /> : undefined}
 104                 mainBordered={canShowDrawer && !!showDrawerSidebar}
 105             >
 106                 <div className="flex flex-column flex-nowrap w-full">
 107                     <AppErrorBoundary>{children}</AppErrorBoundary>
 108                 </div>
 109             </PrivateMainArea>
 110         </PrivateAppContainer>
 111     );
 112 };
 113
 114 export default DriveWindow;