Add tag validation #5

prography · Jul 22, 2019 · e369281 · e369281
1 parent e7a574b
commit e369281
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -61,3 +61,5 @@ export const isGiturl = string()
     'github 프로필 url을 적어주세요.',
   )
   .required('필수 항목입니다.');
+
+export const isTag = string().trim().min(2, '태그는 2자 이상 10자 이하여야 합니다.').max(10, '태그는 2자 이상 10자 이하여야 합니다.');