import React , { useState } from 'react' ; import styled from 'styled-components' ; import useFetcher from '@/hooks/useFetcher' ; import LoadingCircle from '@/components/LoadingCircle' ; import PostHead from './PostHead' ; import PostListHot from './PostListHot' ; import PostList from './PostList' ; import FixButtons from './FixButtons' ; import { getTopicInfo } from '@/services/topic' ; import { getPost , getReversePost , getTracePost , getAnonymousTracePost , getHotPost , } from '@/services/post' ; import { navigateHandler } from '@/services/utils/errorHandler' ; const EndPlaceholder = styled . div `
  height: 64px;
` ; interface Props { topicId : string ; userId ? : string ; postId ? : string ; isReverse ? : boolean ; } const Topic = ( { topicId , userId , postId , isReverse } ) => { const [ topicInfo , setTopicInfo ] = useFetcher ( ( ) => getTopicInfo ( topicId ) , { fail : navigateHandler , } ) ; const [ postListKey , setPostListKey ] = useState ( 0 ) ; if ( ! topicInfo ) { return < LoadingCircle />; } const postService = isReverse ? ( from ) => getReversePost ( topicInfo . id , from , topicInfo . replyCount ) : userId ? ( from ) => getTracePost ( topicInfo . id , userId , from ) : postId ? ( from ) => getAnonymousTracePost ( topicInfo . id , postId , from ) : ( from ) => getPost ( topicInfo . id , from ) ; const hotPostService = ( ) => getHotPost ( topicInfo . id ) ; const isTrace = ! ! userId || ! ! postId ; const refreshFunc = ( ) => { getTopicInfo ( topicId ) . then ( res => res . fail ( navigateHandler ) . succeed ( newTopicInfo => { setTopicInfo ( newTopicInfo ) ; setPostListKey ( prevKey => prevKey + 1 ) ; } ) ) ; } ; return ( < > < PostHead topicInfo = { topicInfo } refreshFunc = { refreshFunc } / > < PostList key = { postListKey } service = { postService } isTrace = { isTrace } > { ! isTrace && < PostListHot service = { hotPostService } />} < /PostList> < FixButtons topicInfo = { topicInfo } isReverse = { isReverse } refreshFunc = { refreshFunc } / > < EndPlaceholder /> < />); } ; /**
 * 逆序 Topic
 */ const TopicReverse = ( props ) => < Topic isReverse { ... props } />; export { Topic as default , TopicReverse } ;