flexor-web/src/app/components/pages/view-post.tsx

import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useParams, useHistory } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowsAltV } from '@fortawesome/free-solid-svg-icons'

import { handleApiError } from '../../api/errors'
import { fetchPost } from '../../actions/posts'
import { getAuthenticated, getChecked } from '../../selectors/authentication'
import { getEntity } from '../../selectors/entities'
import { getPostParents, getPostChildren } from '../../selectors/posts'

import { setTitle } from '../../utils'
import { AppState, AppThunkDispatch, EntityType, Post } from '../../types'

import Title from '../../components/title'
import Subtitle from '../../components/subtitle'
import Section from '../../components/section'
import Loading from '../../components/pages/loading'
import PostComponent from '../../components/post'
import PostList from '../../components/post-list'
import Composer from '../../components/composer'

interface Params {
    id: string
}

const ViewPost: FC = () => {
    const { id } = useParams<Params>()
    const post = useSelector<AppState, Post | undefined>(state => getEntity<Post>(state, EntityType.Post, id))
    const parents = useSelector<AppState, Post[]>(state => getPostParents(state, id))
    const replies = useSelector<AppState, Post[]>(state => getPostChildren(state, id))
    const checked = useSelector(getChecked)
    const authenticated = useSelector(getAuthenticated)
    const dispatch = useDispatch<AppThunkDispatch>()
    const history = useHistory()

    const fetch = async () => {
        try {
            await dispatch(fetchPost(id))
        } catch (err) {
            handleApiError(err, dispatch, history)
        }
    }

    useEffect(() => {
        if (checked) fetch()
    }, [checked, id])

    useEffect(() => {
        if (post) setTitle('Post')
    }, [post])

    if (!post) return <Loading />

    return (
        <div>
            <Section>
                <Title>Post</Title>
            </Section>

            {parents.length > 0 &&
                <div>
                    <PostList posts={parents} collapseText="Show Older Posts" />
                    <div style={{ textAlign: 'center' }}>
                        <FontAwesomeIcon icon={faArrowsAltV} />
                    </div>
                </div>
            }

            <PostComponent post={post} />

            {authenticated &&
                <div>
                    <Section>
                        <Subtitle>Reply</Subtitle>
                    </Section>
                    <Composer parent={post} onPost={fetch} />
                </div>
            }

            {replies.length > 0 &&
                <div>
                    <Section>
                        <Subtitle>Replies</Subtitle>
                    </Section>
                    <PostList posts={replies} />
                </div>
            }
        </div>
    )
}

export default ViewPost