asset details component reorder

gatsby-node.js

@@ -15,7 +15,7 @@ exports.createPages = async ({ graphql, actions }) => {
 
   // Create pages for all assets
   const assetDetailsTemplate = path.resolve(
-    'src/components/templates/AssetDetails/index.tsx'
+    'src/components/templates/AssetDetails.tsx'
   )
 
   const result = await graphql(`

src/components/molecules/JobDetailsDialog.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { ComputeItem } from '@oceanprotocol/react'
 import BaseDialog from '../atoms/BaseDialog'
 import styles from './JobDetailsDialog.module.css'
-import MetaItem from '../templates/AssetDetails/MetaItem'
+import MetaItem from '../organisms/AssetContent/MetaItem'
 import Time from '../atoms/Time'
 import shortid from 'shortid'
 import { Link } from 'gatsby'
@@ -15,7 +15,7 @@ export default function JobDetailsDialog({
   computeItem: ComputeItem | undefined
   isOpen: boolean
   onClose: () => void
-}) {
+}): ReactElement {
   if (!computeItem) return null
 
   const { attributes } = computeItem.ddo.findServiceByType('metadata')

src/components/organisms/AssetContent/MetaItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './MetaItem.module.css'
 
 export default function MetaItem({
@@ -7,7 +7,7 @@ export default function MetaItem({
 }: {
   title: string
   content: any
-}) {
+}): ReactElement {
   return (
     <div className={styles.metaItem}>
       <h3 className={styles.title}>{title}</h3>

src/components/organisms/AssetContent/RatingAction.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, ReactElement } from 'react'
 import { toast } from 'react-toastify'
 import Rating from '../../atoms/Rating'
 import rateAsset from '../../../utils/rateAsset'
@@ -13,7 +13,7 @@ export default function RatingAction({
 }: {
   did: DID | string
   onVote: () => void
-}) {
+}): ReactElement {
   const { web3, account } = useWeb3()
   const [rating, setRating] = useState<number>(0)
   const [isloading, setIsLoading] = useState(false)

src/components/organisms/AssetContent/index.tsx

@@ -6,10 +6,10 @@ import { Link } from 'gatsby'
 import Markdown from '../../atoms/Markdown'
 import Tags from '../../atoms/Tags'
 import MetaFull from './MetaFull'
-import Compute from '../../organisms/Compute'
+import Compute from '../Compute'
-import Consume from '../../organisms/Consume'
+import Consume from '../Consume'
 import MetaSecondary from './MetaSecondary'
-import styles from './AssetContent.module.css'
+import styles from './index.module.css'
 
 export interface AssetContentProps {
   metadata: MetaDataMarket

src/components/templates/AssetDetails.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { PageProps, graphql } from 'gatsby'
-import Layout from '../../../components/Layout'
+import Layout from '../Layout'
-import AssetContent from './AssetContent'
+import AssetContent from '../organisms/AssetContent'
 
 export default function AssetDetailsTemplate(props: PageProps): ReactElement {
   const { asset } = props.data as any

src/pages/asset/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import { Router } from '@reach/router'
-import AssetContent from '../../components/templates/AssetDetails/AssetContent'
+import AssetContent from '../../components/organisms/AssetContent'
 import Layout from '../../components/Layout'
 import { PageProps } from 'gatsby'
 import { MetaDataMarket, ServiceMetaDataMarket } from '../../@types/MetaData'