From e3692813391ce86d0731ff7b6d2aed8a6eb70ec5 Mon Sep 17 00:00:00 2001
From: Godsenal <tmqps78@gmail.com>
Date: Mon, 22 Jul 2019 23:53:56 +0900
Subject: [PATCH] Add tag validation #5

---
 src/containers/EditProfile/TagEdit.tsx |  2 +-
 src/containers/TagSelect.tsx           | 25 +++++++++++++++++++++----
 src/containers/WathcedTags/index.tsx   |  2 +-
 src/utils/validation.ts                |  2 ++
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/containers/EditProfile/TagEdit.tsx b/src/containers/EditProfile/TagEdit.tsx
index d24fb3b..cd2a6d5 100644
--- a/src/containers/EditProfile/TagEdit.tsx
+++ b/src/containers/EditProfile/TagEdit.tsx
@@ -18,7 +18,7 @@ const TagEdit: React.SFC<ITagEditProps> = ({ tags, handleUpdateUser }) => {
   };
   return (
     <div>
-      <TagSelect tags={[]} value={[]} setTags={handleTagAdd} />
+      <TagSelect tags={[]} setTags={handleTagAdd} />
       <Divider withMargin />
       {
         tags.map(tag => <Tag key={tag} name={tag} onDelete={handleTagDelete(tag)} />)
diff --git a/src/containers/TagSelect.tsx b/src/containers/TagSelect.tsx
index e81a164..7d09135 100644
--- a/src/containers/TagSelect.tsx
+++ b/src/containers/TagSelect.tsx
@@ -6,20 +6,38 @@ import debounce from 'lodash/debounce';
 import { IOptionValue } from '../models/select';
 import { makeSelectable } from '../utils/select';
 import { searchTags } from '../api/tag';
+import { isTag } from '../utils/validation';
+import { notifier } from '../utils/renoti';
 export interface ITagSelectProps extends SelectComponentsProps {
   tags: string[];
   setTags: (tags: string[]) => void;
 }
 const TagSelect: React.SFC<ITagSelectProps> = ({ tags, setTags, ...props }) => {
-  const [defaultValue] = useState(() => makeSelectable(tags));
+  const selectableTags = useMemo(() => makeSelectable(tags), [tags]);
   const handleCreate = useCallback(
     (newValue: ValueType<IOptionValue>) => {
       if (!newValue || !Array.isArray(newValue)) {
         return;
       }
+      let error = '';
       const newTags: string[] = newValue.map(
         (value: IOptionValue) => value.value,
-      );
+      ).filter(tag => {
+        try {
+          isTag.validateSync(tag);
+          return true;
+        } catch (err) {
+          error = err.message;
+          return false;
+        }
+      });
+      if (error) {
+        notifier.notify({
+          type: 'error',
+          position: 'top-center',
+          message: error,
+        });
+      }
       setTags(newTags);
     },
     [setTags],
@@ -74,13 +92,12 @@ const TagSelect: React.SFC<ITagSelectProps> = ({ tags, setTags, ...props }) => {
       isMulti
       placeholder="태그를 검색해보세요."
       cacheOptions
-      defaultValue={defaultValue}
-      defaultOptions={[]}
       onChange={handleCreate}
       loadOptions={loadOptions}
       loadingMessage={loadingMessage}
       noOptionsMessage={noOptionsMessage}
       formatCreateLabel={formatCreateLabel}
+      value={selectableTags}
       {...props}
     />
   );
diff --git a/src/containers/WathcedTags/index.tsx b/src/containers/WathcedTags/index.tsx
index fafd89e..c3ea04e 100644
--- a/src/containers/WathcedTags/index.tsx
+++ b/src/containers/WathcedTags/index.tsx
@@ -91,7 +91,7 @@ const WatchedTags = () => {
           <ContainerContents isActive={isTagSearch}>
             {isEdit && (
               <TagSelectWrapper>
-                <TagSelect tags={[]} value={[]} setTags={onTagSelect} />
+                <TagSelect tags={[]} setTags={onTagSelect} />
               </TagSelectWrapper>
             )}
             {tags.map(tag => (
diff --git a/src/utils/validation.ts b/src/utils/validation.ts
index 0a3cc7b..d0777b6 100644
--- a/src/utils/validation.ts
+++ b/src/utils/validation.ts
@@ -61,3 +61,5 @@ export const isGiturl = string()
     'github 프로필 url을 적어주세요.',
   )
   .required('필수 항목입니다.');
+
+export const isTag = string().trim().min(2, '태그는 2자 이상 10자 이하여야 합니다.').max(10, '태그는 2자 이상 10자 이하여야 합니다.');
\ No newline at end of file