import { ReactNode , memo } from 'react' ; import * as React from 'react' ; import { Folder , FolderWithSubFolders } from '@proton/shared/lib/interfaces/Folder' ; import { getUnreadCount } from '../../helpers/sidebar' ; import SidebarFolder from './SidebarFolder' ; import EmptyFolders from './EmptyFolders' ; import { UnreadCounts } from './MailSidebarList' ; interface Props { currentLabelID : string ; counterMap : UnreadCounts ; folders : Folder [ ] ; loadingFolders : boolean ; updateFocusItem : ( item : string ) => void ; handleToggleFolder : ( folder : Folder , expanded : boolean ) => void ; foldersTreeview : FolderWithSubFolders [ ] ; } const SidebarFolders = ( { currentLabelID , counterMap , folders , loadingFolders , updateFocusItem , handleToggleFolder , foldersTreeview , } ) => { const treeviewReducer = ( acc , folder , level = 0 ) : any [ ] => { acc . push ( < SidebarFolder key = { folder . ID } currentLabelID = { currentLabelID } folder = { folder } level = { level } onToggle = { handleToggleFolder } expanded = { Boolean ( folder . Expanded ) } unreadCount = { getUnreadCount ( counterMap , folder ) } id = { folder . ID } onFocus = { updateFocusItem } / > ) ; if ( folder . Expanded && Array . isArray ( folder . subfolders ) && folder . subfolders . length ) { folder . subfolders . forEach ( ( folder ) => treeviewReducer ( acc , folder , level + 1 ) ) ; } return acc ; } ; return ! loadingFolders && ! folders ?. length ? ( < EmptyFolders onFocus = { ( ) => updateFocusItem ( 'add-folder' ) } />) : (<> { foldersTreeview . reduce ( ( acc , folder ) => treeviewReducer ( acc , folder ) , [ ] ) } < />); } ; export default memo ( SidebarFolders ) ;