import React , { useState } from 'react' ; import { useSelector , useDispatch } from 'react-redux' ; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ; import { StoreState } from 'store' ; import { editLabels } from 'store/ducks/single-bug' ; import { Avatar , Button , Flex , Label , LabelTypes , toast } from '@bug-ui' ; import LabelEditDropdown from 'components/LabelEditDropdown/LabelEditDropdown' ; const getParticipants = ( bug ) : string [ ] => { return Object . values ( bug ?. entities ?. comments || { } ) . map ( ( comment ) => comment . author ?. username ) . filter ( ( item , pos , array ) => array . indexOf ( item ) === pos ) ; } ; interface SingleBugAsideProps { bugId : number | string ; bug : any ; } const SingleBugAside = ( { bugId , bug } ) => { const dispatch = useDispatch < any > ( ) ; const [ selectedLabels , setSelectedLabels ] = useState < string [ ] > ( [ ] ) ; const [ labelEditPending , labelEditError ] = useSelector ( ( state ) => [ state . loading [ 'singlebug/EDIT_LABELS' ] , state . error [ 'singlebug/EDIT_LABELS' ] ] ) ; const handleSaveLabel = ( closeDropdown ) => { dispatch ( editLabels ( bugId , selectedLabels ) ) . then ( ( ) => { closeDropdown ( false ) ; } ) ; } ; let participants = getParticipants ( bug ) ; labelEditError && toast . error ( labelEditError ) ; return ( < aside className = "singlebug__aside--sticky" > < div > < h4 className = "label__header color--gray" > < LabelEditDropdown updateSelectedLabels = { labels => setSelectedLabels ( labels ) } defaultChecked = { bug ?. result . labels } trigger = { < span data - testid = "label_dropdown" > Labels < FontAwesomeIcon size = "sm" icon = "cog" / > < /span>}> { close => ( < Button icon = "tag" size = "small" isLoading = { labelEditPending } onClick = { ( ) => { handleSaveLabel ( close ) ; } } > Update labels < /Button>)} < /LabelEditDropdown> < /h4> < Flex gap = "medium" > { bug ?. result ?. labels . map ( ( label , i ) => ( < Label className = "mt-medium" type = { label } key = { i } > { label } < /Label>))} < /Flex> < /div> < div > < h4 className = "color--gray" > { participants . length } participants < /h4> < Flex gap = "medium" > { participants . map ( ( participant , i ) => ( < Avatar key = { i } width = "40px" height = "40px" size = { 45 } username = { participant } / > ) ) } < /Flex> < /div> < /aside>); } ; export default SingleBugAside ;