outpout category image on Asset page, refactor Asset components

client/src/Routes.tsx

@@ -3,7 +3,6 @@ import { Route, Switch } from 'react-router-dom'
 import withTracker from './hoc/withTracker'
 
 import About from './routes/About'
-import Details from './routes/Details/'
 import Home from './routes/Home'
 import NotFound from './routes/NotFound'
 import Publish from './routes/Publish/'
@@ -13,6 +12,7 @@ import History from './routes/History'
 import Channels from './routes/Channels'
 import Styleguide from './routes/Styleguide'
 
+import Asset from './components/templates/Asset'
 import Channel from './components/templates/Channel'
 
 const Routes = () => (
@@ -22,7 +22,7 @@ const Routes = () => (
         <Route component={withTracker(About)} path="/about" />
         <Route component={withTracker(Publish)} path="/publish" />
         <Route component={withTracker(Search)} path="/search" />
-        <Route component={withTracker(Details)} path="/asset/:did" />
+        <Route component={withTracker(Asset)} path="/asset/:did" />
         <Route component={withTracker(Faucet)} path="/faucet" />
         <Route component={withTracker(History)} path="/history" />
         <Route component={withTracker(Channels)} exact path="/channels" />

client/src/components/atoms/CategoryImage.module.scss

@@ -11,3 +11,10 @@
     opacity: .8;
     transition: .2s ease-out;
 }
+
+.header {
+    composes: categoryImage;
+    height: 8rem;
+    margin-top: $spacer;
+    opacity: .5;
+}

client/src/components/atoms/CategoryImage.tsx

@@ -138,13 +138,18 @@ const categoryImageFile = (category: string) => {
     }
 }
 
-export default class CategoryImage extends PureComponent<{ category: string }> {
+export default class CategoryImage extends PureComponent<{
+    category: string
+    header?: boolean
+}> {
     public render() {
         const image = categoryImageFile(this.props.category)
 
         return (
             <div
-                className={styles.categoryImage}
+                className={
+                    this.props.header ? styles.header : styles.categoryImage
+                }
                 style={{
                     backgroundImage: `url(${image})`
                 }}

client/src/components/molecules/AssetTeaser.tsx

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom'
 import moment from 'moment'
 import Dotdotdot from 'react-dotdotdot'
 import cx from 'classnames'
-import styles from './Asset.module.scss'
+import styles from './AssetTeaser.module.scss'
 import CategoryImage from '../atoms/CategoryImage'
 
-const Asset = ({
+const AssetTeaser = ({
     asset,
     list,
     minimal
@@ -55,4 +55,4 @@ const Asset = ({
     )
 }
 
-export default Asset
+export default AssetTeaser

client/src/components/organisms/AssetsLatest.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
 import { User } from '../../context'
 import Spinner from '../atoms/Spinner'
-import Asset from '../molecules/Asset'
+import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './AssetsLatest.module.scss'
 
 interface AssetsLatestState {
@@ -62,7 +62,11 @@ export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
                     ) : latestAssets && latestAssets.length ? (
                         <div className={styles.latestAssets}>
                             {latestAssets.map((asset: any) => (
-                                <Asset key={asset.id} asset={asset} minimal />
+                                <AssetTeaser
+                                    key={asset.id}
+                                    asset={asset}
+                                    minimal
+                                />
                             ))}
                         </div>
                     ) : (

client/src/components/organisms/AssetsUser.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 import { Logger } from '@oceanprotocol/squid'
 import { User } from '../../context'
 import Spinner from '../atoms/Spinner'
-import Asset from '../molecules/Asset'
+import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './AssetsUser.module.scss'
 
 export default class AssetsUser extends PureComponent<
@@ -82,7 +82,7 @@ export default class AssetsUser extends PureComponent<
                                 )
                                 .filter(asset => !!asset)
                                 .map((asset: any) => (
-                                    <Asset
+                                    <AssetTeaser
                                         list={this.props.list}
                                         key={asset.id}
                                         asset={asset}

client/src/components/organisms/ChannelTeaser.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 import { User } from '../../context'
 import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../atoms/Spinner'
-import Asset from '../molecules/Asset'
+import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './ChannelTeaser.module.scss'
 import channels from '../../data/channels.json'
 
@@ -85,7 +85,7 @@ export default class ChannelTeaser extends Component<
                     ) : channelAssets && channelAssets.length ? (
                         <div className={styles.channelResults}>
                             {channelAssets.map((asset: any) => (
-                                <Asset key={asset.id} asset={asset} />
+                                <AssetTeaser key={asset.id} asset={asset} />
                             ))}
                         </div>
                     ) : (

client/src/components/templates/Asset/AssetDetails.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables';
+@import '../../../styles/variables';
 
 .metaPrimary {
     margin-bottom: $spacer;

client/src/components/templates/Asset/AssetDetails.tsx

@@ -2,7 +2,7 @@ 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 '../../components/atoms/Markdown'
+import Markdown from '../../atoms/Markdown'
 import styles from './AssetDetails.module.scss'
 import AssetFilesDetails from './AssetFilesDetails'
 

client/src/components/templates/Asset/AssetFile.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables';
+@import '../../../styles/variables';
 
 .buttonMain {
     margin: auto;

client/src/components/templates/Asset/AssetFile.test.tsx

@@ -5,7 +5,7 @@ import { render, fireEvent } from 'react-testing-library'
 import { DDO } from '@oceanprotocol/squid'
 import { StateMock } from '@react-mock/state'
 import ReactGA from 'react-ga'
-import { User } from '../../context'
+import { User } from '../../../context'
 import AssetFile, { messages } from './AssetFile'
 
 const file = {

client/src/components/templates/Asset/AssetFile.tsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react'
 import { Logger, DDO, File } from '@oceanprotocol/squid'
 import filesize from 'filesize'
-import Button from '../../components/atoms/Button'
+import Button from '../../atoms/Button'
-import Spinner from '../../components/atoms/Spinner'
+import Spinner from '../../atoms/Spinner'
-import { User } from '../../context'
+import { User } from '../../../context'
 import styles from './AssetFile.module.scss'
 import ReactGA from 'react-ga'
 

client/src/components/templates/Asset/AssetFilesDetails.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables';
+@import '../../../styles/variables';
 
 .files {
     text-align: center;

client/src/components/templates/Asset/AssetFilesDetails.test.tsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { render } from 'react-testing-library'
 import { DDO } from '@oceanprotocol/squid'
 import AssetFilesDetails from './AssetFilesDetails'
-import { User } from '../../context'
+import { User } from '../../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../../../__mocks__/user-mock'
 
 describe('AssetFilesDetails', () => {
     it('renders without crashing', () => {

client/src/components/templates/Asset/AssetFilesDetails.tsx

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react'
 import { DDO, File } from '@oceanprotocol/squid'
 import AssetFile from './AssetFile'
-import { User } from '../../context'
+import { User } from '../../../context'
-import Web3message from '../../components/organisms/Web3message'
+import Web3message from '../../organisms/Web3message'
 import styles from './AssetFilesDetails.module.scss'
 
 export default class AssetFilesDetails extends PureComponent<{

client/src/components/templates/Asset/index.tsx

@@ -1,11 +1,12 @@
 import React, { Component } from 'react'
 import { DDO, MetaData, Logger } from '@oceanprotocol/squid'
-import Route from '../../components/templates/Route'
+import Route from '../Route'
-import Spinner from '../../components/atoms/Spinner'
+import Spinner from '../../atoms/Spinner'
-import { User } from '../../context'
+import { User } from '../../../context'
 import AssetDetails from './AssetDetails'
-import stylesApp from '../../App.module.scss'
+import stylesApp from '../../../App.module.scss'
-import Content from '../../components/atoms/Content'
+import Content from '../../atoms/Content'
+import CategoryImage from '../../atoms/CategoryImage'
 
 interface DetailsProps {
     location: Location
@@ -46,7 +47,17 @@ export default class Details extends Component<DetailsProps, DetailsState> {
         const { metadata, ddo } = this.state
 
         return metadata.base.name !== '' ? (
-            <Route title={metadata.base.name}>
+            <Route
+                title={metadata.base.name}
+                image={
+                    metadata.base.categories && (
+                        <CategoryImage
+                            header
+                            category={metadata.base.categories[0]}
+                        />
+                    )
+                }
+            >
                 <Content>
                     <AssetDetails metadata={metadata} ddo={ddo} />
                 </Content>

client/src/components/templates/Channel.tsx

@@ -4,7 +4,7 @@ import { History } from 'history'
 import Spinner from '../../components/atoms/Spinner'
 import Route from '../../components/templates/Route'
 import { User } from '../../context'
-import Asset from '../../components/molecules/Asset'
+import AssetTeaser from '../molecules/AssetTeaser'
 import Pagination from '../../components/molecules/Pagination'
 import styles from './Channel.module.scss'
 import Content from '../../components/atoms/Content'
@@ -101,7 +101,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         ) : this.state.results && this.state.results.length ? (
             <div className={styles.results}>
                 {this.state.results.map((asset: any) => (
-                    <Asset key={asset.id} asset={asset} />
+                    <AssetTeaser key={asset.id} asset={asset} />
                 ))}
             </div>
         ) : (

client/src/components/templates/Route.tsx

@@ -8,12 +8,14 @@ import Markdown from '../atoms/Markdown'
 const Route = ({
     title,
     description,
+    image,
     wide,
     children,
     className
 }: {
     title: string
     description?: string
+    image?: any
     children: any
     wide?: boolean
     className?: string
@@ -29,6 +31,7 @@ const Route = ({
             <header className={styles.header}>
                 <Content wide={wide}>
                     <h1 className={styles.title}>{title}</h1>
+                    {image && image}
                     {description && (
                         <Markdown
                             text={description}

client/src/routes/Search.tsx

@@ -5,7 +5,7 @@ import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
 import Route from '../components/templates/Route'
 import { User } from '../context'
-import Asset from '../components/molecules/Asset'
+import AssetTeaser from '../components/molecules/AssetTeaser'
 import Pagination from '../components/molecules/Pagination'
 import styles from './Search.module.scss'
 import Content from '../components/atoms/Content'
@@ -119,7 +119,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         ) : this.state.results && this.state.results.length ? (
             <div className={styles.results}>
                 {this.state.results.map((asset: any) => (
-                    <Asset key={asset.id} asset={asset} />
+                    <AssetTeaser key={asset.id} asset={asset} />
                 ))}
             </div>
         ) : (