update Search Default state on mobile

apps/mobile/src/components/Search/SearchDefault.tsx

@@ -1,12 +1,16 @@
 import { FlashList, ListRenderItem } from '@shopify/flash-list';
-import { useCallback, useMemo } from 'react';
+import { Suspense, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
 import { SearchDefaultFragment$key } from '~/generated/SearchDefaultFragment.graphql';
+import { TrendingUserCardFragment$key } from '~/generated/TrendingUserCardFragment.graphql';
 import { UserSearchResultFragment$key } from '~/generated/UserSearchResultFragment.graphql';
+import { removeNullValues } from '~/shared/relay/removeNullValues';
 
+import { TrendingUserCard } from '../Trending/TrendingUserCard';
 import { Typography } from '../Typography';
+import { UserFollowListFallback } from '../UserFollowList/UserFollowListFallback';
 import { UserSearchResult } from './User/UserSearchResult';
 
 type Props = {
@@ -17,17 +21,54 @@ type Props = {
 
 type ListItemType =
   | { kind: 'header'; title: string }
-  | { kind: 'user'; user: UserSearchResultFragment$key };
+  | { kind: 'user'; user: UserSearchResultFragment$key }
+  | {
+      kind: 'userCardRow';
+      users: Array<TrendingUserCardFragment$key>;
+    };
+
+const CARD_HEIGHT = 145;
+const CARD_WIDTH = 185;
 
 export function SearchDefault({ queryRef, blurInputFocus, keyword }: Props) {
   const query = useFragment(
     graphql`
       fragment SearchDefaultFragment on Query {
+        ...TrendingUserCardQueryFragment
         trendingUsers5Days: trendingUsers(input: { report: LAST_5_DAYS }) {
           ... on TrendingUsersPayload {
             __typename
             users {
+              galleries {
+                tokenPreviews {
+                  __typename
+                }
+              }
+
               ...UserSearchResultFragment
+              ...TrendingUserCardFragment
+            }
+          }
+        }
+        viewer @required(action: THROW) {
+          ... on Viewer {
+            suggestedUsers(first: 2) @required(action: THROW) {
+              __typename
+              edges {
+                node {
+                  __typename
+                  ... on GalleryUser {
+                    galleries {
+                      tokenPreviews {
+                        __typename
+                      }
+                    }
+
+                    ...UserSearchResultFragment
+                    ...TrendingUserCardFragment
+                  }
+                }
+              }
             }
           }
         }
@@ -52,24 +93,80 @@ export function SearchDefault({ queryRef, blurInputFocus, keyword }: Props) {
             </Typography>
           </View>
         );
+      } else if (item.kind === 'userCardRow') {
+        return (
+          <View className="flex flex-row justify-around">
+            {item?.users?.map((user, idx) => {
+              return (
+                <View className="mb-1 " style={{ width: CARD_WIDTH, height: CARD_HEIGHT }}>
+                  <TrendingUserCard
+                    key={idx}
+                    userRef={user}
+                    queryRef={query}
+                    showFollowButton={false}
+                  />
+                </View>
+              );
+            })}
+          </View>
+        );
       } else {
         return <UserSearchResult userRef={item.user} keyword={keyword} />;
       }
     },
-    [keyword]
+    [query, keyword]
   );
 
   const items = useMemo((): ListItemType[] => {
     const items: ListItemType[] = [];
-    items.push({
-      kind: 'header',
-      title: 'Trending Curators',
-    });
+
+    const suggestedUsers = [];
+    if (query.viewer?.suggestedUsers?.__typename === 'UsersConnection') {
+      for (const edge of query.viewer?.suggestedUsers?.edges ?? []) {
+        if (edge?.node) {
+          suggestedUsers.push(edge.node);
+        }
+      }
+    }
+    if (suggestedUsers) {
+      items.push({
+        kind: 'header',
+        title: 'Suggested Collectors and Creators',
+      });
+      items.push({
+        kind: 'userCardRow',
+        users: suggestedUsers?.slice(0, 2),
+      });
+    }
+
     if (
       query.trendingUsers5Days?.__typename === 'TrendingUsersPayload' &&
       query.trendingUsers5Days.users
     ) {
-      for (const user of query.trendingUsers5Days.users) {
+      const { users } = query.trendingUsers5Days;
+
+      const usersWithTokenPreviews = users.filter((user) => {
+        return user?.galleries?.find(
+          (gallery) => removeNullValues(gallery?.tokenPreviews).length > 0
+        );
+      });
+
+      if (usersWithTokenPreviews) {
+        items.push({
+          kind: 'header',
+          title: 'Trending Collectors and Creators',
+        });
+        items.push({
+          kind: 'userCardRow',
+          users: usersWithTokenPreviews?.slice(0, 2),
+        });
+      }
+
+      items.push({
+        kind: 'header',
+        title: 'Trending Curators',
+      });
+      for (const user of users) {
         items.push({
           kind: 'user',
           user,
@@ -81,13 +178,15 @@ export function SearchDefault({ queryRef, blurInputFocus, keyword }: Props) {
 
   return (
     <View className="flex-grow">
-      <FlashList
-        keyboardShouldPersistTaps="always"
-        data={items}
-        estimatedItemSize={25}
-        renderItem={renderItem}
-        onTouchStart={blurInputFocus}
-      />
+      <Suspense fallback={<UserFollowListFallback />}>
+        <FlashList
+          keyboardShouldPersistTaps="always"
+          data={items}
+          estimatedItemSize={25}
+          renderItem={renderItem}
+          onTouchStart={blurInputFocus}
+        />
+      </Suspense>
     </View>
   );
 }

apps/mobile/src/components/Trending/TrendingUserCard.tsx

@@ -23,6 +23,7 @@ import { Typography } from '../Typography';
 type Props = {
   userRef: TrendingUserCardFragment$key;
   queryRef: TrendingUserCardQueryFragment$key;
+  showFollowButton?: boolean;
   style?: ViewProps['style'];
 };
 
@@ -32,7 +33,7 @@ const markdownStyle = {
   },
 };
 
-export function TrendingUserCard({ style, userRef, queryRef }: Props) {
+export function TrendingUserCard({ style, userRef, queryRef, showFollowButton = true }: Props) {
   const user = useFragment(
     graphql`
       fragment TrendingUserCardFragment on GalleryUser {
@@ -159,8 +160,7 @@ export function TrendingUserCard({ style, userRef, queryRef }: Props) {
           </Markdown>
         </View>
       </View>
-
-      <FollowButton queryRef={query} userRef={user} width="grow" />
+      {showFollowButton && <FollowButton queryRef={query} userRef={user} width="grow" />}
     </GalleryTouchableOpacity>
   );
 }