TW-993: Assets rework. Pagination logic. Fix paginated list update + …

…Fix search
madfish-solutions · Nov 9, 2023 · b418d3b · b418d3b
1 parent 7e83e56
commit b418d3b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/src/app/hooks/use-collectibles-pagination-logic.ts b/src/app/hooks/use-collectibles-pagination-logic.ts
@@ -53,7 +53,10 @@ export const useCollectiblesPaginationLogic = (allSlugsSorted: string[]) => {
   });
 
   useDidUpdate(() => {
-    if (!isLoading && slugs.length) _load(slugs.length);
+    if (isLoading) return;
+
+    if (slugs.length) _load(slugs.length);
+    else if (allSlugsSorted.length) _load(ITEMS_PER_PAGE);
   }, [allSlugsSorted]);
 
   const loadNext = useCallback(() => {

diff --git a/src/app/hooks/use-tokens-listing-logic.ts b/src/app/hooks/use-tokens-listing-logic.ts
@@ -10,6 +10,7 @@ import { useTokensSortPredicate } from 'lib/assets/use-sorting';
 import { useCurrentAccountBalances } from 'lib/balances';
 import { useGetTokenOrGasMetadata } from 'lib/metadata';
 import { useMemoWithCompare } from 'lib/ui/hooks';
+import { isSearchStringApplicable } from 'lib/utils/search-items';
 
 export const useTokensListingLogic = (
   assetsSlugs: string[],
@@ -18,7 +19,7 @@ export const useTokensListingLogic = (
   leadingAssetsAreFilterable = false
 ) => {
   const nonLeadingAssets = useMemo(
-    () => (leadingAssets?.length ? assetsSlugs.filter(slug => !leadingAssets.includes(slug)) : [...assetsSlugs]),
+    () => (leadingAssets?.length ? assetsSlugs.filter(slug => !leadingAssets.includes(slug)) : assetsSlugs),
     [assetsSlugs, leadingAssets]
   );
 
@@ -45,7 +46,9 @@ export const useTokensListingLogic = (
 
   const searchedSlugs = useMemo(
     () =>
-      searchAssetsWithNoMeta(searchValueDebounced, sourceArray, getMetadata, slug => slug).sort(assetsSortPredicate),
+      isSearchStringApplicable(searchValueDebounced)
+        ? searchAssetsWithNoMeta(searchValueDebounced, sourceArray, getMetadata, slug => slug)
+        : [...sourceArray].sort(assetsSortPredicate),
     [searchValueDebounced, sourceArray, getMetadata, assetsSortPredicate]
   );
 

diff --git a/src/lib/assets/search.utils.ts b/src/lib/assets/search.utils.ts
@@ -3,26 +3,43 @@ import { TEZOS_METADATA } from 'lib/metadata/defaults';
 import type { AssetMetadataBase } from 'lib/metadata/types';
 import { searchAndFilterItems } from 'lib/utils/search-items';
 
+import { fromAssetSlug } from './utils';
+
 export function searchAssetsWithNoMeta<T>(
   searchValue: string,
   assets: T[],
   getMetadata: (slug: string) => AssetMetadataBase | undefined,
   getSlug: (asset: T) => string
 ) {
+  const trimmedSearchValue = searchValue.trim();
+
+  if (trimmedSearchValue.search(/^[A-Za-z0-9]+_\d*$/) === 0)
+    return assets.filter(asset => getSlug(asset).startsWith(trimmedSearchValue));
+
   return searchAndFilterItems(
     assets,
     searchValue,
-    [
-      { name: 'metadata.symbol', weight: 1 },
-      { name: 'metadata.name', weight: 0.25 },
-      { name: 'slug', weight: 0.1 }
-    ],
+    Number.isInteger(Number(searchValue))
+      ? [
+          { name: 'tokenId', weight: 1 },
+          { name: 'symbol', weight: 0.75 },
+          { name: 'name', weight: 0.5 }
+        ]
+      : [
+          { name: 'symbol', weight: 1 },
+          { name: 'name', weight: 0.5 },
+          { name: 'contract', weight: 0.1 }
+        ],
     asset => {
       const slug = getSlug(asset);
+      const [contract, tokenId] = fromAssetSlug(slug);
+      const metadata = isTezAsset(slug) ? TEZOS_METADATA : getMetadata(slug);
 
       return {
-        slug,
-        metadata: isTezAsset(slug) ? TEZOS_METADATA : getMetadata(slug)
+        contract,
+        tokenId,
+        symbol: metadata?.symbol,
+        name: metadata?.name
       };
     }
   );

diff --git a/src/lib/utils/search-items.ts b/src/lib/utils/search-items.ts
@@ -20,5 +20,5 @@ export function searchAndFilterItems<T, S>(
 
   const result = fuse.search(searchString);
 
-  return items.filter((_, index) => result.some(({ refIndex }) => refIndex === index));
+  return result.map(({ refIndex }) => items[refIndex]!);
 }