added saga to change tags

src/components/node/Tags/index.tsx

@@ -9,14 +9,10 @@ import React, {
   useRef,
 } from 'react';
 import { TagField } from '~/components/containers/TagField';
-import { ITag } from '~/redux/types';
+import { ITag, INode } from '~/redux/types';
 import { Tag } from '~/components/node/Tag';
 import uniq from 'ramda/es/uniq';
-import equals from 'ramda/es/equals';
 import { setTimeout } from 'timers';
-import identity from 'ramda/es/identity';
-import countBy from 'ramda/es/countBy';
-import eqBy from 'ramda/es/eqBy';
 import length from 'ramda/es/length';
 import isEmpty from 'ramda/es/isEmpty';
 import symmetricDifference from 'ramda/es/symmetricDifference';
@@ -34,10 +30,8 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
 
   const onInput = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(timer.current);
       setInput(value);
-      if (timer) {
-        clearTimeout(timer.current);
-      }
     },
     [setInput, timer]
   );

src/constants/api.ts

@@ -13,5 +13,6 @@ export const API = {
     GET_NODE: (id: number | string) => `/node/${id}`,
 
     COMMENT: (id: INode['id']) => `/node/${id}/comment`,
+    UPDATE_TAGS: (id: INode['id']) => `/node/${id}/tags`,
   },
 };

src/containers/node/NodeLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, createElement, useEffect } from 'react';
+import React, { FC, createElement, useEffect, useCallback } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { connect } from 'react-redux';
 
@@ -25,6 +25,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
   nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
+  nodeUpdateTags: NODE_ACTIONS.nodeUpdateTags,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
@@ -38,12 +39,19 @@ const NodeLayoutUnconnected: FC<IProps> = ({
   node: { is_loading, is_loading_comments, comments = [], current: node },
   user: { is_user },
   nodeLoadNode,
+  nodeUpdateTags,
 }) => {
   useEffect(() => {
     if (is_loading) return;
     nodeLoadNode(parseInt(id, 10), null);
   }, [nodeLoadNode, id]);
 
+  const onTagsChange = useCallback(
+    (tags: string[]) => {
+      nodeUpdateTags(node.id, tags);
+    },
+    [node, nodeUpdateTags]
+  );
   const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];
 
   return (
@@ -67,7 +75,7 @@ const NodeLayoutUnconnected: FC<IProps> = ({
 
             <div className={styles.panel}>
               <Group style={{ flex: 1, minWidth: 0 }}>
-                <NodeTags is_editable={is_user} tags={node.tags} onChange={console.log} />
+                <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
 
                 <NodeRelated title="First album" />
 

src/redux/node/actions.ts

@@ -53,3 +53,9 @@ export const nodeSetCommentData = (id: number, comment: IComment) => ({
   comment,
   type: NODE_ACTIONS.SET_COMMENT_DATA,
 });
+
+export const nodeUpdateTags = (id: INode['id'], tags: string[]) => ({
+  type: NODE_ACTIONS.UPDATE_TAGS,
+  id,
+  tags,
+});

src/redux/node/api.ts

@@ -1,6 +1,7 @@
 import { api, configWithToken, resultMiddleware, errorMiddleware } from '~/utils/api';
 import { INode, IResultWithStatus, IComment } from '../types';
 import { API } from '~/constants/api';
+import { nodeUpdateTags } from './actions';
 
 export const postNode = ({
   access,
@@ -57,3 +58,15 @@ export const getNodeComments = ({
     .get(API.NODE.COMMENT(id))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const updateNodeTags = ({
+  id,
+  tags,
+  access,
+}: ReturnType<typeof nodeUpdateTags> & { access: string }): Promise<
+  IResultWithStatus<{ node: INode }>
+> =>
+  api
+    .post(API.NODE.UPDATE_TAGS(id), { tags }, configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/node/constants.ts

@@ -16,6 +16,8 @@ export const NODE_ACTIONS = {
 
   POST_COMMENT: `${prefix}POST_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
+
+  UPDATE_TAGS: `${prefix}UPDATE_TAGS`,
 };
 
 export const EMPTY_BLOCK: IBlock = {

src/redux/node/sagas.ts

@@ -13,8 +13,9 @@ import {
   nodeSetSendingComment,
   nodeSetComments,
   nodeSetCommentData,
+  nodeUpdateTags,
 } from './actions';
-import { postNode, getNode, postNodeComment, getNodeComments } from './api';
+import { postNode, getNode, postNodeComment, getNodeComments, updateNodeTags } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes } from '../flow/actions';
 import { ERRORS } from '~/constants/errors';
@@ -102,8 +103,16 @@ function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {
   }
 }
 
+function* onUpdateTags({ id, tags }: ReturnType<typeof nodeUpdateTags>) {
+  yield delay(1000);
+  const result = yield call(reqWrapper, updateNodeTags, { id, tags });
+
+  console.log({ result });
+}
+
 export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
   yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
+  yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);
 }