import React , { useState } from 'react' ; import { useSelector , useStore } from 'react-redux' ; import { getUserInfo } from '@app/redux/reducers/user' ; import { like , unlike } from '@app/redux/actions/like' ; import Loading from '@app/components/ui/loading' ; import './styles/index.scss' ; interface Props { comment : any ; posts : any ; reply : any ; children : any ; } export default function ( { comment , posts , reply , children } ) { const [ loading , setLoading ] = useState ( false ) ; const me = useSelector ( ( state ) => getUserInfo ( state ) ) ; const store = useStore ( ) ; const _link = ( args ) => like ( args ) ( store . dispatch , store . getState ) ; const _unlike = ( args ) => unlike ( args ) ( store . dispatch , store . getState ) ; const target = comment || reply || posts ; if ( me && target . user_id && target . user_id . _id && target . user_id . _id == me . _id ) return null ; if ( loading ) return < Loading />; const handleLike = async function ( e ) { e . stopPropagation ( ) ; const target = comment || reply || posts ; const status = target . like , count = target . like_count , targetId = target . _id ; let type = '' ; if ( ! me ) { $ ( '#sign' ) . modal ( { show : true } , { 'data-type' : 'sign-in' } ) ; return ; } if ( comment ) { type = 'comment' ; } else if ( reply ) { type = 'reply' ; } else { type = 'posts' ; } setLoading ( true ) ; if ( status ) { let [ err , res ] = await _unlike ( { type : type , target_id : targetId } ) ; if ( err ) { $ . toast ( { text : err , position : 'top-center' , showHideTransition : 'slide' , icon : 'error' , loader : false , allowToastClose : false } ) ; } } else { let [ err , res ] = await _link ( { type : type , target_id : targetId , mood : 1 } ) ; if ( err ) { $ . toast ( { text : err , position : 'top-center' , showHideTransition : 'slide' , icon : 'error' , loader : false , allowToastClose : false } ) ; } } setLoading ( false ) ; } ; return < span onClick = { handleLike } className = "a text-secondary" > { children } < /span>; return null ; }