setting tags

src/components/node/Tag/index.tsx

@@ -1,4 +1,10 @@
-import React, { FC, ReactElement, ChangeEvent, ChangeEventHandler } from 'react';
+import React, {
+  FC,
+  ReactElement,
+  ChangeEvent,
+  ChangeEventHandler,
+  KeyboardEventHandler,
+} from 'react';
 import * as styles from './styles.scss';
 import { ITag } from '~/redux/types';
 
@@ -10,6 +16,7 @@ interface IProps {
 
   is_hoverable?: boolean;
   onInput?: ChangeEventHandler<HTMLInputElement>;
+  onKeyUp?: KeyboardEventHandler;
 }
 
 const Tag: FC<IProps> = ({
@@ -18,6 +25,7 @@ const Tag: FC<IProps> = ({
 
   is_hoverable,
   onInput,
+  onKeyUp,
 }) => (
   <div className={classNames(styles.tag, feature, { is_hoverable, input: !!onInput })}>
     <div className={styles.hole} />
@@ -27,10 +35,11 @@ const Tag: FC<IProps> = ({
       <input
         type="text"
         value={title}
-        onChange={onInput}
         size={1}
         placeholder="Добавить"
         maxLength={24}
+        onChange={onInput}
+        onKeyUp={onKeyUp}
       />
     )}
   </div>

src/components/node/Tags/index.tsx

@@ -1,7 +1,16 @@
-import React, { FC, HTMLAttributes, useState, useCallback, ChangeEvent } from 'react';
+import React, {
+  FC,
+  HTMLAttributes,
+  useState,
+  useCallback,
+  useEffect,
+  KeyboardEvent,
+  ChangeEvent,
+} from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
 import { Tag } from '~/components/node/Tag';
+import uniq from 'ramda/es/uniq';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: ITag[];
@@ -10,7 +19,8 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
 };
 
 export const Tags: FC<IProps> = ({ tags, is_editable, onChange, ...props }) => {
-  const [input, setInput] = useState('asdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasda');
+  const [input, setInput] = useState('');
+  const [data, setData] = useState(tags);
 
   const onInput = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
@@ -19,13 +29,41 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onChange, ...props }) => {
     [setInput]
   );
 
+  const onKeyUp = useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === 'Backspace' && input === '' && data.length) {
+        setData(data.slice(0, data.length - 1));
+        setInput(data[data.length - 1].title);
+      }
+
+      if (key === 'Enter' || key === ',') {
+        setData(
+          uniq([
+            ...data,
+            ...input
+              .split(',')
+              .map((title: string) => title.trim().substr(0, 32))
+              .filter(el => el.length > 0)
+              .map(title => ({
+                title,
+              })),
+          ])
+        );
+        setInput('');
+      }
+    },
+    [input, setInput, data, setData]
+  );
+
+  useEffect(() => setData(tags), [tags]);
+
   return (
     <TagField {...props}>
-      {tags.map(tag => (
+      {data.map(tag => (
         <Tag key={tag.title} title={tag.title} feature={tag.feature} />
       ))}
 
-      {is_editable && <Tag title={input} onInput={onInput} />}
+      {is_editable && <Tag title={input} onInput={onInput} onKeyUp={onKeyUp} />}
     </TagField>
   );
 };

src/redux/auth/sagas.ts

@@ -62,9 +62,9 @@ function* checkUserSaga({ key }: RehydrateAction) {
   yield put(authSetUser({ ...user, is_user: true }));
 }
 
-function* mySaga() {
+function* authSaga() {
   yield takeLatest(REHYDRATE, checkUserSaga);
   yield takeLatest(AUTH_USER_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
 }
 
-export default mySaga;
+export default authSaga;