import React , { useState , useEffect } from 'react' ; import { useSelector } from 'react-redux' ; import getFriendId from '@fiora/utils/getFriendId' ; import { getOSSFileUrl } from '../utils/uploadFile' ; import Style from './InfoDialog.less' ; import Dialog from '../components/Dialog' ; import Avatar from '../components/Avatar' ; import Button from '../components/Button' ; import Message from '../components/Message' ; import { State , Linkman } from '../state/reducer' ; import useAction from '../hooks/useAction' ; import { addFriend , getLinkmanHistoryMessages , deleteFriend , sealUser , getUserIps , sealUserOnlineIp , } from '../service' ; interface UserInfoProps { visible : boolean ; user ? : { _id : string ; username : string ; avatar : string ; ip : string ; isOnline ? : string ; } ; onClose : ( ) => void ; } function UserInfo ( props ) { const { visible , onClose , user } = props ; const action = useAction ( ) ; const selfId = useSelector ( ( state ) => state . user && state . user . _id ) || '' ; if ( user && user . _id . length === selfId . length ) { user . _id = getFriendId ( selfId , user . _id ) ; } /** 获取原始用户id */ const originUserId = user && user . _id . replace ( selfId , '' ) ; const linkman = useSelector ( ( state ) => state . linkmans [ user ?. _id ] ) ; const isFriend = linkman && linkman . type === 'friend' ; const isAdmin = useSelector ( ( state ) => state . user && state . user . isAdmin ) ; const [ largerAvatar , toggleLargetAvatar ] = useState ( false ) ; const [ userIps , setUserIps ] = useState ( [ ] ) ; useEffect ( ( ) => { if ( isAdmin && user && user . _id ) { ( async ( ) => { const ips = await getUserIps ( user . _id . replace ( selfId , '' ) ) ; setUserIps ( ips ) ; } ) ( ) ; } } , [ isAdmin , selfId , user ] ) ; if ( ! user ) { return null ; } function handleFocusUser ( ) { onClose ( ) ; action . setFocus ( user . _id ) ; } async function handleAddFriend ( ) { const friend = await addFriend ( originUserId ) ; if ( friend ) { onClose ( ) ; const { _id } = user ; let existCount = 0 ; if ( linkman ) { existCount = Object . keys ( linkman . messages ) . length ; action . setLinkmanProperty ( _id , 'type' , 'friend' ) ; } else { const newLinkman = { _id , from : selfId , to : { _id : originUserId , username : friend . username , avatar : friend . avatar , } , type : 'friend' , createTime : Date . now ( ) , } ; action . addLinkman ( ( newLinkman as unknown ) as Linkman , true ) ; } const messages = await getLinkmanHistoryMessages ( _id , existCount ) ; if ( messages ) { action . addLinkmanHistoryMessages ( _id , messages ) ; } handleFocusUser ( ) ; } } async function handleDeleteFriend ( ) { const isSuccess = await deleteFriend ( originUserId ) ; if ( isSuccess ) { onClose ( ) ; action . removeLinkman ( user . _id ) ; Message . success ( '删除好友成功' ) ; } } async function handleSeal ( ) { const isSuccess = await sealUser ( user . name || user . username ) ; if ( isSuccess ) { Message . success ( '封禁用户成功' ) ; } } async function handleSealIp ( ) { const isSuccess = await sealUserOnlineIp ( originUserId ) ; if ( isSuccess ) { Message . success ( '封禁ip成功' ) ; } } function searchIp ( ip ) { window . open ( `https://www.baidu.com/s?wd=${ ip }` ) ; } function handleClose ( ) { toggleLargetAvatar ( false ) ; onClose ( ) ; } return ( < Dialog className = { Style . infoDialog } visible = { visible } onClose = { handleClose } > < div > { visible && user ? ( < div className = { Style . coantainer } > < div className = { Style . header } > < Avatar size = { 60 } src = { user . avatar } onMouseEnter = { ( ) => toggleLargetAvatar ( true ) } onMouseLeave = { ( ) => toggleLargetAvatar ( false ) } /> < img className = { `${ Style . largeAvatar } ${ largerAvatar ? 'show' : 'hide' }` } src = { getOSSFileUrl ( user . avatar ) } alt = "用户头像" / > < p > { user . username } < /p> < p className = { Style . ip } > { userIps . map ( ( ip ) => ( < span key = { ip } onClick = { ( ) => searchIp ( ip ) } role = "button" > { ip } < /span>))} < /p> < /div> < div className = { Style . info } > { isFriend ? ( < Button onClick = { handleFocusUser } > 发送消息 < /Button>) : null} { isFriend ? ( < Button type = "danger" onClick = { handleDeleteFriend } > 删除好友 < /Button>) : (<Button onClick={handleAddFriend}> 加为好友 < /Button>)} { isAdmin ? ( < Button type = "danger" onClick = { handleSeal } > 封禁用户 < /Button>) : null} { isAdmin ? ( < Button type = "danger" onClick = { handleSealIp } > 封禁ip < /Button>) : null} < /div> < /div>) : null} < /div> < /Dialog>); } export default UserInfo ;