From 65f04b9f62081fa1266e7115d49ad10057b9f28b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 24 May 2019 11:46:01 +0200
Subject: [PATCH] category link component

---
 client/src/components/atoms/CategoryLink.tsx  | 23 +++++++++++++++++++
 .../templates/Asset/AssetDetails.tsx          | 10 ++------
 client/src/routes/Home.tsx                    | 12 ++++------
 3 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 client/src/components/atoms/CategoryLink.tsx

diff --git a/client/src/components/atoms/CategoryLink.tsx b/client/src/components/atoms/CategoryLink.tsx
new file mode 100644
index 0000000..866dfdf
--- /dev/null
+++ b/client/src/components/atoms/CategoryLink.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const CategoryLink = ({
+    category,
+    children,
+    className,
+    ...props
+}: {
+    category: string
+    children?: any
+    className?: string
+}) => (
+    <Link
+        to={`/search?categories=${encodeURIComponent(category)}`}
+        className={className}
+        {...props}
+    >
+        {children || category}
+    </Link>
+)
+
+export default CategoryLink
diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx
index d9b6f98..8d45c0f 100644
--- a/client/src/components/templates/Asset/AssetDetails.tsx
+++ b/client/src/components/templates/Asset/AssetDetails.tsx
@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react'
-import { Link } from 'react-router-dom'
 import Moment from 'react-moment'
 import { DDO, MetaData, File } from '@oceanprotocol/squid'
 import Markdown from '../../atoms/Markdown'
+import CategoryLink from '../../atoms/CategoryLink'
 import styles from './AssetDetails.module.scss'
 import AssetFilesDetails from './AssetFilesDetails'
 
@@ -46,13 +46,7 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                         </span>
 
                         {base.categories && (
-                            <Link
-                                to={`/search?categories=${encodeURIComponent(
-                                    base.categories[0]
-                                )}`}
-                            >
-                                {base.categories[0]}
-                            </Link>
+                            <CategoryLink category={base.categories[0]} />
                         )}
 
                         {base.files && datafilesLine(base.files)}
diff --git a/client/src/routes/Home.tsx b/client/src/routes/Home.tsx
index 4725189..8c957d5 100644
--- a/client/src/routes/Home.tsx
+++ b/client/src/routes/Home.tsx
@@ -1,7 +1,8 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
-import { Link } from 'react-router-dom'
+import { History } from 'history'
 import { User, Market } from '../context'
 import CategoryImage from '../components/atoms/CategoryImage'
+import CategoryLink from '../components/atoms/CategoryLink'
 import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
@@ -9,7 +10,6 @@ import Route from '../components/templates/Route'
 import styles from './Home.module.scss'
 
 import meta from '../data/meta.json'
-import { History } from 'history'
 import Content from '../components/atoms/Content'
 import AssetsLatest from '../components/organisms/AssetsLatest'
 import ChannelTeaser from '../components/organisms/ChannelTeaser'
@@ -83,10 +83,8 @@ export default class Home extends Component<HomeProps, HomeState> {
                                     )
                                     .sort((a, b) => a.localeCompare(b)) // sort alphabetically
                                     .map((category: string) => (
-                                        <Link
-                                            to={`/search?categories=${encodeURIComponent(
-                                                category
-                                            )}`}
+                                        <CategoryLink
+                                            category={category}
                                             key={category}
                                             className={styles.category}
                                         >
@@ -94,7 +92,7 @@ export default class Home extends Component<HomeProps, HomeState> {
                                                 category={category}
                                             />
                                             <h3>{category}</h3>
-                                        </Link>
+                                        </CategoryLink>
                                     ))
                             }
                         </Market.Consumer>