From 2bf3e385b6e5cf172427053004fd95be910046af Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Wed, 1 May 2024 10:20:10 +0800
Subject: [PATCH] Change from array to Set

---
 .../NftSelectorContractPickerGrid.tsx         |  6 +-
 .../GalleryEditorNftSelector.tsx              | 65 ++++++-------------
 ...GalleryEditorNftSelectorContractScreen.tsx | 44 +++++--------
 .../NftSelectorPickerGrid.tsx                 | 13 ++--
 4 files changed, 42 insertions(+), 86 deletions(-)

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<string>;
 };
 
 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<ListRenderItem<typeof tokens>>(
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<SelectedItemMultiMode[]>([]);
+  const [selectedTokens, setSelectedTokens] = useState<Set<string>>(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() {
         <NftSelectorHeader
           title="Select item to add"
           rightButton={
-            isMultiselectMode && selectedTokens.length > 0 ? (
+            isMultiselectMode && selectedTokens.size > 0 ? (
               <Button
                 onPress={handleAddSelectedTokens}
                 eventElementId={null}
diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
index e733391cc..36694d255 100644
--- a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
+++ b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
@@ -10,8 +10,6 @@ import { NftSelectorContractWrapper } from '~/components/NftSelector/NftSelector
 import { GalleryEditorNftSelectorContractScreenQuery } from '~/generated/GalleryEditorNftSelectorContractScreenQuery.graphql';
 import { RootStackNavigatorParamList, RootStackNavigatorProp } from '~/navigation/types';
 
-import { SelectedItemMultiMode } from './GalleryEditorNftSelector';
-
 export function GalleryEditorNftSelectorContractScreen() {
   const query = useLazyLoadQuery<GalleryEditorNftSelectorContractScreenQuery>(
     graphql`
@@ -46,7 +44,7 @@ export function GalleryEditorNftSelectorContractScreen() {
     useRoute<RouteProp<RootStackNavigatorParamList, 'NftSelectorContractGalleryEditor'>>();
 
   const [isMultiselectMode, setIsMultiselectMode] = useState(false);
-  const [selectedTokens, setSelectedTokens] = useState<SelectedItemMultiMode[]>([]);
+  const [selectedTokens, setSelectedTokens] = useState<Set<string>>(new Set());
 
   const contractAddress = route.params.contractAddress;
   const isCreator = route.params.ownerFilter === 'Created';
@@ -70,24 +68,14 @@ export function GalleryEditorNftSelectorContractScreen() {
     (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({
@@ -104,7 +92,7 @@ export function GalleryEditorNftSelectorContractScreen() {
   );
 
   const handleAddSelectedTokens = useCallback(() => {
-    const formattedTokens = selectedTokens.map((token) => token.id);
+    const formattedTokens = Array.from(selectedTokens);
 
     navigation.navigate({
       name: 'GalleryEditor',
@@ -118,16 +106,14 @@ export function GalleryEditorNftSelectorContractScreen() {
 
   const handleSelectedAllPress = useCallback(() => {
     setSelectedTokens((prevTokens) => {
-      if (prevTokens.length > 0) {
+      const newTokens = new Set(prevTokens);
+
+      if (newTokens.size > 0) {
         setIsMultiselectMode(false);
-        return [];
+        return new Set();
       } else {
         setIsMultiselectMode(true);
-        return nonNullableTokens.map((token) => {
-          return {
-            id: token.dbid,
-          };
-        });
+        return new Set(nonNullableTokens.map((token) => token.dbid));
       }
     });
   }, [nonNullableTokens]);
@@ -139,7 +125,7 @@ export function GalleryEditorNftSelectorContractScreen() {
         isCreator={isCreator}
         contractId={contractId}
         rightButton={
-          selectedTokens.length > 0 ? (
+          selectedTokens.size > 0 ? (
             <Button
               onPress={handleAddSelectedTokens}
               eventElementId={null}
@@ -159,7 +145,7 @@ export function GalleryEditorNftSelectorContractScreen() {
         isMultiselectMode={isMultiselectMode}
         setIsMultiselectMode={setIsMultiselectMode}
         onSelectedAllPress={handleSelectedAllPress}
-        hasSelectedItems={selectedTokens.length > 0}
+        hasSelectedItems={selectedTokens.size > 0}
         ownershipTypeFilter={route.params.ownerFilter || 'Collected'}
       />
       <NftSelectorContractPickerGrid
diff --git a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx
index 2b7dbf946..4ffd5144f 100644
--- a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx
+++ b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx
@@ -39,7 +39,6 @@ import { contexts } from '~/shared/analytics/constants';
 import { removeNullValues } from '~/shared/relay/removeNullValues';
 import { doesUserOwnWalletFromChainFamily } from '~/shared/utils/doesUserOwnWalletFromChainFamily';
 
-import { SelectedItemMultiMode } from '../GalleryScreen/GalleryEditorNftSelector';
 import { NftSelectorLoadingSkeleton } from './NftSelectorLoadingSkeleton';
 
 type NftSelectorPickerGridProps = {
@@ -52,7 +51,7 @@ type NftSelectorPickerGridProps = {
   };
 
   isMultiselectMode?: boolean;
-  selectedTokens?: SelectedItemMultiMode[];
+  selectedTokens?: Set<string>;
 
   onRefresh: () => void;
 
@@ -67,7 +66,7 @@ export function NftSelectorPickerGrid({
   searchCriteria,
   style,
   isMultiselectMode,
-  selectedTokens = [],
+  selectedTokens = new Set(),
   onRefresh,
   onSelect,
   onSelectNftGroup,
@@ -533,7 +532,7 @@ type TokenGroupProps = {
     tokens: NftSelectorPickerGridTokenGridFragment$data[number][]
   ) => void;
   isMultiselectMode?: boolean;
-  selectedTokens?: SelectedItemMultiMode[];
+  selectedTokens?: Set<string>;
 };
 
 function TokenGroup({
@@ -544,7 +543,7 @@ function TokenGroup({
   onSelectNft,
   onSelectGroup,
   isMultiselectMode,
-  selectedTokens = [],
+  selectedTokens = new Set(),
 }: TokenGroupProps) {
   const tokens = useFragment(
     graphql`
@@ -564,9 +563,7 @@ function TokenGroup({
   }, [tokens]);
 
   const isSelected = useMemo(() => {
-    return selectedTokens.some((token) => {
-      return token.id === firstToken?.dbid;
-    });
+    return selectedTokens.has(firstToken?.dbid ?? '');
   }, [firstToken?.dbid, selectedTokens]);
 
   if (!firstToken) {