Merge pull request #132 from oceanprotocol/fix/tags

tag fixes

src/components/atoms/Tags.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import shortid from 'shortid'
-import slugify from 'slugify'
 import styles from './Tags.module.css'
 
 declare type TagsProps = {
@@ -13,15 +12,11 @@ declare type TagsProps = {
 }
 
 const Tag = ({ tag, noLinks }: { tag: string; noLinks?: boolean }) => {
-  // TODO: we should slugify all tags upon publish, so only
-  // slug-style tags should be allowed.
-  const cleanTag = slugify(tag).toLowerCase()
-
   return noLinks ? (
-    <span className={styles.tag}>{cleanTag}</span>
+    <span className={styles.tag}>{tag}</span>
   ) : (
-    <Link to={`/search?tags=${tag}`} className={styles.tag} title={cleanTag}>
-      {cleanTag}
+    <Link to={`/search?tags=${tag}`} className={styles.tag} title={tag}>
+      {tag}
     </Link>
   )
 }
@@ -35,7 +30,8 @@ const Tags: React.FC<TagsProps> = ({
 }) => {
   max = max || items.length
   const remainder = items.length - max
-  const tags = items.slice(0, max)
+  // filter out empty array items, and restrict to `max`
+  const tags = items.filter((tag) => tag !== '').slice(0, max)
   const shouldShowMore = showMore && remainder > 0
   const classes = className ? `${styles.tags} ${className}` : styles.tags
 

src/components/pages/Publish/Preview.tsx

@@ -7,6 +7,7 @@ import styles from './Preview.module.css'
 import File from '../../atoms/File'
 import { MetadataPublishForm } from '../../../@types/MetaData'
 import Button from '../../atoms/Button'
+import { transformTags } from './utils'
 
 export default function Preview({
   values
@@ -72,7 +73,7 @@ export default function Preview({
             Download Sample
           </Button>
         )}
-        {values.tags && <Tags items={values.tags.split(',')} />}
+        {values.tags && <Tags items={transformTags(values.tags)} />}
       </header>
 
       <div className={styles.metaFull}>

src/components/pages/Publish/utils.ts

@@ -1,6 +1,13 @@
 import { MetadataMarket, MetadataPublishForm } from '../../../@types/MetaData'
 import { toStringNoMS } from '../../../utils'
 import AssetModel from '../../../models/Asset'
+import slugify from '@sindresorhus/slugify'
+
+export function transformTags(value: string): string[] {
+  const originalTags = value?.split(',')
+  const transformedTags = originalTags?.map((tag) => slugify(tag).toLowerCase())
+  return transformedTags
+}
 
 export function transformPublishFormToMetadata(
   data: Partial<MetadataPublishForm>
@@ -33,7 +40,7 @@ export function transformPublishFormToMetadata(
       ...AssetModel.additionalInformation,
       description,
       copyrightHolder,
-      tags: tags?.split(','),
+      tags: transformTags(tags),
       links: typeof links !== 'string' && links,
       termsAndConditions
     }