fixed typings and props for node tags

src/components/node/NodeTags/index.tsx

@@ -1,18 +1,15 @@
 import React, { FC } from 'react';
 import { Tags } from '../Tags';
+import { ITag } from '~/redux/types';
 
-interface IProps {}
+interface IProps {
+  is_editable?: boolean;
+  tags: ITag[];
+  onChange?: (tags: string[]) => void;
+}
 
-const NodeTags: FC<IProps> = ({}) => (
-  <Tags
-    tags={[
-      { title: 'Избранный', feature: 'red' },
-      { title: 'Плейлист', feature: 'green' },
-      { title: 'Просто' },
-      { title: '+ фото', feature: 'black' },
-      { title: '+ с музыкой', feature: 'black' },
-    ]}
-  />
+const NodeTags: FC<IProps> = ({ is_editable, tags, onChange }) => (
+  <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} />
 );
 
 export { NodeTags };

src/components/node/Tags/index.tsx

@@ -6,7 +6,7 @@ import { Tag } from '~/components/node/Tag';
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: ITag[];
   is_editable?: boolean;
-  onChange?: (tags: string[]) => void;
+  onTagsChange?: (tags: string[]) => void;
 };
 
 export const Tags: FC<IProps> = ({ tags, is_editable, onChange, ...props }) => {
@@ -25,7 +25,7 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onChange, ...props }) => {
         <Tag key={tag.title} title={tag.title} feature={tag.feature} />
       ))}
 
-      <Tag title={input} onInput={onInput} />
+      {is_editable && <Tag title={input} onInput={onInput} />}
     </TagField>
   );
 };

src/containers/node/NodeLayout/index.tsx

@@ -16,8 +16,13 @@ import { NodeTags } from '~/components/node/NodeTags';
 import { NODE_COMPONENTS } from '~/redux/node/constants';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { CommentForm } from '~/components/node/CommentForm';
+import { selectUser } from '~/redux/auth/selectors';
+
+const mapStateToProps = state => ({
+  node: selectNode(state),
+  user: selectUser(state),
+});
 
-const mapStateToProps = selectNode;
 const mapDispatchToProps = {
   nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
 };
@@ -30,10 +35,8 @@ const NodeLayoutUnconnected: FC<IProps> = ({
   match: {
     params: { id },
   },
-  is_loading,
-  is_loading_comments,
-  comments = [],
-  current: node,
+  node: { is_loading, is_loading_comments, comments = [], current: node },
+  user: { is_user },
   nodeLoadNode,
 }) => {
   useEffect(() => {
@@ -64,7 +67,7 @@ const NodeLayoutUnconnected: FC<IProps> = ({
 
             <div className={styles.panel}>
               <Group style={{ flex: 1, minWidth: 0 }}>
-                <NodeTags />
+                <NodeTags is_editable={is_user} tags={node.tags} onChange={console.log} />
 
                 <NodeRelated title="First album" />
 

src/redux/node/constants.ts

@@ -37,6 +37,7 @@ export const EMPTY_NODE: INode = {
   type: null,
 
   blocks: [],
+  tags: [],
 
   options: {
     flow: {

src/redux/types.ts

@@ -110,6 +110,8 @@ export interface INode {
     };
   };
 
+  tags: ITag[];
+
   createdAt?: string;
   updatedAt?: string;
 }