From e998a989b5f5f52e914ffeb6b152488ef894ec6a Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 4 Aug 2021 18:30:14 +0300
Subject: [PATCH] fetch history published/shares/transactions/downloads using
 url account id and dynamic compute tab

---
 .../molecules/PoolTransactions/index.tsx      |  5 +-
 .../organisms/AssetActions/Pool/index.tsx     |  6 +-
 .../pages/Account/History/Downloads.tsx       |  7 ++-
 .../pages/Account/History/PoolShares.tsx      |  7 ++-
 .../pages/Account/History/PublishedList.tsx   |  7 ++-
 .../pages/Account/History/index.tsx           | 58 ++++++++++++-------
 src/components/pages/Account/index.tsx        |  4 +-
 7 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/src/components/molecules/PoolTransactions/index.tsx b/src/components/molecules/PoolTransactions/index.tsx
index ca0d174a2..4336d9c62 100644
--- a/src/components/molecules/PoolTransactions/index.tsx
+++ b/src/components/molecules/PoolTransactions/index.tsx
@@ -129,12 +129,13 @@ const columnsMinimal = [columns[0], columns[3]]
 
 export default function PoolTransactions({
   poolAddress,
-  minimal
+  minimal,
+  accountId
 }: {
   poolAddress?: string
   minimal?: boolean
+  accountId: string
 }): ReactElement {
-  const { accountId } = useWeb3()
   const [logs, setLogs] = useState<PoolTransaction[]>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const { chainIds } = useUserPreferences()
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 5079e1fd0..244b39860 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -386,7 +386,11 @@ export default function Pool(): ReactElement {
 
           {accountId && (
             <AssetActionHistoryTable title="Your Pool Transactions">
-              <PoolTransactions poolAddress={price?.address} minimal />
+              <PoolTransactions
+                accountId={accountId}
+                poolAddress={price?.address}
+                minimal
+              />
             </AssetActionHistoryTable>
           )}
         </>
diff --git a/src/components/pages/Account/History/Downloads.tsx b/src/components/pages/Account/History/Downloads.tsx
index 33064fb9a..aa8f5e81c 100644
--- a/src/components/pages/Account/History/Downloads.tsx
+++ b/src/components/pages/Account/History/Downloads.tsx
@@ -65,8 +65,11 @@ const columns = [
   }
 ]
 
-export default function ComputeDownloads(): ReactElement {
-  const { accountId } = useWeb3()
+export default function ComputeDownloads({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const { appConfig } = useSiteMetadata()
   const [isLoading, setIsLoading] = useState(false)
   const [orders, setOrders] = useState<DownloadedAssets[]>()
diff --git a/src/components/pages/Account/History/PoolShares.tsx b/src/components/pages/Account/History/PoolShares.tsx
index 882657801..806361842 100644
--- a/src/components/pages/Account/History/PoolShares.tsx
+++ b/src/components/pages/Account/History/PoolShares.tsx
@@ -154,8 +154,11 @@ const columns = [
   }
 ]
 
-export default function PoolShares(): ReactElement {
-  const { accountId } = useWeb3()
+export default function PoolShares({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const [assets, setAssets] = useState<Asset[]>()
   const [loading, setLoading] = useState<boolean>(false)
   const [data, setData] = useState<PoolShare[]>()
diff --git a/src/components/pages/Account/History/PublishedList.tsx b/src/components/pages/Account/History/PublishedList.tsx
index 461697579..2a6f5996c 100644
--- a/src/components/pages/Account/History/PublishedList.tsx
+++ b/src/components/pages/Account/History/PublishedList.tsx
@@ -11,8 +11,11 @@ import { useWeb3 } from '../../../../providers/Web3'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 
-export default function PublishedList(): ReactElement {
-  const { accountId } = useWeb3()
+export default function PublishedList({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { chainIds } = useUserPreferences()
 
diff --git a/src/components/pages/Account/History/index.tsx b/src/components/pages/Account/History/index.tsx
index 34d5b4f7d..dcd1163aa 100644
--- a/src/components/pages/Account/History/index.tsx
+++ b/src/components/pages/Account/History/index.tsx
@@ -8,25 +8,34 @@ import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import OceanProvider from '../../../../providers/Ocean'
+import { useWeb3 } from '../../../../providers/Web3'
 
-const tabs = [
-  {
-    title: 'Published',
-    content: <PublishedList />
-  },
-  {
-    title: 'Pool Shares',
-    content: <PoolShares />
-  },
-  {
-    title: 'Pool Transactions',
-    content: <PoolTransactions />
-  },
-  {
-    title: 'Downloads',
-    content: <Downloads />
-  },
-  {
+interface HistoryTab {
+  title: string
+  content: JSX.Element
+}
+
+function getTabs(accountIdentifier: string): HistoryTab[] {
+  const { accountId } = useWeb3()
+  const defaultTabs: HistoryTab[] = [
+    {
+      title: 'Published',
+      content: <PublishedList accountId={accountIdentifier} />
+    },
+    {
+      title: 'Pool Shares',
+      content: <PoolShares accountId={accountIdentifier} />
+    },
+    {
+      title: 'Pool Transactions',
+      content: <PoolTransactions accountId={accountIdentifier} />
+    },
+    {
+      title: 'Downloads',
+      content: <Downloads accountId={accountIdentifier} />
+    }
+  ]
+  const computeTab: HistoryTab = {
     title: 'Compute Jobs',
     content: (
       <OceanProvider>
@@ -34,12 +43,21 @@ const tabs = [
       </OceanProvider>
     )
   }
-]
+  if (accountIdentifier === accountId) {
+    defaultTabs.push(computeTab)
+  }
+  return defaultTabs
+}
 
-export default function HistoryPage(): ReactElement {
+export default function HistoryPage({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const { chainIds } = useUserPreferences()
   const url = new URL(window.location.href)
   const defaultTab = url.searchParams.get('defaultTab')
+  const tabs = getTabs(accountId)
   let defaultTabIndex = 0
   defaultTab === 'ComputeJobs' ? (defaultTabIndex = 4) : (defaultTabIndex = 0)
   return (
diff --git a/src/components/pages/Account/index.tsx b/src/components/pages/Account/index.tsx
index 9faf8affb..158df829a 100644
--- a/src/components/pages/Account/index.tsx
+++ b/src/components/pages/Account/index.tsx
@@ -5,7 +5,7 @@ import { useWeb3 } from '../../../providers/Web3'
 export default function AccountPage({
   accountIdentifier
 }: {
-  accountIdentifier: ReactElement | string
+  accountIdentifier: string
 }): ReactElement {
   const { accountId } = useWeb3()
   if (!accountIdentifier) accountIdentifier = accountId
@@ -17,7 +17,7 @@ export default function AccountPage({
       ) : (
         <p>Please connect your Web3 wallet.</p>
       )}
-      <HistoryPage />
+      <HistoryPage accountId={accountIdentifier} />
     </article>
   )
 }