fixed audio attaches

src/components/editors/SortableAudioGrid/index.tsx

@@ -18,7 +18,10 @@ const SortableAudioGrid = SortableContainer(
     locked: IUploadStatus[];
     onDrop: (file_id: IFile['id']) => void;
     onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
-  }) => (
+  }) => {
+    console.log(locked);
+
+    return (
       <div className={styles.grid}>
         {items
           .filter(file => file && file.id)
@@ -34,7 +37,8 @@ const SortableAudioGrid = SortableContainer(
           </SortableAudioGridItem>
         ))}
       </div>
-    )
+    );
+  }
 );
 
 export { SortableAudioGrid };

src/components/node/CommentForm/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo, memo } from 'react';
+import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import * as styles from './styles.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import assocPath from 'ramda/es/assocPath';
-import { InputHandler, IFileWithUUID, IFile } from '~/redux/types';
+import { IFile, IFileWithUUID, InputHandler } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectNode } from '~/redux/node/selectors';
@@ -233,6 +233,10 @@ const CommentFormUnconnected: FC<IProps> = memo(
 
     const placeholder = getRandomPhrase('SIMPLE');
 
+    const hasImageAttaches = images.length > 0 || locked_images.length > 0;
+    const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0;
+    const hasAttaches = hasImageAttaches || hasAudioAttaches;
+
     return (
       <form onSubmit={onSubmit} className={styles.wrap}>
         <div className={styles.input}>
@@ -246,9 +250,9 @@ const CommentFormUnconnected: FC<IProps> = memo(
           />
         </div>
 
-        {(!!images.length || !!audios.length) && (
+        {hasAttaches && (
           <div className={styles.attaches}>
-            {!!images.length && (
+            {hasImageAttaches && (
               <SortableImageGrid
                 onDrop={onFileDrop}
                 onSortEnd={onImageMove}
@@ -261,7 +265,7 @@ const CommentFormUnconnected: FC<IProps> = memo(
               />
             )}
 
-            {(!!audios.length || !!locked_audios.length) && (
+            {hasAudioAttaches && (
               <SortableAudioGrid
                 items={audios}
                 onDrop={onFileDrop}

src/components/node/Tag/index.tsx

@@ -1,7 +1,6 @@
-import React, { FC, ChangeEventHandler, KeyboardEventHandler, FocusEventHandler } from 'react';
+import React, { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler } from 'react';
 import * as styles from './styles.scss';
 import { ITag } from '~/redux/types';
-
 import classNames = require('classnames');
 
 const getTagFeature = (tag: Partial<ITag>) => {
@@ -14,13 +13,21 @@ interface IProps {
   tag: Partial<ITag>;
 
   is_hoverable?: boolean;
+  is_editing?: boolean;
+
   onInput?: ChangeEventHandler<HTMLInputElement>;
   onKeyUp?: KeyboardEventHandler;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
 
-const Tag: FC<IProps> = ({ tag, is_hoverable, onInput, onKeyUp, onBlur }) => (
-  <div className={classNames(styles.tag, getTagFeature(tag), { is_hoverable, input: !!onInput })}>
+const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, onInput, onKeyUp, onBlur }) => (
+  <div
+    className={classNames(styles.tag, getTagFeature(tag), {
+      is_hoverable,
+      is_editing,
+      input: !!onInput,
+    })}
+  >
     <div className={styles.hole} />
     <div className={styles.title}>{tag.title}</div>
 

src/components/node/Tag/styles.scss

@@ -11,7 +11,6 @@
   font: $font_14_semibold;
   align-self: flex-start;
   padding: 0 8px 0 0;
-  // box-shadow: $shadow_depth_2;
   margin: 0 $gap $gap 0;
   position: relative;
 
@@ -19,6 +18,11 @@
     cursor: pointer;
   }
 
+  &:global(.is_editing) {
+    cursor: pointer;
+    background-color: lighten($tag_bg, 10%);
+  }
+
   &:global(.red) {
     background: $red_gradient;
   }

src/components/node/Tags/index.tsx

@@ -77,9 +77,15 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
 
   const onSubmit = useCallback(() => {
     const title = input && input.trim();
-    const items = title ? [...data, { title }] : data;
+    const items = (title ? [...data, { title }] : data)
+      .filter(tag => tag.title.length > 0)
+      .map(tag => ({
+        ...tag,
+        title: tag.title.toLowerCase(),
+      }));
 
     if (!items.length) return;
+
     setData(items);
     setInput('');
     onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
@@ -100,7 +106,7 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
       ))}
 
       {data.map(tag => (
-        <Tag key={tag.title} tag={tag} />
+        <Tag key={tag.title} tag={tag} is_editing />
       ))}
 
       {is_editable && (