From eac304e1d6070837ac99e91c31c24dc45caa00ad Mon Sep 17 00:00:00 2001
From: pratik <97376240+pratik9818@users.noreply.github.com>
Date: Tue, 28 Nov 2023 12:58:54 +0530
Subject: [PATCH] feat: character limit on tags (#9762)

* changing

* update all changes

* complete all changes

* Update components/tag/TagsInput.js

* done

* done

---------

Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>
---
 components/tag/TagsInput.js                | 40 +++++++++++++++++++---
 pages/account/manage/event/[[...data]].js  |  5 ++-
 pages/account/manage/profile.js            |  5 ++-
 pages/docs/how-to-guides/editing-forms.mdx |  6 ++--
 4 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
index 4271c17ba25..5741abb1779 100644
--- a/components/tag/TagsInput.js
+++ b/components/tag/TagsInput.js
@@ -1,19 +1,40 @@
 import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
 import Input from "../form/Input";
+import Notification from "@components/Notification";
 
-export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) {
-
-
+export default function TagsInput({
+  tags,
+  onTagAdd,
+  onTagRemove,
+  inputRef,
+  showNotification,
+  setShowNotification,
+}) {
   //key code
   const { comma, backspace, enter } = {
     comma: 188,
     backspace: 8,
     enter: 13,
   };
-
+  const maxLength = 32;
   const handleKeyUp = (e) => {
     const inputValue = inputRef.current.value;
-    if (e.keyCode === comma || inputValue.endsWith(",") || e.keyCode === enter) {
+    if (inputValue.length >= maxLength && e.keyCode !== backspace) {
+      // '=' sign because in 32 char ',' sign does't count
+      setShowNotification({
+        show: true,
+        type: "error",
+        message: "Tag",
+        additionalMessage: "Tag limit exceeded",
+      });
+      return;
+    }
+
+    if (
+      e.keyCode === comma ||
+      inputValue.endsWith(",") ||
+      e.keyCode === enter
+    ) {
       const newTag = inputValue.trim().replace(/,/g, "");
       if (!newTag) {
         return;
@@ -57,6 +78,15 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) {
 
   return (
     <>
+      <Notification
+        show={showNotification.show}
+        type={showNotification.type}
+        onClose={() =>
+          setShowNotification({ ...showNotification, show: false })
+        }
+        message={showNotification.message}
+        additionalMessage={showNotification.additionalMessage}
+      />
       <label htmlFor="tags">Tags</label>
       <ul
         role="list"
diff --git a/pages/account/manage/event/[[...data]].js b/pages/account/manage/event/[[...data]].js
index 1afb2ce129f..2b373542351 100644
--- a/pages/account/manage/event/[[...data]].js
+++ b/pages/account/manage/event/[[...data]].js
@@ -341,9 +341,12 @@ export default function ManageEvent({ BASE_URL, event }) {
                       onTagRemove={handleTagRemove}
                       tags={tags}
                       inputRef={tagInputRef}
+                      showNotification={showNotification}
+                      setShowNotification={setShowNotification}
                     />
                     <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
-                      Separate tags with commas (tags cannot be duplicated).
+                      Separate tags with commas (tags cannot be duplicated and
+                      max 32 characters).
                     </p>
                   </div>
                 </div>
diff --git a/pages/account/manage/profile.js b/pages/account/manage/profile.js
index b0e11cf1b62..00d60fe7164 100644
--- a/pages/account/manage/profile.js
+++ b/pages/account/manage/profile.js
@@ -251,9 +251,12 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
                         onTagRemove={handleTagRemove}
                         tags={tags}
                         inputRef={tagInputRef}
+                        showNotification={showNotification}
+                        setShowNotification={setShowNotification}
                       />
                       <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
-                        Separate tags with commas (tags cannot be duplicated).
+                        Separate tags with commas (tags cannot be duplicated and
+                        max 32 characters).
                       </p>
                     </div>
                   </div>
diff --git a/pages/docs/how-to-guides/editing-forms.mdx b/pages/docs/how-to-guides/editing-forms.mdx
index 575e0b058ca..d50ed120644 100644
--- a/pages/docs/how-to-guides/editing-forms.mdx
+++ b/pages/docs/how-to-guides/editing-forms.mdx
@@ -28,11 +28,13 @@ You can change any of the form fields except `username` as this will always show
 
 ![BioDrop Forms page](https://github.com/EddieHubCommunity/BioDrop/assets/82668196/86119a20-412a-449a-acba-87df2510ad25)
 
+5. Maximum 32 characters allowed in each tag , In case you exceed the characters than you can not separate or save the tag by comma.
+
 Note: as you complete these fields the information will appear on the right hand side, which will allow you to preview how your Profile will look.
 
-5. Click `Save`
+6. Click `Save`
 
-6. Your changed Profile will be then be available on your custom URL (BioDrop.io/eddiejaoude)
+7. Your changed Profile will then be available at your custom URL (BioDrop.io/eddiejaoude)
 
 <Alert
   type="warning"