Add to cashflow statement component

centrifuge · Jan 16, 2025 · ce1944d · ce1944d
1 parent 7ccf2e0
commit ce1944d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 62 deletions.
diff --git a/centrifuge-app/src/components/Report/CashflowStatement.tsx b/centrifuge-app/src/components/Report/CashflowStatement.tsx
@@ -1,9 +1,7 @@
 import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
 import { formatBalance } from '@centrifuge/centrifuge-react'
 import { Text, Tooltip } from '@centrifuge/fabric'
-import Centrifuge from '@centrifuge/sdk'
 import * as React from 'react'
-import { useQuery } from 'react-query'
 import { formatDate } from '../../utils/date'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
 import { usePoolMetadata } from '../../utils/usePools'
@@ -13,6 +11,7 @@ import { Spinner } from '../Spinner'
 import { ReportContext } from './ReportContext'
 import { UserFeedback } from './UserFeedback'
 import type { TableDataRow } from './index'
+import { useReport } from './useReportsQuery'
 import { getColumnHeader } from './utils'
 
 type Row = TableDataRow & {
@@ -21,64 +20,16 @@ type Row = TableDataRow & {
   bold?: boolean
 }
 
-const centrifuge = new Centrifuge({
-  environment: 'mainnet',
-  indexerUrl: 'https://api.centrifuge.io/',
-})
-
 export function CashflowStatement({ pool }: { pool: Pool }) {
   const { startDate, endDate, groupBy, setCsvData, setReportData } = React.useContext(ReportContext)
   const { data: poolMetadata } = usePoolMetadata(pool)
 
-  const [adjustedStartDate, adjustedEndDate] = React.useMemo(() => {
-    const today = new Date()
-    today.setDate(today.getDate())
-    today.setHours(0, 0, 0, 0)
-    if (groupBy === 'day') {
-      const from = new Date(startDate ?? today)
-      from.setHours(0, 0, 0, 0)
-      const to = new Date(startDate ?? today)
-      to.setDate(to.getDate() + 1)
-      to.setHours(0, 0, 0, 0)
-      return [from, to]
-    } else if (groupBy === 'daily') {
-      const from = new Date(startDate ?? today)
-      from.setHours(0, 0, 0, 0)
-      const to = new Date(endDate ?? today)
-      to.setDate(to.getDate() + 1)
-      to.setHours(0, 0, 0, 0)
-      return [from, to]
-    } else if (groupBy === 'quarter' || groupBy === 'year') {
-      const from = pool.createdAt ? new Date(pool.createdAt) : today
-      return [from, today]
-    } else {
-      const to = new Date(endDate ?? today)
-      to.setDate(to.getDate() + 1)
-      to.setHours(0, 0, 0, 0)
-      return [new Date(startDate), to]
-    }
-  }, [groupBy, startDate, endDate, pool.createdAt])
-
-  const { data } = useQuery({
-    queryKey: ['cashflow', pool.id, startDate, endDate, groupBy],
-    queryFn: async () => {
-      const sdkPool = await centrifuge.pool(pool.id, pool.metadata)
-      const group = groupBy === 'day' || groupBy === 'daily' ? 'day' : groupBy
-      const report = await sdkPool.reports.cashflow({
-        from: adjustedStartDate.toISOString(),
-        to: adjustedEndDate.toISOString(),
-        groupBy: group,
-      })
-      if (groupBy === 'day') {
-        return [report?.[0]]
-      }
-      return report
-    },
-    enabled: !!pool.id,
+  const { data = [], isLoading } = useReport('cashflow', pool, new Date(startDate), new Date(endDate), groupBy, {
+    onSuccess: (data) => setReportData(data),
   })
 
   const columns = React.useMemo(() => {
-    if (!data || !data.length) {
+    if (!data || isLoading) {
       return []
     }
 

diff --git a/centrifuge-app/src/components/Report/ReportFilter.tsx b/centrifuge-app/src/components/Report/ReportFilter.tsx
@@ -11,6 +11,7 @@ import {
   Select,
   Shelf,
 } from '@centrifuge/fabric'
+import { CashflowReport } from '@centrifuge/sdk/dist/types/reports'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
 import styled from 'styled-components'
@@ -77,22 +78,17 @@ export function ReportFilter({ poolId }: ReportFilterProps) {
         }
       })
     } else {
-      return reportData.map((data: DailyPoolState) => {
+      return reportData.map((data: CashflowReport) => {
         return {
           name: data.timestamp,
-          yAxis: data.poolState.sumPrincipalRepaidAmountByPeriod
-            .sub(data.poolState.sumBorrowedAmountByPeriod)
-            .add(data.poolState.sumInterestRepaidAmountByPeriod)
-            .add(data.poolState.sumUnscheduledRepaidAmountByPeriod)
-            .sub(data.poolState.sumPoolFeesPaidAmountByPeriod)
-            .add(data.poolState.sumInvestedAmountByPeriod)
-            .sub(data.poolState.sumRedeemedAmountByPeriod)
-            .toNumber(),
+          yAxis: data.totalCashflow.toDecimal(),
         }
       })
     }
   }, [report, reportData, metadata?.data?.pool?.asset.class, pool.currency.decimals])
 
+  console.log(transformDataChart)
+
   return (
     <Shelf
       padding={2}