comments highlight

src/components/node/CommentContent/index.tsx

@@ -0,0 +1,79 @@
+import React, { FC, useMemo } from 'react';
+import { IComment, IFile } from '~/redux/types';
+import path from 'ramda/es/path';
+import { formatCommentText, getURL } from '~/utils/dom';
+import { Group } from '~/components/containers/Group';
+import * as styles from './styles.scss';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+import assocPath from 'ramda/es/assocPath';
+import append from 'ramda/es/append';
+import reduce from 'ramda/es/reduce';
+import { AudioPlayer } from '~/components/media/AudioPlayer';
+import classnames from 'classnames';
+
+interface IProps {
+  comment: IComment;
+}
+
+const CommentContent: FC<IProps> = ({ comment }) => {
+  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+    () =>
+      reduce(
+        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
+        {},
+        comment.files
+      ),
+    [comment]
+  );
+
+  return (
+    <>
+      {comment.text && (
+        <div className={styles.block}>
+          <Group
+            className={styles.text}
+            dangerouslySetInnerHTML={{
+              __html: formatCommentText(path(['user', 'username'], comment), comment.text),
+            }}
+          />
+        </div>
+      )}
+
+      {groupped.image && groupped.image.length > 0 && (
+        <div className={styles.block}>
+          <div className={styles.images}>
+            {groupped.image.map(file => (
+              <div key={file.id}>
+                <img src={getURL(file)} alt={file.name} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {groupped.audio && groupped.audio.length > 0 && (
+        <>
+          {groupped.audio.map(file => (
+            <div className={classnames(styles.block, styles.audio_block)} key={file.id}>
+              <AudioPlayer file={file} />
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export { CommentContent };
+
+/*
+{comment.text && (
+        
+      )}
+
+      <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+
+
+
+
+      */

src/components/node/CommentContent/styles.scss

@@ -0,0 +1,65 @@
+@import 'flexbin/flexbin.scss';
+
+.block {
+  min-height: $comment_height;
+  box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &:first-child {
+    border-top-right-radius: $radius;
+  }
+
+  &:last-child {
+    border-bottom-right-radius: $radius;
+  }
+}
+
+.block_audio {
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  padding: $gap;
+  font-weight: 300;
+  font: $font_16_medium;
+  line-height: 20px;
+  box-sizing: border-box;
+  position: relative;
+  color: #cccccc;
+
+  b {
+    font-weight: 600;
+  }
+}
+
+.date {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font: $font_12_regular;
+  color: transparentize($color: white, $amount: 0.8);
+  padding: 2px 4px;
+  border-radius: 0 0 $radius 0;
+}
+
+.images {
+  @include flexbin(240px, 5px);
+
+  img {
+    border-radius: $radius;
+  }
+}
+
+.audios {
+  & > div {
+    height: $comment_height;
+    border-radius: $radius;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}