From 9df5e022ddbc6add38d24dc569db3c58e9dd4588 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 9 Oct 2019 16:12:27 +0700 Subject: [PATCH] added saga to change tags --- src/components/node/Tags/index.tsx | 10 ++-------- src/constants/api.ts | 1 + src/containers/node/NodeLayout/index.tsx | 12 ++++++++++-- src/redux/node/actions.ts | 6 ++++++ src/redux/node/api.ts | 13 +++++++++++++ src/redux/node/constants.ts | 2 ++ src/redux/node/sagas.ts | 11 ++++++++++- 7 files changed, 44 insertions(+), 11 deletions(-) diff --git a/src/components/node/Tags/index.tsx b/src/components/node/Tags/index.tsx index 09469ac2..cf698ff6 100644 --- a/src/components/node/Tags/index.tsx +++ b/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 = ({ tags, is_editable, onTagsChange, ...props }) const onInput = useCallback( ({ target: { value } }: ChangeEvent) => { + clearTimeout(timer.current); setInput(value); - if (timer) { - clearTimeout(timer.current); - } }, [setInput, timer] ); diff --git a/src/constants/api.ts b/src/constants/api.ts index f07ea2b0..21637064 100644 --- a/src/constants/api.ts +++ b/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`, }, }; diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index ebd3428c..78b2ec5c 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/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 & @@ -38,12 +39,19 @@ const NodeLayoutUnconnected: FC = ({ 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 = ({
- + diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts index 2369f19d..e8a7603d 100644 --- a/src/redux/node/actions.ts +++ b/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, +}); diff --git a/src/redux/node/api.ts b/src/redux/node/api.ts index 20cf9cd4..40a0dc03 100644 --- a/src/redux/node/api.ts +++ b/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 & { access: string }): Promise< + IResultWithStatus<{ node: INode }> +> => + api + .post(API.NODE.UPDATE_TAGS(id), { tags }, configWithToken(access)) + .then(resultMiddleware) + .catch(errorMiddleware); diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 0f43506b..2f9825a3 100644 --- a/src/redux/node/constants.ts +++ b/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 = { diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index 9c2c55d4..b78e7916 100644 --- a/src/redux/node/sagas.ts +++ b/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) { } } +function* onUpdateTags({ id, tags }: ReturnType) { + 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); }