From 3eff90456079846dd72595b1f37c51b3f85a4a7f Mon Sep 17 00:00:00 2001 From: woody <125113430+woodenfurniture@users.noreply.github.com> Date: Tue, 7 May 2024 11:30:15 +1000 Subject: [PATCH] chore: make account management toggles use toggle functions instead of setters (#6816) chore: make account management toggles use toggle funtions instead of setters --- .../components/ImportAccounts.tsx | 68 ++++++++++--------- .../slices/portfolioSlice/portfolioSlice.ts | 13 +++- 2 files changed, 46 insertions(+), 35 deletions(-) diff --git a/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx b/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx index 33922d6fdf8..2ca36368503 100644 --- a/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx +++ b/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx @@ -32,7 +32,7 @@ import { selectHighestAccountNumberForChainId, selectIsAnyAccountIdEnabled, } from 'state/slices/selectors' -import { useAppDispatch, useAppSelector } from 'state/store' +import { store, useAppDispatch, useAppSelector } from 'state/store' import { DrawerContentWrapper } from './DrawerContent' @@ -49,7 +49,7 @@ type TableRowProps = { accountIds: AccountId[] accountNumber: number asset: Asset - onActiveAccountIdsChange: (accountIds: AccountId[], isActive: boolean) => void + onToggleAccountIds: (accountIds: AccountId[]) => void } type TableRowAccountProps = { @@ -92,24 +92,23 @@ const TableRowAccount = forwardRef(({ asset, accoun }) const TableRow = forwardRef( - ({ asset, accountNumber, accountIds, onActiveAccountIdsChange }, ref) => { - const isAccountEnabledInRedux = useAppSelector(state => - selectIsAnyAccountIdEnabled(state, accountIds), - ) + ({ asset, accountNumber, accountIds, onToggleAccountIds }, ref) => { + const isAccountEnabled = useAppSelector(state => selectIsAnyAccountIdEnabled(state, accountIds)) - const [isAccountActive, toggleIsAccountActive] = useToggle(isAccountEnabledInRedux) + const [isAccountActive, toggleIsAccountActive] = useToggle(isAccountEnabled) - useEffect(() => { - onActiveAccountIdsChange(accountIds, isAccountActive) - }, [accountIds, isAccountActive, isAccountEnabledInRedux, onActiveAccountIdsChange]) + const handleToggleIsAccountActive = useCallback(() => { + toggleIsAccountActive() + onToggleAccountIds(accountIds) + }, [accountIds, onToggleAccountIds, toggleIsAccountActive]) const firstAccount = useMemo(() => accountIds[0], [accountIds]) const otherAccountIds = useMemo(() => accountIds.slice(1), [accountIds]) const otherAccounts = useMemo(() => { return otherAccountIds.map(accountId => ( - - - + + + )) }, [asset, isAccountActive, otherAccountIds, ref]) @@ -118,7 +117,7 @@ const TableRow = forwardRef( <> - + {accountNumber} @@ -176,9 +175,7 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => { ) }, }) > 0 - const [accountIdActiveStateUpdate, setAccountIdActiveStateUpdate] = useState< - Record - >({}) + const [toggledActiveAccountIds, setToggledActiveAccountIds] = useState>(new Set()) // initial fetch to detect the number of accounts based on the "first empty account" heuristic const { data: allAccountIdsWithActivity } = useQuery( @@ -213,20 +210,27 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => { }) }, [accounts, chainId, queryClient, wallet, walletDeviceId]) - const handleAccountIdsActiveChange = useCallback((accountIds: AccountId[], isActive: boolean) => { - setAccountIdActiveStateUpdate(previousState => { - const stateUpdate = accountIds.reduce((accumulator, accountId) => { - return { ...accumulator, [accountId]: isActive } - }, {}) - return { ...previousState, ...stateUpdate } + const handleToggleAccountIds = useCallback((accountIds: AccountId[]) => { + setToggledActiveAccountIds(previousState => { + const updatedState = new Set(previousState) + for (const accountId of accountIds) { + if (updatedState.has(accountId)) { + updatedState.delete(accountId) + } else { + updatedState.add(accountId) + } + } + + return updatedState }) }, []) // TODO: Loading state const handleDone = useCallback(async () => { // for every new account that is active, fetch the account and upsert it into the redux state - for (const [accountId, isActive] of Object.entries(accountIdActiveStateUpdate)) { - if (!isActive) continue + for (const accountId of toggledActiveAccountIds) { + const isEnabled = selectIsAnyAccountIdEnabled(store.getState(), [accountId]) + if (isEnabled) continue await dispatch(portfolioApi.endpoints.getAccount.initiate({ accountId, upsertOnFetch: true })) } @@ -244,14 +248,12 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => { }), ) - const hiddenAccountIds = Object.entries(accountIdActiveStateUpdate) - .filter(([_, isActive]) => !isActive) - .map(([accountId]) => accountId) - - dispatch(portfolio.actions.setHiddenAccountIds(hiddenAccountIds)) + for (const accountId of toggledActiveAccountIds) { + dispatch(portfolio.actions.toggleAccountIdHidden(accountId)) + } onClose() - }, [accountIdActiveStateUpdate, accounts, dispatch, onClose, walletDeviceId]) + }, [toggledActiveAccountIds, accounts, dispatch, onClose, walletDeviceId]) const accountRows = useMemo(() => { if (!asset) return null @@ -263,11 +265,11 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => { accountNumber={accountNumber} accountIds={accountIds} asset={asset} - onActiveAccountIdsChange={handleAccountIdsActiveChange} + onToggleAccountIds={handleToggleAccountIds} /> ) }) - }, [accounts, asset, handleAccountIdsActiveChange]) + }, [accounts, asset, handleToggleAccountIds]) if (!asset) { console.error(`No fee asset found for chainId: ${chainId}`) diff --git a/src/state/slices/portfolioSlice/portfolioSlice.ts b/src/state/slices/portfolioSlice/portfolioSlice.ts index eb48302c4cb..9e3536ddfaa 100644 --- a/src/state/slices/portfolioSlice/portfolioSlice.ts +++ b/src/state/slices/portfolioSlice/portfolioSlice.ts @@ -137,8 +137,17 @@ export const portfolio = createSlice({ // add the `action.meta[SHOULD_AUTOBATCH]` field the enhancer needs prepare: prepareAutoBatched(), }, - setHiddenAccountIds: (draftState, { payload }: { payload: AccountId[] }) => { - draftState.hiddenAccountIds = payload + toggleAccountIdHidden: (draftState, { payload: accountId }: { payload: AccountId }) => { + const hiddenAccountIdsSet = new Set(draftState.hiddenAccountIds) + const isHidden = hiddenAccountIdsSet.has(accountId) + + if (!isHidden) { + hiddenAccountIdsSet.add(accountId) + } else { + hiddenAccountIdsSet.delete(accountId) + } + + draftState.hiddenAccountIds = Array.from(hiddenAccountIdsSet) }, }, extraReducers: builder => builder.addCase(PURGE, () => initialState),