Fix memo: selectMyActiveClaims, selectAbandoningIds

## Issue
- selectMyActiveClaims memo problem -- being recalculated on every click -- high workload for wallet with large uploads.
- Mistake in handling abandoning IDs (it was trying to extract keys from an array)

## Changes
- selectAbandoningIds: never use `state` as an input selector. Breaks memo.
- Don't use selectMyClaimsRaw and then reduce it back to IDs. Use selectMyClaimIdsRaw instead.
- selectAbandoningIds is already in array form, so don't run Object.keys.
- Fix abandoningById never clearing when succeeded.
This commit is contained in:
infinite-persistence 2021-11-10 09:32:29 +08:00
parent c681d95ad7
commit 97b9b733c6
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 15 additions and 7 deletions

View file

@ -604,6 +604,7 @@ reducers[ACTIONS.ABANDON_CLAIM_SUCCEEDED] = (state: State, action: any): State =
const newMyClaims = state.myClaims ? state.myClaims.slice() : []; const newMyClaims = state.myClaims ? state.myClaims.slice() : [];
const newMyChannelClaims = state.myChannelClaims ? state.myChannelClaims.slice() : []; const newMyChannelClaims = state.myChannelClaims ? state.myChannelClaims.slice() : [];
const claimsByUri = Object.assign({}, state.claimsByUri); const claimsByUri = Object.assign({}, state.claimsByUri);
const abandoningById = Object.assign({}, state.abandoningById);
const newMyCollectionClaims = state.myCollectionClaims ? state.myCollectionClaims.slice() : []; const newMyCollectionClaims = state.myCollectionClaims ? state.myCollectionClaims.slice() : [];
Object.keys(claimsByUri).forEach((uri) => { Object.keys(claimsByUri).forEach((uri) => {
@ -611,6 +612,11 @@ reducers[ACTIONS.ABANDON_CLAIM_SUCCEEDED] = (state: State, action: any): State =
delete claimsByUri[uri]; delete claimsByUri[uri];
} }
}); });
if (abandoningById[claimId]) {
delete abandoningById[claimId];
}
const myClaims = newMyClaims.filter((i) => i !== claimId); const myClaims = newMyClaims.filter((i) => i !== claimId);
const myChannelClaims = newMyChannelClaims.filter((i) => i !== claimId); const myChannelClaims = newMyChannelClaims.filter((i) => i !== claimId);
const myCollectionClaims = newMyCollectionClaims.filter((i) => i !== claimId); const myCollectionClaims = newMyCollectionClaims.filter((i) => i !== claimId);
@ -623,6 +629,7 @@ reducers[ACTIONS.ABANDON_CLAIM_SUCCEEDED] = (state: State, action: any): State =
myCollectionClaims, myCollectionClaims,
byId, byId,
claimsByUri, claimsByUri,
abandoningById,
}); });
}; };

View file

@ -177,7 +177,10 @@ export const selectMyClaimsRaw = createSelector(selectState, selectClaimsById, (
return claims; return claims;
}); });
export const selectAbandoningIds = createSelector(selectState, (state) => Object.keys(state.abandoningById || {})); export const selectAbandoningById = (state: State) => selectState(state).abandoningById || {};
export const selectAbandoningIds = createSelector(selectAbandoningById, (abandoningById) =>
Object.keys(abandoningById)
);
export const makeSelectAbandoningClaimById = (claimId: string) => export const makeSelectAbandoningClaimById = (claimId: string) =>
createSelector(selectAbandoningIds, (ids) => ids.includes(claimId)); createSelector(selectAbandoningIds, (ids) => ids.includes(claimId));
@ -189,13 +192,11 @@ export const makeSelectIsAbandoningClaimForUri = (uri: string) =>
}); });
export const selectMyActiveClaims = createSelector( export const selectMyActiveClaims = createSelector(
selectMyClaimsRaw, selectMyClaimIdsRaw,
selectAbandoningIds, selectAbandoningIds,
(claims, abandoningIds) => (myClaimIds, abandoningIds) => {
new Set( return new Set(myClaimIds && myClaimIds.filter((claimId) => !abandoningIds.includes(claimId)));
claims && }
claims.map((claim) => claim.claim_id).filter((claimId) => Object.keys(abandoningIds).indexOf(claimId) === -1)
)
); );
export const makeSelectClaimIsMine = (rawUri: string) => { export const makeSelectClaimIsMine = (rawUri: string) => {