From 3fdeafe636278a7fcee67c7635ebdd38700bfcdb Mon Sep 17 00:00:00 2001
From: juliopavila <javila1997@gmail.com>
Date: Thu, 12 Oct 2023 10:51:31 -0300
Subject: [PATCH] chore: add article and publication  tag limit

---
 .../app/src/components/commons/CreatableSelect.tsx | 14 +++++++++++++-
 .../views/publication/PublicationsView.tsx         |  3 ++-
 .../publication/components/ArticleSidebar.tsx      |  1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/commons/CreatableSelect.tsx b/packages/app/src/components/commons/CreatableSelect.tsx
index 4ebc8c28..eba7a18b 100644
--- a/packages/app/src/components/commons/CreatableSelect.tsx
+++ b/packages/app/src/components/commons/CreatableSelect.tsx
@@ -12,6 +12,7 @@ export interface CreateSelectProps {
   placeholder?: string
   errorMsg?: string
   isAddress?: boolean
+  limit?: number
 }
 
 const customStyles = {
@@ -59,7 +60,14 @@ const customStyles = {
   }),
 }
 
-export const CreatableSelect: React.FC<CreateSelectProps> = ({ options, onSelected, value, placeholder, errorMsg }) => {
+export const CreatableSelect: React.FC<CreateSelectProps> = ({
+  options,
+  onSelected,
+  value,
+  placeholder,
+  errorMsg,
+  limit,
+}) => {
   const [values, setValues] = useState<CreateSelectOption[]>([])
 
   useEffect(() => {
@@ -72,6 +80,10 @@ export const CreatableSelect: React.FC<CreateSelectProps> = ({ options, onSelect
   }, [value])
 
   const handleChange = (newValue: OnChangeValue<CreateSelectOption, any>) => {
+    const list = newValue as CreateSelectOption[]
+    if (limit && list.length > limit) {
+      return
+    }
     if (onSelected) {
       onSelected(newValue as CreateSelectOption[])
     }
diff --git a/packages/app/src/components/views/publication/PublicationsView.tsx b/packages/app/src/components/views/publication/PublicationsView.tsx
index 819fa461..62d95348 100644
--- a/packages/app/src/components/views/publication/PublicationsView.tsx
+++ b/packages/app/src/components/views/publication/PublicationsView.tsx
@@ -251,6 +251,7 @@ export const PublicationsView: React.FC<PublicationsViewProps> = ({ updateChainI
                 <CreatableSelect
                   placeholder="Add up to 5 tags for your publication..."
                   onSelected={handleTags}
+                  limit={5}
                   errorMsg={tags.length && tags.length >= 6 ? "Add up to 5 tags for your publication" : undefined}
                 />
               </Grid>
@@ -258,7 +259,7 @@ export const PublicationsView: React.FC<PublicationsViewProps> = ({ updateChainI
           </Grid>
 
           <Grid item display="flex" justifyContent={"flex-end"} mt={3}>
-            <PublicationsButton variant="contained" type="submit" disabled={loading || indexing}>
+            <PublicationsButton variant="contained" type="submit" disabled={loading || indexing || tags.length > 5}>
               {loading && <CircularProgress size={20} sx={{ marginRight: 1 }} />}
               {indexing ? "Indexing..." : "Create Publication"}
             </PublicationsButton>
diff --git a/packages/app/src/components/views/publication/components/ArticleSidebar.tsx b/packages/app/src/components/views/publication/components/ArticleSidebar.tsx
index 9de801e4..700c8b24 100644
--- a/packages/app/src/components/views/publication/components/ArticleSidebar.tsx
+++ b/packages/app/src/components/views/publication/components/ArticleSidebar.tsx
@@ -204,6 +204,7 @@ const ArticleSidebar: React.FC<ArticleSidebarProps> = ({ showSidebar, setShowSid
               placeholder="Add a tag..."
               onSelected={setHandleTags}
               value={tags}
+              limit={5}
               errorMsg={tags.length && tags.length >= 6 ? "Add up to 5 tags for your article" : undefined}
             />
           </Stack>