import React , { useState , useEffect } from 'react' ; import avatarPicker from '@app/vendors/avatar-picker' ; import { useStore , useSelector } from 'react-redux' ; import { getUserInfo } from '@app/redux/reducers/user' ; import { loadUserInfo , updateUser } from '@app/redux/actions/user' ; import QiniuUploadImage from '@app/components/qiniu-upload-image' ; import './styles/index.scss' ; export default function ( ) { const [ fileUpload , setFileUpload ] = useState ( null ) ; const me = useSelector ( ( state ) => getUserInfo ( state ) ) ; if ( ! me ) return null ; const store = useStore ( ) ; const _loadUserInfo = ( params ) => loadUserInfo ( params ) ( store . dispatch , store . getState ) ; const _updateUser = ( params ) => updateUser ( params ) ( store . dispatch , store . getState ) ; const upload = async function ( url ) { await _updateUser ( { user_cover : url } ) ; _loadUserInfo ( { } ) ; } ; useEffect ( ( ) => { setFileUpload ( < QiniuUploadImage upload = { upload } text = { '上传封面' } / > ) ; } , [ ] ) ; return ( < div > < div className = "card" > < div className = "card-header" > < div className = "card-title" > 封面 < /div></div > < div className = "card-body" > < div styleName = "cover" style = { me . user_cover ? { backgroundImage : `url('${ me . user_cover }')` } : null } > < /div> < div styleName = "upload" > { fileUpload } < /div> < /div> < /div> < /div>); }