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

   1 import { useEffect } from 'react';
   2
   3 import { useActiveShare } from '../../../../../hooks/drive/useActiveShare';
   4 import { useFolderTree } from '../../../../../store';
   5 import type { Device } from '../../../../../store/_devices';
   6 import ExpandButton from '../DriveSidebarFolders/DriveExpandButton';
   7 import DriveSidebarSubfolders from '../DriveSidebarFolders/DriveSidebarSubfolders';
   8 import DriveSidebarListItem from '../DriveSidebarListItem';
   9 import { generateSidebarItemStyle } from '../utils';
  10
  11 export const SidebarDeviceItem = ({
  12     device,
  13     setSidebarLevel,
  14 }: {
  15     device: Device;
  16     setSidebarLevel: (level: number) => void;
  17 }) => {
  18     const { activeFolder } = useActiveShare();
  19     const { deepestOpenedLevel, rootFolder, toggleExpand } = useFolderTree(device.shareId, {
  20         rootLinkId: device.linkId,
  21     });
  22
  23     useEffect(() => {
  24         setSidebarLevel(deepestOpenedLevel);
  25     }, [deepestOpenedLevel]);
  26
  27     const isActive = activeFolder.shareId === device.shareId && activeFolder.linkId === device.linkId;
  28
  29     return (
  30         <div>
  31             <DriveSidebarListItem
  32                 to={`/${device.shareId}/folder/${device.linkId}`}
  33                 icon="tv"
  34                 shareId={device.shareId}
  35                 isActive={() => isActive}
  36                 style={generateSidebarItemStyle(1)}
  37             >
  38                 <span className="text-ellipsis" title={device.name} data-testid="sidebar-device-name">
  39                     {device.name}
  40                 </span>
  41                 <ExpandButton
  42                     className="shrink-0"
  43                     expanded={Boolean(rootFolder?.isExpanded)}
  44                     onClick={() => toggleExpand(device.linkId)}
  45                 />
  46             </DriveSidebarListItem>
  47             <DriveSidebarSubfolders
  48                 shareId={device.shareId}
  49                 rootFolder={rootFolder}
  50                 toggleExpand={toggleExpand}
  51                 defaultLevel={1}
  52             />
  53         </div>
  54     );
  55 };