import { useEffect , useState } from 'react' ; import { SearchUser , SearchUserVariables , } from '../../generated/server/SearchUser' ; import { SEARCH_USER } from '../../graphql/server/search' ; import { getImage } from '../../helpers' ; import { SelectedUserProps } from '../../types' ; import { useLazyQuery } from '../../utils' ; export function useMention ( mentionKeyword , showUserList , setMentionLoading ) { const [ mentionMembers , setMentionMembers ] = useState < Array < SelectedUserProps > > ( ) ; const [ getMentionList , { data : searchData , loading } ] = useLazyQuery < SearchUser , SearchUserVariables > ( SEARCH_USER , { variables : { search : mentionKeyword } , onCompleted : ( ) => { let formattedMember = searchData ?. searchUser . users . map ( ( { name , username , avatar } ) => { return { name , username , avatar : getImage ( avatar ) , } ; } ) ; setMentionLoading ( loading ) ; setMentionMembers ( formattedMember ) ; } , } ) ; useEffect ( ( ) => { let fetchSearch ; if ( showUserList ) { fetchSearch = setTimeout ( ( ) => { getMentionList ( ) ; } , 100 ) ; } return ( ) => clearTimeout ( fetchSearch ) ; } , [ mentionKeyword ] ) ; return { mentionMembers } ; }