From eddcc4c1762f908c29f6edc13aa2860e3391d43c Mon Sep 17 00:00:00 2001 From: Abhishek Ranjan <64621806+growindiedev@users.noreply.github.com> Date: Mon, 13 May 2024 22:50:37 +0530 Subject: [PATCH] PR for #132 (#138) * organise memos in one hook * split useAccounting into useAccountingV2 & useAccountingV3 * Remove useAccounting hook --------- Co-authored-by: ECWireless --- apps/frontend/pages/accounting.tsx | 92 ++++--------------- libs/dm-hooks/src/index.ts | 4 +- .../{useAccounting.ts => useAccountingV2.ts} | 4 +- libs/dm-hooks/src/useAccountingV3.ts | 12 +++ libs/dm-hooks/src/useFormattedData.ts | 87 ++++++++++++++++++ 5 files changed, 122 insertions(+), 77 deletions(-) rename libs/dm-hooks/src/{useAccounting.ts => useAccountingV2.ts} (99%) create mode 100644 libs/dm-hooks/src/useAccountingV3.ts create mode 100644 libs/dm-hooks/src/useFormattedData.ts diff --git a/apps/frontend/pages/accounting.tsx b/apps/frontend/pages/accounting.tsx index 99935f99..3fadd1db 100644 --- a/apps/frontend/pages/accounting.tsx +++ b/apps/frontend/pages/accounting.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-useless-computed-key */ import { Button, Flex, @@ -9,22 +8,17 @@ import { TabPanels, Tabs, } from '@raidguild/design-system'; -import { useAccounting, useMemberList } from '@raidguild/dm-hooks'; import { - IMember, - ITokenBalanceLineItem, - IVaultTransaction, -} from '@raidguild/dm-types'; -import { - exportToCsv, - formatDate, - REGEX_ETH_ADDRESS, -} from '@raidguild/dm-utils'; + useAccountingV2, + useFormattedData, + useMemberList, +} from '@raidguild/dm-hooks'; +import { exportToCsv } from '@raidguild/dm-utils'; import _ from 'lodash'; import { useSession } from 'next-auth/react'; import { NextSeo } from 'next-seo'; import Papa from 'papaparse'; -import { useCallback, useMemo } from 'react'; +import { useCallback } from 'react'; import BalancesTable from '../components/BalancesTable'; import SiteLayout from '../components/SiteLayout'; @@ -34,7 +28,11 @@ import TransactionsTable from '../components/TransactionsTable'; export const Accounting = () => { const { data: session } = useSession(); const token = _.get(session, 'token'); - const { data, loading, error } = useAccounting({ + const { + data: dataFromMolochV2, + loading, + error, + } = useAccountingV2({ token, }); const { data: memberData } = useMemberList({ @@ -42,68 +40,14 @@ export const Accounting = () => { limit: 1000, }); - const { balances, spoils, transactions, tokenPrices } = data; - - const members = useMemo(() => { - const memberArray = _.flatten( - _.get(memberData, 'pages') - ) as unknown as IMember[]; - return _.keyBy(memberArray, (m: IMember) => m.ethAddress?.toLowerCase()); - }, [memberData]); - - const withPrices = useCallback( - (items: T[]) => - items.map((t) => { - const formattedDate = formatDate(t.date); - const tokenSymbol = t.tokenSymbol?.toLowerCase(); - if ( - tokenPrices[tokenSymbol] && - tokenPrices[tokenSymbol][formattedDate] - ) { - return { - ...t, - priceConversion: tokenPrices[tokenSymbol][formattedDate], - }; - } - if (tokenSymbol.includes('xdai')) { - return { - ...t, - priceConversion: 1, - }; - } - return t; - }), - [tokenPrices] - ); - - const balancesWithPrices = useMemo( - () => withPrices(balances), - [balances, withPrices] - ); - - const transactionsWithPrices = useMemo( - () => withPrices(transactions), - [transactions, withPrices] - ); - - const transactionsWithPricesAndMembers = useMemo( - () => - transactionsWithPrices.map((t) => { - const ethAddress = t.proposalApplicant.toLowerCase(); - const m = members[ethAddress]; - const memberLink = m?.ethAddress.match(REGEX_ETH_ADDRESS) - ? `/members/${ethAddress}` - : undefined; + const { balances, spoils, transactions, tokenPrices } = dataFromMolochV2; - return { - ...t, - memberLink, - memberName: m?.name, - memberEnsName: m?.ensName, - }; - }), - [transactionsWithPrices, members] - ); + const { + members, + balancesWithPrices, + transactionsWithPrices, + transactionsWithPricesAndMembers, + } = useFormattedData(memberData, balances, transactions, tokenPrices); const onExportCsv = useCallback( (type: 'transactions' | 'balances' | 'spoils') => { diff --git a/libs/dm-hooks/src/index.ts b/libs/dm-hooks/src/index.ts index ebc2d630..0cf07cb4 100644 --- a/libs/dm-hooks/src/index.ts +++ b/libs/dm-hooks/src/index.ts @@ -1,4 +1,5 @@ -export { default as useAccounting } from './useAccounting'; +export { default as useAccountingV2 } from './useAccountingV2'; +export { default as useAccountingV3 } from './useAccountingV3'; export { default as useApplicationDetail } from './useApplicationDetail'; export { default as useApplicationList, @@ -15,6 +16,7 @@ export { useContacts } from './useContacts'; export { default as useContactUpdate } from './useContactUpdate'; export { default as useDashboardList } from './useDashboardList'; export { default as useDefaultTitle } from './useDefaultTitle'; +export { default as useFormattedData } from './useFormattedData'; export * from './useLinks'; export { default as useLinksUpdate } from './useLinksUpdate'; export { default as useMemberCreate } from './useMemberCreate'; diff --git a/libs/dm-hooks/src/useAccounting.ts b/libs/dm-hooks/src/useAccountingV2.ts similarity index 99% rename from libs/dm-hooks/src/useAccounting.ts rename to libs/dm-hooks/src/useAccountingV2.ts index ab5fdf2f..4e99af1c 100644 --- a/libs/dm-hooks/src/useAccounting.ts +++ b/libs/dm-hooks/src/useAccountingV2.ts @@ -343,7 +343,7 @@ const formatSpoils = async ( return spoils.sort((a, b) => b.date.getTime() - a.date.getTime()); }; -export const useAccounting = ({ token }: { token: string }) => { +export const useAccountingV2 = ({ token }: { token: string }) => { const [transactions, setTransactions] = useState>( [] ); @@ -453,4 +453,4 @@ export const useAccounting = ({ token }: { token: string }) => { }; }; -export default useAccounting; +export default useAccountingV2; diff --git a/libs/dm-hooks/src/useAccountingV3.ts b/libs/dm-hooks/src/useAccountingV3.ts new file mode 100644 index 00000000..ff5f2d2d --- /dev/null +++ b/libs/dm-hooks/src/useAccountingV3.ts @@ -0,0 +1,12 @@ +import { useState } from 'react'; + +// this is a dummy hook +const useAccountingV3 = () => { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + return { data: null, loading: false, error: null }; +}; + +export default useAccountingV3; diff --git a/libs/dm-hooks/src/useFormattedData.ts b/libs/dm-hooks/src/useFormattedData.ts new file mode 100644 index 00000000..4fd93780 --- /dev/null +++ b/libs/dm-hooks/src/useFormattedData.ts @@ -0,0 +1,87 @@ +import { + IMappedTokenPrice, + IMember, + ITokenBalanceLineItem, + IVaultTransaction, +} from '@raidguild/dm-types'; +import { formatDate, REGEX_ETH_ADDRESS } from '@raidguild/dm-utils'; +import { InfiniteData } from '@tanstack/react-query'; +import _ from 'lodash'; +import { useCallback, useMemo } from 'react'; + +const useFormattedData = ( + memberData: InfiniteData, + balances: ITokenBalanceLineItem[], + transactions: IVaultTransaction[], + tokenPrices: IMappedTokenPrice +) => { + const members = useMemo(() => { + const memberArray = _.flatten( + _.get(memberData, 'pages') + ) as unknown as IMember[]; + return _.keyBy(memberArray, (m: IMember) => m.ethAddress?.toLowerCase()); + }, [memberData]); + + const withPrices = useCallback( + (items: T[]) => + items.map((t) => { + const formattedDate = formatDate(t.date); + const tokenSymbol = t.tokenSymbol?.toLowerCase(); + if ( + tokenPrices[tokenSymbol] && + tokenPrices[tokenSymbol][formattedDate] + ) { + return { + ...t, + priceConversion: tokenPrices[tokenSymbol][formattedDate], + }; + } + if (tokenSymbol.includes('xdai')) { + return { + ...t, + priceConversion: 1, + }; + } + return t; + }), + [tokenPrices] + ); + + const balancesWithPrices = useMemo( + () => withPrices(balances), + [balances, withPrices] + ); + + const transactionsWithPrices = useMemo( + () => withPrices(transactions), + [transactions, withPrices] + ); + + const transactionsWithPricesAndMembers = useMemo( + () => + transactionsWithPrices.map((t) => { + const ethAddress = t.proposalApplicant.toLowerCase(); + const m = members[ethAddress]; + const memberLink = m?.ethAddress.match(REGEX_ETH_ADDRESS) + ? `/members/${ethAddress}` + : undefined; + + return { + ...t, + memberLink, + memberName: m?.name, + memberEnsName: m?.ensName, + }; + }), + [transactionsWithPrices, members] + ); + + return { + members, + balancesWithPrices, + transactionsWithPrices, + transactionsWithPricesAndMembers, + }; +}; + +export default useFormattedData;