44 *
55 */
66
7- import React from 'react'
7+ import React , { useState , useCallback } from 'react'
88import T from 'prop-types'
99
1010import { buildLog } from '@/utils'
@@ -14,57 +14,47 @@ import FollowBtn from './FollowBtn'
1414/* eslint-disable-next-line */
1515const log = buildLog ( 'c:FollowButton:index' )
1616
17- class FollowButton extends React . Component {
18- state = { simuLoading :false }
19-
20- onFollow ( ) {
21- const { userId, onFollow, fakeLoading} = this . props
17+ const FollowButton = ( {
18+ hasFollowed,
19+ size,
20+ loading,
21+ userId,
22+ fakeLoading,
23+ onFollow,
24+ onUndoFollow,
25+ } ) => {
26+ const [ simuLoading , setSimuLoading ] = useState ( false )
27+ const isLoading = fakeLoading ?simuLoading :loading
2228
29+ const handleFollow = useCallback ( ( ) => {
2330if ( fakeLoading ) {
24- this . doFakeLoading ( )
31+ setSimuLoading ( true )
32+ setTimeout ( ( ) => setSimuLoading ( false ) , 1000 )
2533}
2634onFollow ( userId )
27- }
28-
29- onUndoFollow ( ) {
30- const { userId, onUndoFollow, fakeLoading} = this . props
35+ } , [ fakeLoading , onFollow , userId ] )
3136
37+ const handleUndoFollow = useCallback ( ( ) => {
3238if ( fakeLoading ) {
33- this . doFakeLoading ( )
39+ setSimuLoading ( true )
40+ setTimeout ( ( ) => setSimuLoading ( false ) , 1000 )
3441}
3542onUndoFollow ( userId )
36- }
37-
38- doFakeLoading ( ) {
39- this . setState ( { simuLoading :true } )
40- setTimeout ( ( ) => {
41- this . setState ( { simuLoading :false } )
42- } , 1000 )
43- }
44-
45- render ( ) {
46- const { hasFollowed, size, loading, fakeLoading} = this . props
47- const { simuLoading} = this . state
48- const isLoading = fakeLoading ?simuLoading :loading
43+ } , [ fakeLoading , onUndoFollow , userId ] )
4944
50- return (
51- < React . Fragment >
52- { hasFollowed ?(
53- < FollowingBtn
54- size = { size }
55- loading = { isLoading }
56- onClick = { ( ) => this . onUndoFollow ( ) }
57- />
58- ) :(
59- < FollowBtn
60- size = { size }
61- loading = { isLoading }
62- onClick = { ( ) => this . onFollow ( ) }
63- />
64- ) }
65- </ React . Fragment >
66- )
67- }
45+ return (
46+ < React . Fragment >
47+ { hasFollowed ?(
48+ < FollowingBtn
49+ size = { size }
50+ loading = { isLoading }
51+ onClick = { handleUndoFollow }
52+ />
53+ ) :(
54+ < FollowBtn size = { size } loading = { isLoading } onClick = { handleFollow } />
55+ ) }
56+ </ React . Fragment >
57+ )
6858}
6959
7060FollowButton . propTypes = {