import React , { useEffect } from 'react' ; import { Link } from 'react-router-dom' ; import { name , domainName } from '@config' ; import SingleColumns from '@app/layout/single-columns' ; import { useSelector , useStore } from 'react-redux' ; import { loadCommentList } from '@app/redux/actions/comment' ; import { getCommentListById } from '@app/redux/reducers/comment' ; import { getUserInfo } from '@app/redux/reducers/user' ; import { addHasRead } from '@app/redux/actions/has-read-posts' ; import Shell from '@app/components/shell' ; import Meta from '@app/components/meta' ; import CommentList from '@app/components/comment-list' ; import HTMLText from '@app/components/html-text' ; import EditorComment from '@app/components/editor-comment' ; import Loading from '@app/components/ui/loading' ; import LikeButton from '@app/components/like' ; import Share from '@app/components/share' ; import MoreMenu from '@app/components/more-menu' ; import ADH5 from '@app/components/ads/h5' ; import './styles/index.scss' ; const CommentDetail = function ( { match , setNotFound } ) { const { id } = match . params ; const _isMember = useSelector ( ( state ) => getUserInfo ( state ) ) ; const list = useSelector ( ( state ) => getCommentListById ( state , 'single_' + id ) ) ; const { data = [ ] , loading , more = true } = list || { } ; const store = useStore ( ) ; const _loadList = ( args ) => loadCommentList ( args ) ( store . dispatch , store . getState ) ; const _addHasRead = ( args ) => addHasRead ( args ) ( store . dispatch , store . getState ) ; useEffect ( ( ) => { if ( ! loading && ! data [ 0 ] && more ) { _loadList ( { id : 'single_' + id , args : { _id : id , deleted : false , weaken : false } , fields : `
          posts_id{
            _id
            title
            content_html
          }
          content_html
          create_at
          reply_count
          like_count
          _id
          user_id {
            _id
            nickname
            avatar_url
            brief
          }
          like
        ` } ) . then ( ( [ err , res ] ) => { if ( res && res . data && ! res . data [ 0 ] ) { setNotFound ( '该评论不存在' ) ; } else if ( res && res . data && res . data [ 0 ] ) { let comment = res . data [ 0 ] ; _addHasRead ( { commentId : comment . _id , total : comment . reply_count } ) ; } } ) ; } } , [ ] ) ; if ( loading || ! data [ 0 ] ) return < div className = "text-center" > < Loading /></div > ; const comment = data [ 0 ] ; return ( < SingleColumns > < div > < Meta title = { `${ comment . posts_id . title }` } > < meta name = "description" content = { `${ comment . content_summary }` } /> < link rel = "canonical" href = { `${ domainName }/comment/${ comment . _id }` } /> < link rel = "amphtml" href = { `${ domainName }/amp/comment/${ comment . _id }` } /> < meta property = "og:locale" content = "zh_CN" / > < meta property = "og:type" content = "article" / > < meta property = "og:title" content = { comment . posts_id . title } / > < meta property = "og:description" content = { `${ comment . content_summary }` } /> < meta property = "og:url" content = { `${ domainName }/comment/${ comment . _id }` } /> < meta property = "og:site_name" content = { name } / > < meta property = "og:image" content = { comment . user_id . avatar_url ? 'https:' + comment . user_id . avatar_url : domainName + '/512x512.png' } / > < /Meta> < div className = "card" > < div className = "card-body border-bottom" > < Link to = { `/posts/${ comment . posts_id . _id }` } > < h5 className = "text-dark" > { comment . posts_id . title } < /h5> < /Link> { comment . posts_id . content_summary ? < div > { comment . posts_id . content_summary } < /div> : null} < /div> < div className = "card-body" > < div > < div styleName = "head" > < div > < Link to = { `/people/${ comment . user_id . _id }` } > < img styleName = "active" src = { comment . user_id . avatar_url } / > < b className = "text-dark" > { comment . user_id . nickname } < /b> < /Link> < /div> < div styleName = "info" > { comment . user_id . brief || '...' } < /div> < /div> < div styleName = "content" > < HTMLText content = { comment . content_html } /> < /div> < /div> < /div> < div className = "card-footer d-flex justify-content-between" > < div className = "text-secondary" styleName = "info" > { comment . _create_at ? < span > { comment . _create_at } < /span> : null} { comment . like_count ? < span > { comment . like_count } 人赞 < /span> : null} { } < /div> < div styleName = "actions" > < LikeButton comment = { comment } /> < Share comment = { comment } / > < MoreMenu comment = { comment } /> < /div> < /div> < /div> { comment . reply_count ? < div className = "card" > < div className = "card-header border-bottom-0" > { comment . reply_count } 条回复 < /div> < div className = "card-body p-0" > < CommentList id = { id } query = { { parent_id : id , page_size : 100 } } nothing = "还未有人回复" / > < /div> < /div> : null } { _isMember ? < div styleName = "editor" className = "card" > < EditorComment posts_id = { comment . posts_id . _id } parent_id = { comment . _id } reply_id = { comment . _id } placeholder = { '回复 ' + comment . user_id . nickname } / > < /div> : null } < div className = "d-block d-lg-none d-xl-none" > < ADH5 width = '100%' height = '200px' / > < /div> < /div> < /SingleColumns>); } ; CommentDetail . loadDataOnServer = async function ( { store , match , res , req , user } ) { if ( user ) return { code : 200 } ; const { id } = match . params ; let [ err , data ] = await loadCommentList ( { id : 'single_' + id , args : { _id : id , deleted : false , weaken : false } , fields : `
      posts_id{
        _id
        title
        content_html
      }
      content_html
      create_at
      reply_count
      like_count
      _id
      user_id {
        _id
        nickname
        avatar_url
      }
    ` } ) ( store . dispatch , store . getState ) ; if ( data && data . data && data . data . length > 0 ) { return { code : 200 } ; } else { return { code : 404 } ; } } ; export default Shell ( CommentDetail ) ;