flexor-web/src/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 { setEntity } from 'src/actions/entities'
import { Post, EntityType } from 'src/types'

import User from 'src/components/user'

interface Props {
    post: Post
}

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

    const handleShowPost = () => {
        dispatch(setEntity(EntityType.Post, {
            ...post,
            revealed: true,
        }))
    }

    return (
        <div className="post">
            {showCover &&
                <div className="cover" onClick={() => handleShowPost()}>{post.cover}</div>
            }

            {!showCover &&
                <div>
                    {post.text && <p className="is-size-5">{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">
                <div>
                    <User user={post.user} />
                </div>

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

                <div>
                    <Link to={`/p/${post.id}`}>
                        <span className="icon">
                            <FontAwesomeIcon icon={faReplyAll} />
                        </span>
                        {post.replies}
                    </Link>
                </div>

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

export default PostComponent