comments highlight

src/components/node/Comment/index.tsx

@@ -1,73 +1,39 @@
-import React, { FC, HTMLAttributes, useMemo } from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { IComment, IFile } from '~/redux/types';
+import { ICommentGroup } from '~/redux/types';
+import { getURL } from '~/utils/dom';
+import { CommentContent } from '~/components/node/CommentContent';
 import * as styles from './styles.scss';
-import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
-import { Group } from '~/components/containers/Group';
-import assocPath from 'ramda/es/assocPath';
-import append from 'ramda/es/append';
-import reduce from 'ramda/es/reduce';
-import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { AudioPlayer } from '~/components/media/AudioPlayer';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
-  comment?: IComment;
+  comment_group?: ICommentGroup;
   is_same?: boolean;
 };
 
-const Comment: FC<IProps> = ({ comment, is_empty, is_same, is_loading, className, ...props }) => {
-  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
-    () =>
-      reduce(
-        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
-        {},
-        comment.files
-      ),
-    [comment]
-  );
-
+const Comment: FC<IProps> = ({
+  comment_group,
+  is_empty,
+  is_same,
+  is_loading,
+  className,
+  ...props
+}) => {
   return (
     <CommentWrapper
       className={className}
       is_empty={is_empty}
       is_loading={is_loading}
-      photo={getURL(comment.user.photo)}
+      photo={getURL(comment_group.user.photo)}
       is_same={is_same}
       {...props}
     >
-      {comment.text && (
-        <Group
-          className={styles.text}
-          dangerouslySetInnerHTML={{
-            __html: formatCommentText(
-              !is_same && comment.user && comment.user.username,
-              comment.text
-            ),
-          }}
-        />
-      )}
-
-      <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-
-      {groupped.image && (
-        <div className={styles.images}>
-          {groupped.image.map(file => (
-            <div key={file.id}>
-              <img src={getURL(file)} alt={file.name} />
-            </div>
-          ))}
-        </div>
-      )}
-
-      {groupped.audio && (
-        <div className={styles.audios}>
-          {groupped.audio.map(file => (
-            <AudioPlayer key={file.id} file={file} />
-          ))}
-        </div>
-      )}
+      <div className={styles.wrap}>
+        {comment_group.comments.map(comment => (
+          <CommentContent comment={comment} key={comment.id} />
+        ))}
+      </div>
     </CommentWrapper>
   );
 };