|
|
// view-post.tsx
// Copyright (C) 2020 Dwayne Harris
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
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
|