applications/drive/src/app/components/sections/Devices/DevicesView.tsx

   1 import { useAppTitle } from '@proton/components';
   2
   3 import { useDevicesView } from '../../../store';
   4 import { FileBrowserStateProvider } from '../../FileBrowser';
   5 import ToolbarRow from '../ToolbarRow/ToolbarRow';
   6 import Devices from './Devices';
   7 import DevicesToolbar from './Toolbar/DevicesToolbar';
   8 import { getDevicesSectionName } from './constants';
   9
  10 function DevicesView() {
  11     const sectionTitle = getDevicesSectionName();
  12     useAppTitle(sectionTitle);
  13
  14     const driveView = useDevicesView();
  15
  16     return (
  17         <FileBrowserStateProvider itemIds={driveView.items.map(({ id }) => id)}>
  18             <ToolbarRow
  19                 titleArea={<span className="text-strong pl-1">{sectionTitle}</span>}
  20                 toolbar={<DevicesToolbar items={driveView.items} />}
  21             />
  22             <Devices view={driveView} />
  23         </FileBrowserStateProvider>
  24     );
  25 }
  26
  27 export default DevicesView;