diff --git a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx index b26479dd9..c5c687abc 100644 --- a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx +++ b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx @@ -6,7 +6,6 @@ import { graphql, useFragment } from 'react-relay'; import { GalleryRefreshControl } from '~/components/GalleryRefreshControl'; import { useSyncTokensActions } from '~/contexts/SyncTokensContext'; import { NftSelectorContractPickerGridFragment$key } from '~/generated/NftSelectorContractPickerGridFragment.graphql'; -import { SelectedItemMultiMode } from '~/screens/GalleryScreen/GalleryEditorNftSelector'; import { NftSelectorLoadingSkeleton } from '~/screens/NftSelectorScreen/NftSelectorLoadingSkeleton'; import { NftSelectorPickerSingularAsset } from '~/screens/NftSelectorScreen/NftSelectorPickerSingularAsset'; @@ -17,7 +16,7 @@ type Props = { style?: ViewProps['style']; isMultiselectMode?: boolean; - selectedTokens?: SelectedItemMultiMode[]; + selectedTokens?: Set; }; export function NftSelectorContractPickerGrid({ @@ -55,8 +54,7 @@ export function NftSelectorContractPickerGrid({ }, [syncCreatedTokensForExistingContract, contractId]); const isSelected = useMemo(() => { - const selectedTokenIds = selectedTokens?.map((token) => token.id) ?? []; - return (tokenId: string) => selectedTokenIds.includes(tokenId); + return (tokenId: string) => selectedTokens?.has(tokenId) ?? false; }, [selectedTokens]); const renderItem = useCallback>( diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx index 10022aa9e..c06d77244 100644 --- a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx +++ b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx @@ -1,6 +1,6 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'; import { Suspense, useCallback, useMemo, useState } from 'react'; -import { View } from 'react-native'; +import { Text, View } from 'react-native'; import { Button } from '~/components/Button'; import { NftSelectorHeader } from '~/components/NftSelector/NftSelectorHeader'; @@ -12,11 +12,6 @@ import { RootStackNavigatorParamList, RootStackNavigatorProp } from '~/navigatio import { NftSelectorLoadingSkeleton } from '~/screens/NftSelectorScreen/NftSelectorLoadingSkeleton'; import { NftSelectorPickerGrid } from '~/screens/NftSelectorScreen/NftSelectorPickerGrid'; -export type SelectedItemMultiMode = { - id: string; - contractAddress?: string; -}; - export function GalleryEditorNftSelector() { const { searchQuery, @@ -37,30 +32,20 @@ export function GalleryEditorNftSelector() { const [isMultiselectMode, setIsMultiselectMode] = useState(false); - const [selectedTokens, setSelectedTokens] = useState([]); + const [selectedTokens, setSelectedTokens] = useState>(new Set()); const handleSelectNft = useCallback( (tokenId: string) => { if (isMultiselectMode) { setSelectedTokens((prevTokens) => { - if ( - prevTokens.some((token) => { - return token.id === tokenId; - }) - ) { - return [ - ...prevTokens.filter((token) => { - return token.id !== tokenId; - }), - ]; + const newTokens = new Set(prevTokens); + + if (newTokens.has(tokenId)) { + newTokens.delete(tokenId); } else { - return [ - ...prevTokens, - { - id: tokenId, - }, - ]; + newTokens.add(tokenId); } + return newTokens; }); } else { navigation.navigate({ @@ -79,27 +64,17 @@ export function GalleryEditorNftSelector() { const handleSelectNftGroup = useCallback( (contractAddress: string, tokens: NftSelectorPickerGridTokenGridFragment$data[number][]) => { if (isMultiselectMode) { - const formattedTokens = tokens.map((token) => { - return { - id: token.dbid, - contractAddress, - }; - }); - setSelectedTokens((prevTokens) => { - if ( - prevTokens.some((token) => { - return token.contractAddress === contractAddress; - }) - ) { - return [ - ...prevTokens.filter((token) => { - return token.contractAddress !== contractAddress; - }), - ]; - } else { - return [...prevTokens, ...formattedTokens]; - } + const newTokens = new Set(prevTokens); + + tokens.forEach((token) => { + if (newTokens.has(token.dbid)) { + newTokens.delete(token.dbid); + } else { + newTokens.add(token.dbid); + } + }); + return newTokens; }); } else { navigation.navigate({ @@ -115,7 +90,7 @@ export function GalleryEditorNftSelector() { ); const handleAddSelectedTokens = useCallback(() => { - const formattedTokens = selectedTokens.map((token) => token.id); + const formattedTokens = Array.from(selectedTokens); navigation.navigate({ name: 'GalleryEditor', @@ -143,7 +118,7 @@ export function GalleryEditorNftSelector() { 0 ? ( + isMultiselectMode && selectedTokens.size > 0 ? (