output for mp3 files

src/components/node/Comment/index.tsx

@@ -1,10 +1,15 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, useMemo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { IComment } from '~/redux/types';
+import { IComment, IFile } from '~/redux/types';
 import * as styles from './styles.scss';
 import { formatCommentText, getURL } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
 import { ImageUpload } from '~/components/upload/ImageUpload';
+import { getFileType } from '~/utils/uploader';
+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';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -13,27 +18,47 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   comment?: IComment;
 };
 
-const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => (
-  <CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}>
-    {comment.text && (
-      <Group
-        className={styles.text}
-        dangerouslySetInnerHTML={{
-          __html: formatCommentText(comment.user && comment.user.username, comment.text),
-        }}
-      />
-    )}
+const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...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]
+  );
 
-    {comment.files && comment.files.length > 0 && (
-      <div className={styles.images}>
-        {comment.files.map(file => (
-          <div key={file.id}>
-            <img src={getURL(file.url)} alt={file.name} />
-          </div>
-        ))}
-      </div>
-    )}
-  </CommentWrapper>
-);
+  return (
+    <CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}>
+      {comment.text && (
+        <Group
+          className={styles.text}
+          dangerouslySetInnerHTML={{
+            __html: formatCommentText(comment.user && comment.user.username, comment.text),
+          }}
+        />
+      )}
+
+      {groupped.image && (
+        <div className={styles.images}>
+          {groupped.image.map(file => (
+            <div key={file.id}>
+              <img src={getURL(file.url)} alt={file.name} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {groupped.audio && (
+        <div className={styles.audios}>
+          {groupped.audio.map(file => (
+            <div key={file.id}>{file.name}</div>
+          ))}
+        </div>
+      )}
+    </CommentWrapper>
+  );
+};
 
 export { Comment };

src/components/node/Comment/styles.scss

@@ -1,3 +1,5 @@
+@import 'flexbin/flexbin.scss';
+
 .text {
   padding: $gap / 2;
   font-weight: 300;
@@ -8,14 +10,26 @@
   }
 }
 
-@import 'flexbin/flexbin.scss';
-
 .images {
-  padding: 10px;
+  padding: $gap;
 
-  @include flexbin(150px, 10px);
+  @include flexbin(240px, 10px);
 
   img {
     border-radius: $radius;
   }
 }
+
+.audios {
+  padding: $gap;
+
+  & > div {
+    height: 64px;
+    border-radius: $radius;
+    background: lighten($color: $comment_bg, $amount: 5%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}

src/components/node/CommentForm/styles.scss

@@ -14,6 +14,7 @@
   background: transparentize(black, 0.8);
   padding: $gap / 2;
   border-radius: 0 0 $radius $radius;
+  flex-wrap: wrap;
 
   svg {
     fill: transparentize(white, 0.9);