add SuggestedUser card row in mobile feed

apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { FeedListItemType } from '~/components/Feed/createVirtualizedFeedEventItems';
 import { FeedListCaption } from '~/components/Feed/FeedListCaption';
@@ -7,8 +7,10 @@ import { FeedListSectionHeader } from '~/components/Feed/FeedListSectionHeader';
 import { FeedEventSocializeSection } from '~/components/Feed/Socialize/FeedEventSocializeSection';
 import { ReportingErrorBoundary } from '~/shared/errors/ReportingErrorBoundary';
 
+import { SearchDefaultCardRowFallback } from '../Search/SearchDefaultFallback';
 import { FeedFilter } from './FeedFilter';
 import { FeedPostSocializeSection } from './Posts/FeedPostSocializeSection';
+import { FeedSuggestedProfileRow } from './Posts/FeedSuggestedProfileRow';
 import { PostListCaption } from './Posts/PostListCaption';
 import { PostListItem } from './Posts/PostListItem';
 import { PostListMintButtonSection } from './Posts/PostListMintButtonSection';
@@ -64,6 +66,12 @@ export function FeedVirtualizedRow({ onFailure, item }: Props) {
         );
       case 'post-item-mint-link':
         return <PostListMintButtonSection postRef={item.post} />;
+      case 'suggested-profile-row':
+        return (
+          <Suspense fallback={<SearchDefaultCardRowFallback />}>
+            <FeedSuggestedProfileRow queryRef={item.queryRef} />
+          </Suspense>
+        );
     }
   }, [item]);
 

apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+import { removeNullValues } from 'shared/relay/removeNullValues';
+
+import { TrendingUserCard } from '~/components/Trending/TrendingUserCard';
+import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedProfileRowFragment.graphql';
+
+import { Typography } from '../../Typography';
+
+const CARD_HEIGHT = 180;
+const CARD_WIDTH = 180;
+
+type FeedSuggestedProfileRowProps = {
+  queryRef: FeedSuggestedProfileRowFragment$key;
+};
+
+export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowProps) {
+  const query = useFragment(
+    graphql`
+      fragment FeedSuggestedProfileRowFragment on Query {
+        viewer @required(action: THROW) {
+          ... on Viewer {
+            suggestedUsers(first: 4) @required(action: THROW) {
+              __typename
+              edges {
+                node {
+                  __typename
+                  ... on GalleryUser {
+                    galleries {
+                      tokenPreviews {
+                        __typename
+                      }
+                    }
+                    ...TrendingUserCardFragment
+                  }
+                }
+              }
+            }
+          }
+        }
+        ...TrendingUserCardQueryFragment
+      }
+    `,
+    queryRef
+  );
+
+  const suggestedUsers = useMemo(() => {
+    const users = [];
+    if (query.viewer?.suggestedUsers?.__typename === 'UsersConnection') {
+      for (const edge of query.viewer?.suggestedUsers?.edges ?? []) {
+        if (edge?.node) {
+          users.push(edge.node);
+        }
+      }
+    }
+    if (users) {
+      const usersWithTokenPreviews = users.filter((user) => {
+        return user?.galleries?.find(
+          (gallery) => removeNullValues(gallery?.tokenPreviews).length > 0
+        );
+      });
+      return usersWithTokenPreviews?.slice(0, 2);
+    }
+    return users;
+  }, [query.viewer?.suggestedUsers]);
+
+  return (
+    <View className="pl-4 mt-2 mb-12 space-y-3">
+      <Typography
+        className="text-sm text-offBlack dark:text-offBlack"
+        font={{ family: 'ABCDiatype', weight: 'Bold' }}
+      >
+        Suggested creators and collectors
+      </Typography>
+      <View className="space-x-1 flex flex-row">
+        {suggestedUsers?.map((user, idx) => {
+          return (
+            <View className="mb-1" style={{ width: CARD_WIDTH, height: CARD_HEIGHT }} key={idx}>
+              <TrendingUserCard userRef={user} queryRef={query} />
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts

@@ -22,6 +22,8 @@ import { removeNullValues } from '~/shared/relay/removeNullValues';
 export type FeedItemTypes = 'Post' | 'FeedEvent';
 type itemType = FeedItemTypes | null;
 
+const SUGGESTED_PROFILE_ROW_IDX = 5;
+
 export type FeedListItemType = { key: string } & (
   | {
       kind: 'feed-item-navigation';
@@ -107,6 +109,14 @@ export type FeedListItemType = { key: string } & (
       postId: string;
       itemType: itemType;
     }
+  | {
+      kind: 'suggested-profile-row';
+      event: null;
+      post: null;
+      eventId: string;
+      queryRef: createVirtualizedFeedEventItemsQueryFragment$data;
+      itemType: itemType;
+    }
 );
 
 export type createVirtualizedItemsFromFeedEventsArgs = {
@@ -149,6 +159,8 @@ export function createVirtualizedFeedEventItems({
         ...FeedPostSocializeSectionQueryFragment
         # eslint-disable-next-line relay/must-colocate-fragment-spreads
         ...PostListItemQueryFragment
+        # eslint-disable-next-line relay/must-colocate-fragment-spreads
+        ...FeedSuggestedProfileRowFragment
       }
     `,
     queryRef
@@ -370,5 +382,26 @@ export function createVirtualizedFeedEventItems({
     }
   }
 
-  return { items };
+  let postCount = 0;
+  const itemsWithSuggestedProfileRow = [];
+
+  for (const item of items) {
+    if (item.kind === 'post-item-header') {
+      postCount++;
+      if (postCount === SUGGESTED_PROFILE_ROW_IDX) {
+        itemsWithSuggestedProfileRow.push({
+          kind: 'suggested-profile-row',
+          event: null,
+          post: null,
+          queryRef: query,
+          key: 'suggested-profile-row',
+          eventId: 'suggested-profile-row',
+          itemType: null,
+        } as FeedListItemType);
+      }
+    }
+    itemsWithSuggestedProfileRow.push(item);
+  }
+
+  return { items: itemsWithSuggestedProfileRow };
 }