diff --git a/src/components/containers/CommentWrapper/index.tsx b/src/components/containers/CommentWrapper/index.tsx index f50b41d8..4847ae2a 100644 --- a/src/components/containers/CommentWrapper/index.tsx +++ b/src/components/containers/CommentWrapper/index.tsx @@ -8,6 +8,7 @@ type IProps = HTMLAttributes & { photo?: string; is_empty?: boolean; is_loading?: boolean; + is_same?: boolean; }; const CommentWrapper: FC = ({ @@ -16,15 +17,16 @@ const CommentWrapper: FC = ({ is_empty, is_loading, className, + is_same, ...props }) => (
- {photo && ( + {!is_same && photo && (
)}
diff --git a/src/components/containers/CommentWrapper/styles.scss b/src/components/containers/CommentWrapper/styles.scss index 0a83f186..ed45802b 100644 --- a/src/components/containers/CommentWrapper/styles.scss +++ b/src/components/containers/CommentWrapper/styles.scss @@ -2,11 +2,16 @@ background: $comment_bg; min-height: $comment_height; display: flex; - box-shadow: $comment_shadow; + // box-shadow: $comment_shadow; &:global(.is_empty) { opacity: 0.5; } + + &:global(.is_same) { + margin: 0 !important; + border-radius: 0; + } } .text { diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index dbb54f08..6983ec56 100644 --- a/src/components/node/Comment/index.tsx +++ b/src/components/node/Comment/index.tsx @@ -9,15 +9,16 @@ import append from 'ramda/es/append'; import reduce from 'ramda/es/reduce'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; import { Player } from '~/utils/player'; +import classNames from 'classnames'; type IProps = HTMLAttributes & { is_empty?: boolean; is_loading?: boolean; - photo?: string; comment?: IComment; + is_same?: boolean; }; -const Comment: FC = ({ comment, is_empty, is_loading, className, photo, ...props }) => { +const Comment: FC = ({ comment, is_empty, is_same, is_loading, className, ...props }) => { const groupped = useMemo>( () => reduce( @@ -30,16 +31,21 @@ const Comment: FC = ({ comment, is_empty, is_loading, className, photo, return ( {comment.text && ( )} diff --git a/src/components/node/NodeComments/index.tsx b/src/components/node/NodeComments/index.tsx index 795ef267..339a4a67 100644 --- a/src/components/node/NodeComments/index.tsx +++ b/src/components/node/NodeComments/index.tsx @@ -1,24 +1,24 @@ import React, { FC } from 'react'; -import range from 'ramda/es/range'; import { Comment } from '../Comment'; -import { INode } from '~/redux/types'; -import { CommentForm } from '../CommentForm'; -import { Group } from '~/components/containers/Group'; -import * as styles from './styles.scss'; import { Filler } from '~/components/containers/Filler'; +import * as styles from './styles.scss'; + interface IProps { comments?: any; } +const isSameComment = (comments, index) => + comments[index - 1] && comments[index - 1].user.id === comments[index].user.id; + const NodeComments: FC = ({ comments }) => ( - - {comments.map(comment => ( - +
+ {comments.map((comment, index) => ( + ))} - +
); export { NodeComments }; diff --git a/src/components/node/NodeComments/styles.scss b/src/components/node/NodeComments/styles.scss index ddb1ff0b..2aa67d98 100644 --- a/src/components/node/NodeComments/styles.scss +++ b/src/components/node/NodeComments/styles.scss @@ -1,4 +1,8 @@ .wrap { + & > div { + margin: $gap 0 0 0; + } + // display: flex; // flex-direction: column !important; diff --git a/src/utils/dom.ts b/src/utils/dom.ts index e5428f12..e5cbca44 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -71,5 +71,7 @@ export const formatCommentText = (author, text: string) => .replace(//g, '>') .split('\n') - .map((el, index) => (index === 0 ? `

${author}: ${el}

` : `

${el}

`)) + .map((el, index) => + index === 0 ? `${author ? `

${author}: ` : ''}${el}

` : `

${el}

` + ) .join('');