Merge pull request #267 from gnosis/issue-#257

Bugfix: Enforce Tag Limitation on Articles and Publications
gnosisguild · Oct 17, 2023 · b5faaa4 · b5faaa4
2 parents 21f83e4 + 3fdeafe
commit b5faaa4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -251,14 +251,15 @@ 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>
             </Grid>
           </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
@@ -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>