Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import AntdComment from 'antd/lib/comment'; import Icon from 'antd/lib/icon'; import * as moment from 'moment'; import * as React from 'react'; import styled from 'styled-components'; import { IArticle, IComment } from '../../../../shared'; import Score from '../../score/Score'; import { ARTICLE } from '../queries'; interface IProps { comment: IComment; article: IArticle; } const Content = styled.div` background: #fff; padding: 10px 25px; border-radius: 5px; margin: 5px 0; `; const Label = styled.span` padding: 0 5px; color: rgba(0, 0, 0, 0.75); `; const LabelDateTime = styled.span` padding: 0 5px; color: rgba(0, 0, 0, 0.75); float: right; `; const Actions = styled.div` display: flex; justify-content: space-between; margin-bottom: 10px; `; const TotalRank = styled.div` font-weight: 500; `; const Comment = ({ comment, article }: IProps) => ( <React.Fragment> <AntdComment author={<Label>{comment.user.username}</Label>} datetime={ <LabelDateTime> {moment(comment.createdDateTime).format('DD.MM.YYYY')} </LabelDateTime> } content={<Content>{comment.text}</Content>} /> <Actions> <TotalRank> {comment.averageScore !== null ? ( <React.Fragment> <Icon type="fire" /> {comment.averageScore} </React.Fragment> ) : null} </TotalRank> <Score refetchQueries={[{ query: ARTICLE, variables: { slug: article.slug } }]} itemId={comment._id} /> </Actions> </React.Fragment> ); export default Comment; |