From 80ae4d2bd56769de55c8b9095e7883bef2845e14 Mon Sep 17 00:00:00 2001
From: Norbi <katunanorbert@gmail.com>
Date: Tue, 23 Feb 2021 12:16:52 +0200
Subject: [PATCH] created AssetTypeDetails component and added it to asset
 details

---
 .../atoms/AssetTypeDetails.module.css         | 24 ++++++++++++++++++
 src/components/atoms/AssetTypeDetails.tsx     | 25 +++++++++++++++++++
 .../molecules/AssetTeaser.module.css          | 25 -------------------
 src/components/molecules/AssetTeaser.tsx      | 18 ++-----------
 .../organisms/AssetContent/index.module.css   |  4 +++
 .../organisms/AssetContent/index.tsx          |  5 +++-
 6 files changed, 59 insertions(+), 42 deletions(-)
 create mode 100644 src/components/atoms/AssetTypeDetails.module.css
 create mode 100644 src/components/atoms/AssetTypeDetails.tsx

diff --git a/src/components/atoms/AssetTypeDetails.module.css b/src/components/atoms/AssetTypeDetails.module.css
new file mode 100644
index 000000000..ae39d59f3
--- /dev/null
+++ b/src/components/atoms/AssetTypeDetails.module.css
@@ -0,0 +1,24 @@
+.typeDetails {
+  position: absolute;
+  top: calc(var(--spacer) / 3);
+  right: calc(var(--spacer) / 3);
+  width: auto;
+  font-size: var(--font-size-mini);
+}
+
+.icon {
+  fill: var(--brand-grey-light);
+  width: 1.1em;
+  height: 1.1em;
+  vertical-align: baseline;
+  margin-bottom: -0.2em;
+  display: inline-block;
+}
+
+.typeLabel {
+  display: inline-block;
+  text-transform: uppercase;
+  border-right: 1px solid var(--border-color);
+  padding-right: calc(var(--spacer) / 3.5);
+  margin-right: calc(var(--spacer) / 4);
+}
diff --git a/src/components/atoms/AssetTypeDetails.tsx b/src/components/atoms/AssetTypeDetails.tsx
new file mode 100644
index 000000000..92eb31f9c
--- /dev/null
+++ b/src/components/atoms/AssetTypeDetails.tsx
@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react'
+import styles from './AssetTypeDetails.module.css'
+import { ReactComponent as Compute } from '../../images/compute.svg'
+import { ReactComponent as Download } from '../../images/download.svg'
+
+export default function AssetTypeDetails({
+  type,
+  accessType
+}: {
+  type: string
+  accessType: string
+}): ReactElement {
+  return (
+    <aside className={styles.typeDetails}>
+      <div className={styles.typeLabel}>
+        {type === 'dataset' ? 'data set' : 'algorithm'}
+      </div>
+      {accessType === 'access' ? (
+        <Download role="img" aria-label="Download" className={styles.icon} />
+      ) : (
+        <Compute role="img" aria-label="Compute" className={styles.icon} />
+      )}
+    </aside>
+  )
+}
diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css
index b7310b51e..d34f866b8 100644
--- a/src/components/molecules/AssetTeaser.module.css
+++ b/src/components/molecules/AssetTeaser.module.css
@@ -61,28 +61,3 @@
   font-size: var(--font-size-mini);
   margin-top: calc(var(--spacer) / 2);
 }
-
-.typeDetails {
-  position: absolute;
-  top: calc(var(--spacer) / 3);
-  right: calc(var(--spacer) / 3);
-  width: auto;
-  font-size: var(--font-size-mini);
-}
-
-.icon {
-  fill: var(--brand-grey-light);
-  width: 1.1em;
-  height: 1.1em;
-  vertical-align: baseline;
-  margin-bottom: -0.2em;
-  display: inline-block;
-}
-
-.typeLabel {
-  display: inline-block;
-  text-transform: uppercase;
-  border-right: 1px solid var(--border-color);
-  padding-right: calc(var(--spacer) / 3.5);
-  margin-right: calc(var(--spacer) / 4);
-}
diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx
index 5aa9c73d8..14f46cf92 100644
--- a/src/components/molecules/AssetTeaser.tsx
+++ b/src/components/molecules/AssetTeaser.tsx
@@ -8,8 +8,7 @@ import removeMarkdown from 'remove-markdown'
 import Publisher from '../atoms/Publisher'
 import { useMetadata } from '@oceanprotocol/react'
 import Time from '../atoms/Time'
-import { ReactComponent as Compute } from '../../images/compute.svg'
-import { ReactComponent as Download } from '../../images/download.svg'
+import AssetTypeDetails from '../atoms/AssetTypeDetails'
 
 declare type AssetTeaserProps = {
   ddo: DDO
@@ -33,20 +32,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({ ddo }: AssetTeaserProps) => {
           <Publisher account={owner} minimal className={styles.publisher} />
         </header>
 
-        <aside className={styles.typeDetails}>
-          <div className={styles.typeLabel}>
-            {type === 'dataset' ? 'data set' : 'algorithm'}
-          </div>
-          {accessType === 'access' ? (
-            <Download
-              role="img"
-              aria-label="Download"
-              className={styles.icon}
-            />
-          ) : (
-            <Compute role="img" aria-label="Compute" className={styles.icon} />
-          )}
-        </aside>
+        <AssetTypeDetails type={type} accessType={accessType} />
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index bc9ef4f35..4f553e4df 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -42,3 +42,7 @@
   margin-left: calc(var(--spacer) / 4);
   margin-right: calc(var(--spacer) / 4);
 }
+
+.content [class*='typeDetails'] {
+  right: calc(var(--spacer) * 2) !important;
+}
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 2f873cf5d..66df3b077 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -15,6 +15,7 @@ import Button from '../../atoms/Button'
 import Edit from '../AssetActions/Edit'
 import DebugOutput from '../../atoms/DebugOutput'
 import MetaMain from './MetaMain'
+import AssetTypeDetails from '../../atoms/AssetTypeDetails'
 // import EditHistory from './EditHistory'
 
 export interface AssetContentProps {
@@ -46,8 +47,9 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
   const { owner, isInPurgatory, purgatoryData } = useAsset()
   const [showPricing, setShowPricing] = useState(false)
   const [showEdit, setShowEdit] = useState<boolean>()
-  const { ddo, price, metadata } = useAsset()
+  const { ddo, price, metadata, type } = useAsset()
   const isOwner = accountId === owner
+  const accessType = ddo.service[1].type
 
   useEffect(() => {
     if (!price) return
@@ -67,6 +69,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
       <div>
         {showPricing && <Pricing ddo={ddo} />}
         <div className={styles.content}>
+          <AssetTypeDetails type={type} accessType={accessType} />
           <MetaMain />
           <Bookmark did={ddo.id} />