You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
3.3 KiB
90 lines
3.3 KiB
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
|