feat: add check empty input

Author: winverse

src/components/write/TagInput.tsx

@@ -6,6 +6,7 @@ import transitions from '../../lib/styles/transitions';
 import { mediaQuery } from '../../lib/styles/media';
 import { useTransition, animated } from 'react-spring';
 import OutsideClickHandler from 'react-outside-click-handler';
+import { isEmptyOrWhitespace } from '../../lib/utils';
 
 export interface TagInputProps {
   ref?: React.RefObject<HTMLDivElement>;
@@ -48,9 +49,8 @@ const TagInput: React.FC<TagInputProps> = ({ onChange, tags: initialTags }) => {
     (tag: string) => {
       ignore.current = true;
       setValue('');
-      if (tag === '' || tags.includes(tag)) return;
-      let processed = tag;
-      processed = tag.trim().slice(0,255);
+      if (isEmptyOrWhitespace(tag) || tags.includes(tag)) return;
+      let processed = tag.trim().slice(0, 255);
       if (processed.indexOf(' #') > 0) {
         const tempTags: string[] = [];
         const regex = /#(\S+)/g;

src/containers/register/RegisterFormContainer.tsx

@@ -17,6 +17,7 @@ import qs from 'qs';
 import { useApolloClient } from '@apollo/react-hooks';
 import { GET_CURRENT_USER } from '../../lib/graphql/user';
 import { isEmpty, trim } from 'ramda';
+import { isEmptyOrWhitespace } from '../../lib/utils';
 
 interface RegisterFormContainerProps extends RouteComponentProps<{}> {}
 
@@ -67,24 +68,17 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
     setError(null);
     // validate
 
-    const isCustomEmpty = (str: string) => {
-      if (typeof str !== 'string') {
-        return isEmpty(str);
-      }
-      return isEmpty(trim(str.replace(/\s/g, '')));
-    };
-
     const validation = {
       displayName: (text: string) => {
-        if (isCustomEmpty(text)) {
+        if (isEmptyOrWhitespace(text)) {
           return '프로필 이름을 입력해주세요.';
         }
         if (text.trim().length > 45) {
           return '이름은 최대 45자까지 입력 할 수 있습니다.';
         }
       },
       username: (text: string) => {
-        if (isCustomEmpty(text)) {
+        if (isEmptyOrWhitespace(text)) {
           return '사용자 ID를 입력해주세요.';
         }
 

src/lib/utils.ts

@@ -1,6 +1,7 @@
 import distanceInWordsToNow from 'date-fns/formatDistanceToNow';
 import format from 'date-fns/format';
 import koLocale from 'date-fns/locale/ko';
+import { isEmpty, trim } from 'ramda';
 
 export const formatDate = (date: string): string => {
   const d = new Date(date);
@@ -115,3 +116,10 @@ export const createFallbackTitle = (username: string | null) => {
 };
 
 export const ssrEnabled = process.env.REACT_APP_SSR === 'enabled';
+
+export const isEmptyOrWhitespace = (str: string) => {
+  if (typeof str !== 'string') {
+    return isEmpty(str);
+  }
+  return isEmpty(trim(str.replace(/\s/g, '')));
+};