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

import React, { FC } from 'react'
import { useDispatch } from 'react-redux'
import { Link } from 'react-router-dom'
import moment from 'moment'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faClock, faReplyAll, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
import { useTheme } from '../hooks'
import { setEntities } from '../actions/entities'
import { normalize } from '../utils/normalization'
import { Post, EntityType } from '../types'

import User from '../components/user'

interface Props {
    post: Post
}

const PostComponent: FC<Props> = ({ post }) => {
    const theme = useTheme()
    const dispatch = useDispatch()
    const showCover = !!post.cover && !post.revealed

    const handleShowPost = () => {
        const posts = normalize([{
            ...post,
            revealed: true,
        }], EntityType.Post)

        dispatch(setEntities(posts.entities))
    }

    return (
        <div className="post" style={{ backgroundColor: theme.backgroundPrimary, borderColor: theme.backgroundSecondary, color: theme.text }}>
            {showCover &&
                <div className="cover" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }} onClick={() => handleShowPost()}>{post.cover}</div>
            }

            {!showCover &&
                <div className="post-content">
                    {post.text && <p>{post.text}</p>}

                    {post.attachments && post.attachments.length > 0 &&
                        <div className="attachments">
                            {post.attachments.map(attachment => (
                                <div key={attachment.url} className="attachment">
                                    <img src={attachment.url} />
                                    {attachment.text && <p className="caption">{attachment.text}</p>}
                                </div>
                            ))}
                        </div>
                    }
                </div>
            }

            <div className="post-info" style={{ borderColor: theme.backgroundSecondary }}>
                <div>
                    <User user={post.user} />
                </div>

                {!!post.cover && post.cover.length > 0 &&
                    <div>
                        <span className="icon" style={{ color: theme.red }}>
                            <FontAwesomeIcon icon={faExclamationCircle} />
                        </span>
                    </div>
                }

                <div>
                    <Link to={`/p/${post.id}`} style={{ color: theme.primary }}>
                        <span className="icon" style={{ color: theme.secondary }}>
                            <FontAwesomeIcon icon={faReplyAll} />
                        </span>
                        {post.replies}
                    </Link>
                </div>

                <div>
                    <span className="icon" style={{ color: theme.secondary }}>
                        <FontAwesomeIcon icon={faClock} />
                    </span>
                    <Link to={`/p/${post.id}`} style={{ color: theme.primary }}>
                        {moment(post.created).format('MMMM Do, h:mm A')}
                    </Link>
                </div>
            </div>
        </div>
    )
}

export default PostComponent