import { Message } from '@proton/shared/lib/interfaces/mail/Message' ; import { useState , useEffect } from 'react' ; import { c , msgid } from 'ttag' ; import { Button , Icon } from '@proton/components' ; import { isUnread } from '../../helpers/elements' ; interface Props { conversationID : string ; messages ? : Message [ ] ; onClick : ( messageID : string ) => void ; } const UnreadMessages = ( { conversationID , messages , onClick } ) => { const [ count , setCount ] = useState ( 0 ) ; const [ initials , setInitials ] = useState ( messages ) ; const newUnreads = ( ) => { if ( initials === undefined || messages === undefined ) { return [ ] ; } const initialsIDs = initials . map ( ( message ) => message . ID ) ; return messages . filter ( ( message ) => ! initialsIDs . includes ( message . ID ) ) . filter ( ( message ) => isUnread ( message , undefined ) ) ; } ; useEffect ( ( ) => { setInitials ( messages ) ; } , [ conversationID ] ) ; useEffect ( ( ) => { if ( initials === undefined && Array . isArray ( messages ) ) { setInitials ( messages ) ; } } , [ messages ] ) ; useEffect ( ( ) => setCount ( newUnreads ( ) . length ) ) ; if ( count === 0 ) { return null ; } const handleClick = ( ) => onClick ( newUnreads ( ) [ 0 ] . ID ) ; const text = c ( 'Info' ) . ngettext ( msgid `${ count } unread message` , `${ count } unread messages` , count ) ; return ( < span className = "absolute centered-absolute-horizontal bottom pb1" aria - live = "assertive" aria - atomic = "true" > < Button pill color = "norm" className = "flex flex-nowrap flex-align-items-center conversation-unread-messages" onClick = { handleClick } > < span > { text } < /span> <Icon name="arrow-down" className="ml0-5"/ > < /Button> < /span>); } ; export default UnreadMessages ;