Nft props renaming

Emurgo · Mar 31, 2023 · c274a2a · c274a2a
1 parent 02fc125
commit c274a2a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/src/Nfts/Nfts.stories.tsx b/src/Nfts/Nfts.stories.tsx
@@ -12,7 +12,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadingWallet}>
-          <Nfts nfts={[]} search="" />
+          <Nfts nftsSearchResult={[]} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -27,7 +27,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadedWallet}>
-          <Nfts nfts={[]} search="" />
+          <Nfts nftsSearchResult={[]} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -42,7 +42,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadedWallet}>
-          <Nfts nfts={generateManyNfts()} search="" />
+          <Nfts nftsSearchResult={generateManyNfts()} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -57,7 +57,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadedWallet}>
-          <Nfts nfts={generateManyNfts()} search="" />
+          <Nfts nftsSearchResult={generateManyNfts()} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -72,7 +72,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadedWallet}>
-          <Nfts nfts={generateManyNfts()} search="" />
+          <Nfts nftsSearchResult={generateManyNfts()} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -87,7 +87,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadedWallet}>
-          <Nfts nfts={generateManyNfts()} search="" />
+          <Nfts nftsSearchResult={generateManyNfts()} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -102,7 +102,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadedWallet}>
-          <Nfts nfts={generateManyNfts()} search="" />
+          <Nfts nftsSearchResult={generateManyNfts()} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -117,7 +117,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={loadedWallet}>
-          <Nfts nfts={generateManyNfts()} search="" />
+          <Nfts nftsSearchResult={generateManyNfts()} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )
@@ -130,7 +130,7 @@ storiesOf('NFT/Gallery', module)
     return (
       <QueryProvider>
         <SelectedWalletProvider wallet={errorWallet}>
-          <Nfts nfts={[]} search="" />
+          <Nfts nftsSearchResult={[]} nftsSearchTerm="" />
         </SelectedWalletProvider>
       </QueryProvider>
     )

diff --git a/src/Nfts/Nfts.tsx b/src/Nfts/Nfts.tsx
@@ -10,9 +10,9 @@ import {ImageGallery, SkeletonGallery} from './ImageGallery'
 import {useNavigateTo} from './navigation'
 import {NoNftsScreen} from './NoNftsScreen'
 
-export const Nfts = ({nfts, search}: {nfts: YoroiNft[]; search: string}) => {
+export const Nfts = ({nftsSearchResult, nftsSearchTerm}: {nftsSearchResult: YoroiNft[]; nftsSearchTerm: string}) => {
   const navigateTo = useNavigateTo()
-  const handleNftSelect = (index: number) => navigateTo.nftDetails(nfts[index].id)
+  const handleNftSelect = (index: number) => navigateTo.nftDetails(nftsSearchResult[index].id)
   const [isManualRefreshing, setIsManualRefreshing] = React.useState(false)
   const wallet = useSelectedWallet()
   const strings = useStrings()
@@ -39,12 +39,12 @@ export const Nfts = ({nfts, search}: {nfts: YoroiNft[]; search: string}) => {
   if (isLoading) {
     return (
       <ScreenWrapper>
-        <LoadingScreen nftsCount={nfts.length} />
+        <LoadingScreen nftsCount={nftsSearchResult.length} />
       </ScreenWrapper>
     )
   }
 
-  if (search.length > 0 && nfts.length === 0) {
+  if (nftsSearchTerm.length > 0 && nftsSearchResult.length === 0) {
     return (
       <ScreenWrapper>
         <ScrollView
@@ -58,7 +58,7 @@ export const Nfts = ({nfts, search}: {nfts: YoroiNft[]; search: string}) => {
     )
   }
 
-  if (search.length === 0 && nfts.length === 0) {
+  if (nftsSearchTerm.length === 0 && nftsSearchResult.length === 0) {
     return (
       <ScreenWrapper>
         <ScrollView
@@ -70,7 +70,7 @@ export const Nfts = ({nfts, search}: {nfts: YoroiNft[]; search: string}) => {
             message={strings.noNftsInWallet}
             heading={
               <View>
-                <NftCount count={nfts.length} />
+                <NftCount count={nftsSearchResult.length} />
 
                 <Spacer height={16} />
               </View>
@@ -84,15 +84,20 @@ export const Nfts = ({nfts, search}: {nfts: YoroiNft[]; search: string}) => {
   return (
     <ScreenWrapper>
       <View style={styles.galleryContainer}>
-        {search.length === 0 && (
+        {nftsSearchTerm.length === 0 && (
           <View>
-            <NftCount count={nfts.length} />
+            <NftCount count={nftsSearchResult.length} />
 
             <Spacer height={16} />
           </View>
         )}
 
-        <ImageGallery nfts={nfts} onSelect={handleNftSelect} onRefresh={onRefresh} isRefreshing={isManualRefreshing} />
+        <ImageGallery
+          nfts={nftsSearchResult}
+          onSelect={handleNftSelect}
+          onRefresh={onRefresh}
+          isRefreshing={isManualRefreshing}
+        />
       </View>
     </ScreenWrapper>
   )

diff --git a/src/Nfts/NftsNavigator.tsx b/src/Nfts/NftsNavigator.tsx
@@ -23,7 +23,7 @@ const Routes = () => {
   const strings = useStrings()
   const wallet = useSelectedWallet()
   const {nfts} = useNfts(wallet)
-  const {searchHeaderOptions, searchResult, search} = useSearchHeader({
+  const {searchHeaderOptions, searchResult, searchTerm} = useSearchHeader({
     target: nfts,
     searchBy: 'name',
     placeHolderText: strings.search,
@@ -33,7 +33,7 @@ const Routes = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen name="nft-gallery" options={searchHeaderOptions}>
-        {() => <Nfts nfts={searchResult} search={search} />}
+        {() => <Nfts nftsSearchResult={searchResult} nftsSearchTerm={searchTerm} />}
       </Stack.Screen>
     </Stack.Navigator>
   )

diff --git a/src/Search/SearchHeader.tsx b/src/Search/SearchHeader.tsx
@@ -18,7 +18,7 @@ export const useSearchHeader = ({target, searchBy, placeHolderText, title, sort
 
   return {
     searchResult,
-    search,
+    searchTerm: search,
     searchHeaderOptions,
   }
 }