applications/mail/src/app/components/sidebar/SidebarFolders.tsx

   1 import type { ReactNode } from 'react';
   2 import { memo } from 'react';
   3 import * as React from 'react';
   4
   5 import { c } from 'ttag';
   6
   7 import type { Folder, FolderWithSubFolders } from '@proton/shared/lib/interfaces/Folder';
   8
   9 import { getUnreadCount } from '../../helpers/sidebar';
  10 import type { ApplyLabelsParams } from '../../hooks/actions/label/useApplyLabels';
  11 import type { MoveParams } from '../../hooks/actions/move/useMoveToFolder';
  12 import type { UnreadCounts } from './MailSidebarList';
  13 import SidebarFolder from './SidebarFolder';
  14
  15 interface Props {
  16     currentLabelID: string;
  17     counterMap: UnreadCounts;
  18     folders: Folder[];
  19     loadingFolders: boolean;
  20     updateFocusItem: (item: string) => void;
  21     handleToggleFolder: (folder: Folder, expanded: boolean) => void;
  22     foldersTreeview: FolderWithSubFolders[];
  23     moveToFolder: (params: MoveParams) => void;
  24     applyLabels: (params: ApplyLabelsParams) => void;
  25 }
  26
  27 const SidebarFolders = ({
  28     currentLabelID,
  29     counterMap,
  30     folders,
  31     loadingFolders,
  32     updateFocusItem,
  33     handleToggleFolder,
  34     foldersTreeview,
  35     moveToFolder,
  36     applyLabels,
  37 }: Props) => {
  38     const onlyOneLevel = foldersTreeview.every((folder) => !folder.subfolders?.length);
  39     const emptyFolders = !loadingFolders && !folders?.length;
  40
  41     const treeviewReducer = (acc: ReactNode[], folder: FolderWithSubFolders, level = 0): any[] => {
  42         acc.push(
  43             <SidebarFolder
  44                 key={folder.ID}
  45                 currentLabelID={currentLabelID}
  46                 folders={folders}
  47                 folder={folder}
  48                 level={level}
  49                 onToggle={handleToggleFolder}
  50                 expanded={Boolean(folder.Expanded)}
  51                 unreadCount={getUnreadCount(counterMap, folder)}
  52                 id={folder.ID}
  53                 onFocus={updateFocusItem}
  54                 treeMode={!onlyOneLevel}
  55                 moveToFolder={moveToFolder}
  56                 applyLabels={applyLabels}
  57             />
  58         );
  59
  60         if (folder.Expanded && Array.isArray(folder.subfolders) && folder.subfolders.length) {
  61             folder.subfolders.forEach((folder: FolderWithSubFolders) => treeviewReducer(acc, folder, level + 1));
  62         }
  63
  64         return acc;
  65     };
  66
  67     return emptyFolders ? (
  68         <div className="py-2 ml-7 text-sm color-weak">{c('Description').t`No folders`}</div>
  69     ) : (
  70         <>
  71             {foldersTreeview.reduce(
  72                 (acc: React.ReactNode[], folder: FolderWithSubFolders) => treeviewReducer(acc, folder),
  73                 []
  74             )}
  75         </>
  76     );
  77 };
  78
  79 export default memo(SidebarFolders);