From f83ff0ae6e089346da92437d54aac8ea65ba03f2 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Thu, 29 Sep 2022 18:29:14 +0800
Subject: [PATCH 1/2] refactor: limit character length

---
 ui/src/hooks/useTagModal/index.tsx | 33 ++++++++++++++++++++++++++++--
 ui/src/i18n/locales/en.json        |  8 +++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/ui/src/hooks/useTagModal/index.tsx b/ui/src/hooks/useTagModal/index.tsx
index daa28374..bbb5aff4 100644
--- a/ui/src/hooks/useTagModal/index.tsx
+++ b/ui/src/hooks/useTagModal/index.tsx
@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom/client';
 const div = document.createElement('div');
 const root = ReactDOM.createRoot(div);
 
+const MAX_LENGTH = 35;
 interface IProps {
   title?: string;
   onConfirm?: (formData: any) => void;
@@ -44,13 +45,41 @@ const useTagModal = (props: IProps = {}) => {
 
   const checkValidated = (): boolean => {
     let bol = true;
-    const { slugName } = formData;
+    const { displayName, slugName } = formData;
+    if (!displayName.value) {
+      bol = false;
+      formData.displayName = {
+        value: '',
+        isInvalid: true,
+        errorMsg: t('form.fields.display_name.msg.empty'),
+      };
+    } else if (displayName.value.length > MAX_LENGTH) {
+      bol = false;
+      formData.displayName = {
+        value: '',
+        isInvalid: true,
+        errorMsg: t('form.fields.display_name.msg.range'),
+      };
+    } else {
+      formData.displayName = {
+        value: displayName.value,
+        isInvalid: false,
+        errorMsg: '',
+      };
+    }
     if (!slugName.value) {
       bol = false;
       formData.slugName = {
         value: '',
         isInvalid: true,
-        errorMsg: t('form.fields.slugName.msg.empty'),
+        errorMsg: t('form.fields.slug_name.msg.empty'),
+      };
+    } else if (slugName.value.length > MAX_LENGTH) {
+      bol = false;
+      formData.slugName = {
+        value: '',
+        isInvalid: true,
+        errorMsg: t('form.fields.slug_name.msg.range'),
       };
     } else {
       formData.slugName = {
diff --git a/ui/src/i18n/locales/en.json b/ui/src/i18n/locales/en.json
index f5c5136f..a64aca32 100644
--- a/ui/src/i18n/locales/en.json
+++ b/ui/src/i18n/locales/en.json
@@ -208,14 +208,16 @@
         "display_name": {
           "label": "Display name",
           "msg": {
-            "empty": "Display name cannot be empty."
+            "empty": "Display name cannot be empty.",
+            "range": "Display name up to 35 characters"
           }
         },
         "slug_name": {
           "label": "URL slug",
           "description": "Spaces are not allowed, please use '-' instead.",
           "msg": {
-            "empty": "Please enter a name for the tag."
+            "empty": "Please enter a name for the tag.",
+            "range": "URL slug up to 35 characters"
           }
         },
         "description": {
@@ -867,4 +869,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

From 3c6880da90b2982161c5a958540914f356e65490 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Thu, 29 Sep 2022 18:34:42 +0800
Subject: [PATCH 2/2] fix: #961

---
 ui/src/components/TagSelector/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/ui/src/components/TagSelector/index.tsx b/ui/src/components/TagSelector/index.tsx
index ad1096ae..999ddb58 100644
--- a/ui/src/components/TagSelector/index.tsx
+++ b/ui/src/components/TagSelector/index.tsx
@@ -102,10 +102,7 @@ const TagSelector: FC<IProps> = ({
     }
 
     queryTags(tag).then((res) => {
-      if (!res) {
-        return;
-      }
-      const tagArray: Type.Tag[] = filterTags(res);
+      const tagArray: Type.Tag[] = filterTags(res || []);
       setTags(tagArray);
     });
   }, [tag]);