refactor: Add Reporting tab to investor view and dry out into PoolRep…

…ortPage

centrifuge-app/src/components/Report/PoolReportPage.tsx

@@ -0,0 +1,41 @@
+import { Pool } from '@centrifuge/centrifuge-js'
+import * as React from 'react'
+import { useParams } from 'react-router'
+import { ReportComponent } from '.'
+import { usePool } from '../../utils/usePools'
+import { LoadBoundary } from '../LoadBoundary'
+import { PageWithSideBar } from '../PageWithSideBar'
+import { Spinner } from '../Spinner'
+import { ReportContextProvider } from './ReportContext'
+import { ReportFilter } from './ReportFilter'
+
+export function PoolReportPage({ header }: { header: React.ReactNode }) {
+  const { pid: poolId } = useParams<{ pid: string }>()
+  const pool = usePool(poolId) as Pool
+
+  return (
+    <ReportContextProvider>
+      <PageWithSideBar>
+        {header}
+
+        {pool && <ReportFilter pool={pool} />}
+
+        <LoadBoundary>
+          <PoolDetailReporting pool={pool} />
+        </LoadBoundary>
+      </PageWithSideBar>
+    </ReportContextProvider>
+  )
+}
+
+function PoolDetailReporting({ pool }: { pool: Pool }) {
+  if (!pool) {
+    return <Spinner mt={2} />
+  }
+
+  return (
+    <React.Suspense fallback={<Spinner mt={2} />}>
+      <ReportComponent pool={pool} />
+    </React.Suspense>
+  )
+}

centrifuge-app/src/pages/IssuerPool/Header.tsx

@@ -19,6 +19,7 @@ export const IssuerPoolHeader: React.FC<Props> = ({ actions }) => {
   const theme = useTheme()
   const cent = useCentrifuge()
   const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
+  const isTinlakePool = pool.id.startsWith('0x')
 
   return (
     <>
@@ -63,6 +64,7 @@ export const IssuerPoolHeader: React.FC<Props> = ({ actions }) => {
             <NavigationTabsItem to={`${basePath}/${pid}`}>Overview</NavigationTabsItem>
             <NavigationTabsItem to={`${basePath}/${pid}/assets`}>Assets</NavigationTabsItem>
             <NavigationTabsItem to={`${basePath}/${pid}/liquidity`}>Liquidity</NavigationTabsItem>
+            {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/reporting`}>Reporting</NavigationTabsItem>}
             <NavigationTabsItem to={`${basePath}/${pid}/investors`}>Investors</NavigationTabsItem>
             <NavigationTabsItem to={`${basePath}/${pid}/configuration`}>Configuration</NavigationTabsItem>
             <NavigationTabsItem to={`${basePath}/${pid}/access`}>Access</NavigationTabsItem>

centrifuge-app/src/pages/IssuerPool/Reporting/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+import { PoolReportPage } from '../../../components/Report/PoolReportPage'
+import { IssuerPoolHeader } from '../Header'
+
+export function IssuerPoolReportingPage() {
+  return <PoolReportPage header={<IssuerPoolHeader />} />
+}

centrifuge-app/src/pages/IssuerPool/index.tsx

@@ -8,6 +8,7 @@ import { IssuerPoolViewLoanTemplatePage } from './Configuration/ViewLoanTemplate
 import { IssuerPoolInvestorsPage } from './Investors'
 import { IssuerPoolLiquidityPage } from './Liquidity'
 import { IssuerPoolOverviewPage } from './Overview'
+import { IssuerPoolReportingPage } from './Reporting'
 
 export const IssuerPoolPage: React.FC = () => {
   const { path } = useRouteMatch()
@@ -21,6 +22,7 @@ export const IssuerPoolPage: React.FC = () => {
       <Route path={`${path}/access`} component={IssuerPoolAccessPage} />
       <Route path={`${path}/assets`} component={IssuerPoolAssetPage} />
       <Route path={`${path}/liquidity`} component={IssuerPoolLiquidityPage} />
+      <Route path={`${path}/reporting`} component={IssuerPoolReportingPage} />
       <Route path={path} component={IssuerPoolOverviewPage} />
     </Switch>
   )

centrifuge-app/src/pages/Pool/Reporting/index.tsx

@@ -1,53 +1,7 @@
-import { Pool } from '@centrifuge/centrifuge-js'
 import * as React from 'react'
-import { useParams } from 'react-router'
-import { LoadBoundary } from '../../../components/LoadBoundary'
-import { PageWithSideBar } from '../../../components/PageWithSideBar'
-import { ReportComponent } from '../../../components/Report'
-import { ReportContextProvider } from '../../../components/Report/ReportContext'
-import { ReportFilter } from '../../../components/Report/ReportFilter'
-import { Spinner } from '../../../components/Spinner'
-import { usePool } from '../../../utils/usePools'
+import { PoolReportPage } from '../../../components/Report/PoolReportPage'
 import { PoolDetailHeader } from '../Header'
 
-export type GroupBy = 'day' | 'month'
-
-export type Report = 'pool-balance' | 'asset-list' | 'investor-tx' | 'borrower-tx'
-
-const titleByReport: { [key: string]: string } = {
-  'pool-balance': 'Pool balance',
-  'asset-list': 'Asset list',
-  'investor-tx': 'Investor transactions',
-  'borrower-tx': 'Borrower transactions',
-}
-
 export function PoolDetailReportingTab() {
-  const { pid: poolId } = useParams<{ pid: string }>()
-  const pool = usePool(poolId) as Pool
-
-  return (
-    <ReportContextProvider>
-      <PageWithSideBar>
-        <PoolDetailHeader />
-
-        {pool && <ReportFilter pool={pool} />}
-
-        <LoadBoundary>
-          <PoolDetailReporting pool={pool} />
-        </LoadBoundary>
-      </PageWithSideBar>
-    </ReportContextProvider>
-  )
-}
-
-export function PoolDetailReporting({ pool }: { pool: Pool }) {
-  if (!pool) {
-    return <Spinner mt={2} />
-  }
-
-  return (
-    <React.Suspense fallback={<Spinner mt={2} />}>
-      <ReportComponent pool={pool} />
-    </React.Suspense>
-  )
+  return <PoolReportPage header={<PoolDetailHeader />} />
 }