group comments (bad way)

src/components/containers/CommentWrapper/index.tsx

@@ -8,6 +8,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   photo?: string;
   is_empty?: boolean;
   is_loading?: boolean;
+  is_same?: boolean;
 };
 
 const CommentWrapper: FC<IProps> = ({
@@ -16,15 +17,16 @@ const CommentWrapper: FC<IProps> = ({
   is_empty,
   is_loading,
   className,
+  is_same,
   ...props
 }) => (
   <Card
-    className={classNames(styles.wrap, className, { is_empty, is_loading })}
+    className={classNames(styles.wrap, className, { is_empty, is_loading, is_same })}
     seamless
     {...props}
   >
     <div className={styles.thumb}>
-      {photo && (
+      {!is_same && photo && (
         <div className={styles.thumb_image} style={{ backgroundImage: `url("${photo}")` }} />
       )}
     </div>

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 {

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<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
-  photo?: string;
   comment?: IComment;
+  is_same?: boolean;
 };
 
-const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => {
+const Comment: FC<IProps> = ({ comment, is_empty, is_same, is_loading, className, ...props }) => {
   const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
     () =>
       reduce(
@@ -30,16 +31,21 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
 
   return (
     <CommentWrapper
+      className={className}
       is_empty={is_empty}
       is_loading={is_loading}
       photo={getURL(comment.user.photo)}
+      is_same={is_same}
       {...props}
     >
       {comment.text && (
         <Group
           className={styles.text}
           dangerouslySetInnerHTML={{
-            __html: formatCommentText(comment.user && comment.user.username, comment.text),
+            __html: formatCommentText(
+              !is_same && comment.user && comment.user.username,
+              comment.text
+            ),
           }}
         />
       )}

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<IProps> = ({ comments }) => (
-  <Group className={styles.wrap}>
+  <div className={styles.wrap}>
-    {comments.map(comment => (
+    {comments.map((comment, index) => (
-      <Comment key={comment.id} comment={comment} />
+      <Comment key={comment.id} comment={comment} is_same={isSameComment(comments, index)} />
     ))}
 
     <Filler />
-  </Group>
+  </div>
 );
 
 export { NodeComments };

src/components/node/NodeComments/styles.scss

@@ -1,4 +1,8 @@
 .wrap {
+  & > div {
+    margin: $gap 0 0 0;
+  }
+
   // display: flex;
   // flex-direction: column !important;
 

src/utils/dom.ts

@@ -71,5 +71,7 @@ export const formatCommentText = (author, text: string) =>
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
     .split('\n')
-    .map((el, index) => (index === 0 ? `<p><b>${author}</b>: ${el}</p>` : `<p>${el}</p>`))
+    .map((el, index) =>
+      index === 0 ? `${author ? `<p><b>${author}</b>: ` : ''}${el}</p>` : `<p>${el}</p>`
+    )
     .join('');