From a8b51b2839b0e0789d4cc9a80b397ab1f2b0096a Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Tue, 9 Apr 2024 19:11:22 -0400 Subject: [PATCH 01/12] still not sure how to use this though... --- .../components/Feed/FeedVirtualizedRow.tsx | 3 + .../Feed/Posts/FeedSuggestedProfileRow.tsx | 70 +++++++++++++++++++ .../Feed/createVirtualizedFeedEventItems.ts | 29 +++++++- 3 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx diff --git a/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx b/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx index 4738260b57..95e6aaf2ea 100644 --- a/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx +++ b/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx @@ -13,6 +13,7 @@ import { PostListCaption } from './Posts/PostListCaption'; import { PostListItem } from './Posts/PostListItem'; import { PostListMintButtonSection } from './Posts/PostListMintButtonSection'; import { PostListSectionHeader } from './Posts/PostListSectionHeader'; +import { FeedSuggestedProfileRow } from './Posts/FeedSuggestedProfileRow'; type Props = { item: FeedListItemType; @@ -64,6 +65,8 @@ export function FeedVirtualizedRow({ onFailure, item }: Props) { ); case 'post-item-mint-link': return ; + case 'suggested-profile-row': + return ; } }, [item]); diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx new file mode 100644 index 0000000000..9d3466582a --- /dev/null +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -0,0 +1,70 @@ +import { graphql, useFragment } from 'react-relay'; +import { View } from 'react-native'; +import { useMemo } from 'react'; + +import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedProfileRowFragment.graphql'; + +const CARD_HEIGHT = 145; +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: 2) @required(action: THROW) { + __typename + edges { + node { + __typename + ... on GalleryUser { + galleries { + tokenPreviews { + __typename + } + } + ...UserSearchResultFragment + ...TrendingUserCardFragment + } + } + } + } + } + } + } + `, + 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) { + return users?.slice(0, 2); + } + return users; + }, []); + + return ( + + {suggestedUsers?.map((user, idx) => { + return ( + + + + ); + })} + + ); +} diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index ff136dd333..cfdb0e2465 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -19,7 +19,7 @@ import { } from '~/generated/createVirtualizedFeedEventItemsQueryFragment.graphql'; import { removeNullValues } from '~/shared/relay/removeNullValues'; -export type FeedItemTypes = 'Post' | 'FeedEvent'; +export type FeedItemTypes = 'Post' | 'FeedEvent' | 'SuggestedProfileRow'; type itemType = FeedItemTypes | null; export type FeedListItemType = { key: string } & ( @@ -107,6 +107,13 @@ export type FeedListItemType = { key: string } & ( postId: string; itemType: itemType; } + | { + kind: 'suggested-profile-row'; + event: null; + post: null; + queryRef: createVirtualizedFeedEventItemsQueryFragment$data; + itemType: itemType; + } ); export type createVirtualizedItemsFromFeedEventsArgs = { @@ -149,6 +156,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 @@ -361,6 +370,21 @@ export function createVirtualizedFeedEventItems({ } }; + const setVirtualizeItemsForSuggestedProfileRow = ( + query: createVirtualizedFeedEventItemsQueryFragment$data + ) => { + const uniqueKey = Math.random().toString(); + + items.push({ + kind: 'suggested-profile-row', + post: null, + event: null, + key: `feed-suggested-profile-row-${uniqueKey}`, + queryRef: query, + itemType: 'FeedEvent', + }); + }; + for (const item of newItems) { if (item.__typename === 'FeedEvent') { setVirtualizeItemsForEvent(item); @@ -368,6 +392,9 @@ export function createVirtualizedFeedEventItems({ if (item.__typename === 'Post') { setVirtualizeItemsForPost(item); } + if (item.__typename === 'SuggestedProfileRow') { + setVirtualizeItemsForSuggestedProfileRow(item); + } } return { items }; From 60842746ceab1b02d2c6269f5aa4e6c90f701141 Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 20:34:11 -0400 Subject: [PATCH 02/12] better... --- apps/mobile/src/components/Feed/FeedList.tsx | 9 +++++- .../Feed/Posts/FeedSuggestedProfileRow.tsx | 6 ++-- .../Feed/createVirtualizedFeedEventItems.ts | 28 +++++++++++++++---- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/apps/mobile/src/components/Feed/FeedList.tsx b/apps/mobile/src/components/Feed/FeedList.tsx index 57720255d7..5c27b14856 100644 --- a/apps/mobile/src/components/Feed/FeedList.tsx +++ b/apps/mobile/src/components/Feed/FeedList.tsx @@ -58,9 +58,16 @@ export function FeedList({ const { failedEvents, markEventAsFailure } = useFailedEventTracker(); const ref = useRef | null>(null); + const postsWithProfileItemRef = useMemo(() => { + const newPosts = [...posts]; + return newPosts?.splice(7, 0, { + __typename: 'SuggestedProfileRow', + }); + }, [posts]); + const { items } = useMemo(() => { return createVirtualizedFeedEventItems({ - itemRefs: posts, + itemRefs: postsWithProfileItemRef, failedEvents, queryRef: query, feedFilter, diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx index 9d3466582a..79e778b8d7 100644 --- a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -3,6 +3,8 @@ import { View } from 'react-native'; import { useMemo } from 'react'; import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedProfileRowFragment.graphql'; +import { TrendingUserCard } from '~/components/Trending/TrendingUserCard'; +import { Typography } from '../../Typography'; const CARD_HEIGHT = 145; const CARD_WIDTH = 180; @@ -28,7 +30,6 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro __typename } } - ...UserSearchResultFragment ...TrendingUserCardFragment } } @@ -36,6 +37,7 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro } } } + ...TrendingUserCardQueryFragment } `, queryRef @@ -57,7 +59,7 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro }, []); return ( - + {suggestedUsers?.map((user, idx) => { return ( diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index cfdb0e2465..a4200e6b37 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -111,6 +111,7 @@ export type FeedListItemType = { key: string } & ( kind: 'suggested-profile-row'; event: null; post: null; + eventId: string; queryRef: createVirtualizedFeedEventItemsQueryFragment$data; itemType: itemType; } @@ -231,6 +232,8 @@ export function createVirtualizedFeedEventItems({ }) ); + const newerItems = [...newItems]; + const items: FeedListItemType[] = []; if (feedFilter) { @@ -246,6 +249,16 @@ export function createVirtualizedFeedEventItems({ }); } + items.push({ + kind: 'suggested-profile-row', + event: null, + post: null, + queryRef: query, + key: 'suggested-profile-row', + eventId: 'suggested-profile-row', + itemType: null, + }); + const setVirtualizeItemsForPost = (post: createVirtualizedFeedEventItemsPostFragment$data) => { const uniqueKey = Math.random().toString(); @@ -378,23 +391,26 @@ export function createVirtualizedFeedEventItems({ items.push({ kind: 'suggested-profile-row', post: null, + eventId: 'suggested-profile-row', event: null, - key: `feed-suggested-profile-row-${uniqueKey}`, + key: `suggested-profile-row-${uniqueKey}`, queryRef: query, - itemType: 'FeedEvent', + itemType: 'SuggestedProfileRow', }); }; - for (const item of newItems) { + console.log('111111'); + + for (const [index, item] of newerItems.entries()) { + if (index === 7) { + setVirtualizeItemsForSuggestedProfileRow(item); + } if (item.__typename === 'FeedEvent') { setVirtualizeItemsForEvent(item); } if (item.__typename === 'Post') { setVirtualizeItemsForPost(item); } - if (item.__typename === 'SuggestedProfileRow') { - setVirtualizeItemsForSuggestedProfileRow(item); - } } return { items }; From d1697380373b7ddf6710d98d315a55557b0f50bc Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 20:58:06 -0400 Subject: [PATCH 03/12] matches designs --- apps/mobile/src/components/Feed/FeedList.tsx | 9 +----- .../Feed/Posts/FeedSuggestedProfileRow.tsx | 28 ++++++++++++------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/apps/mobile/src/components/Feed/FeedList.tsx b/apps/mobile/src/components/Feed/FeedList.tsx index 5c27b14856..57720255d7 100644 --- a/apps/mobile/src/components/Feed/FeedList.tsx +++ b/apps/mobile/src/components/Feed/FeedList.tsx @@ -58,16 +58,9 @@ export function FeedList({ const { failedEvents, markEventAsFailure } = useFailedEventTracker(); const ref = useRef | null>(null); - const postsWithProfileItemRef = useMemo(() => { - const newPosts = [...posts]; - return newPosts?.splice(7, 0, { - __typename: 'SuggestedProfileRow', - }); - }, [posts]); - const { items } = useMemo(() => { return createVirtualizedFeedEventItems({ - itemRefs: postsWithProfileItemRef, + itemRefs: posts, failedEvents, queryRef: query, feedFilter, diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx index 79e778b8d7..79d2279a0f 100644 --- a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -6,7 +6,7 @@ import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedPr import { TrendingUserCard } from '~/components/Trending/TrendingUserCard'; import { Typography } from '../../Typography'; -const CARD_HEIGHT = 145; +const CARD_HEIGHT = 165; const CARD_WIDTH = 180; type FeedSuggestedProfileRowProps = { @@ -56,17 +56,25 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro return users?.slice(0, 2); } return users; - }, []); + }, [query.viewer?.suggestedUsers]); return ( - - {suggestedUsers?.map((user, idx) => { - return ( - - - - ); - })} + + + Suggested creators and collectors + + + {suggestedUsers?.map((user, idx) => { + return ( + + + + ); + })} + ); } From 161b67f1cdbae9f0b6d5d22fde685bff4d5f09be Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 20:59:47 -0400 Subject: [PATCH 04/12] better --- .../components/Feed/Posts/FeedSuggestedProfileRow.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx index 79d2279a0f..506cad992c 100644 --- a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -7,7 +7,7 @@ import { TrendingUserCard } from '~/components/Trending/TrendingUserCard'; import { Typography } from '../../Typography'; const CARD_HEIGHT = 165; -const CARD_WIDTH = 180; +const CARD_WIDTH = 186; type FeedSuggestedProfileRowProps = { queryRef: FeedSuggestedProfileRowFragment$key; @@ -25,11 +25,6 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro node { __typename ... on GalleryUser { - galleries { - tokenPreviews { - __typename - } - } ...TrendingUserCardFragment } } @@ -59,7 +54,7 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro }, [query.viewer?.suggestedUsers]); return ( - + Date: Thu, 11 Apr 2024 21:39:56 -0400 Subject: [PATCH 05/12] added fallback --- .../components/Feed/FeedVirtualizedRow.tsx | 9 ++- .../Feed/Posts/FeedSuggestedProfileRow.tsx | 17 +++++- .../Feed/createVirtualizedFeedEventItems.ts | 60 ++++++++----------- 3 files changed, 46 insertions(+), 40 deletions(-) diff --git a/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx b/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx index 95e6aaf2ea..54cd481aea 100644 --- a/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx +++ b/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'; @@ -14,6 +14,7 @@ import { PostListItem } from './Posts/PostListItem'; import { PostListMintButtonSection } from './Posts/PostListMintButtonSection'; import { PostListSectionHeader } from './Posts/PostListSectionHeader'; import { FeedSuggestedProfileRow } from './Posts/FeedSuggestedProfileRow'; +import { SearchDefaultCardRowFallback } from '../Search/SearchDefaultFallback'; type Props = { item: FeedListItemType; @@ -66,7 +67,11 @@ export function FeedVirtualizedRow({ onFailure, item }: Props) { case 'post-item-mint-link': return ; case 'suggested-profile-row': - return ; + return ( + }> + + + ); } }, [item]); diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx index 506cad992c..c2977a473e 100644 --- a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -5,6 +5,7 @@ import { useMemo } from 'react'; import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedProfileRowFragment.graphql'; import { TrendingUserCard } from '~/components/Trending/TrendingUserCard'; import { Typography } from '../../Typography'; +import { removeNullValues } from 'shared/relay/removeNullValues'; const CARD_HEIGHT = 165; const CARD_WIDTH = 186; @@ -25,6 +26,11 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro node { __typename ... on GalleryUser { + galleries { + tokenPreviews { + __typename + } + } ...TrendingUserCardFragment } } @@ -48,15 +54,20 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro } } if (users) { - return users?.slice(0, 2); + 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 ( - + Suggested creators and collectors diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index a4200e6b37..993c4d6172 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -232,8 +232,6 @@ export function createVirtualizedFeedEventItems({ }) ); - const newerItems = [...newItems]; - const items: FeedListItemType[] = []; if (feedFilter) { @@ -249,16 +247,6 @@ export function createVirtualizedFeedEventItems({ }); } - items.push({ - kind: 'suggested-profile-row', - event: null, - post: null, - queryRef: query, - key: 'suggested-profile-row', - eventId: 'suggested-profile-row', - itemType: null, - }); - const setVirtualizeItemsForPost = (post: createVirtualizedFeedEventItemsPostFragment$data) => { const uniqueKey = Math.random().toString(); @@ -383,28 +371,7 @@ export function createVirtualizedFeedEventItems({ } }; - const setVirtualizeItemsForSuggestedProfileRow = ( - query: createVirtualizedFeedEventItemsQueryFragment$data - ) => { - const uniqueKey = Math.random().toString(); - - items.push({ - kind: 'suggested-profile-row', - post: null, - eventId: 'suggested-profile-row', - event: null, - key: `suggested-profile-row-${uniqueKey}`, - queryRef: query, - itemType: 'SuggestedProfileRow', - }); - }; - - console.log('111111'); - - for (const [index, item] of newerItems.entries()) { - if (index === 7) { - setVirtualizeItemsForSuggestedProfileRow(item); - } + for (const item of newItems) { if (item.__typename === 'FeedEvent') { setVirtualizeItemsForEvent(item); } @@ -413,5 +380,28 @@ export function createVirtualizedFeedEventItems({ } } - return { items }; + let retItems = []; + let addedRow = false; + let postCount = 0; + for (const item of items) { + if (!addedRow && item.kind === 'post-item-mint-link') { + postCount = postCount + 1; + if (postCount > 2) { + retItems.push({ + kind: 'suggested-profile-row', + event: null, + post: null, + queryRef: query, + key: 'suggested-profile-row', + eventId: 'suggested-profile-row', + itemType: null, + }); + addedRow = true; + } + } else { + retItems.push(item); + } + } + + return { items: retItems }; } From 984c3975687ab6412a546809ee20f35b05d3c409 Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 21:50:08 -0400 Subject: [PATCH 06/12] cleaner --- .../Feed/createVirtualizedFeedEventItems.ts | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index 993c4d6172..9b658c1f62 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -19,9 +19,11 @@ import { } from '~/generated/createVirtualizedFeedEventItemsQueryFragment.graphql'; import { removeNullValues } from '~/shared/relay/removeNullValues'; -export type FeedItemTypes = 'Post' | 'FeedEvent' | 'SuggestedProfileRow'; +export type FeedItemTypes = 'Post' | 'FeedEvent'; type itemType = FeedItemTypes | null; +const SUGGESTED_PROFILE_ROW_IDX = 4; + export type FeedListItemType = { key: string } & ( | { kind: 'feed-item-navigation'; @@ -380,14 +382,15 @@ export function createVirtualizedFeedEventItems({ } } - let retItems = []; - let addedRow = false; let postCount = 0; + const itemsWithSuggestedProfileRow = []; + let inserted = false; // Tracks if the special row has been inserted + for (const item of items) { - if (!addedRow && item.kind === 'post-item-mint-link') { - postCount = postCount + 1; - if (postCount > 2) { - retItems.push({ + if (!inserted && item.kind === 'post-item-mint-link') { + postCount++; + if (postCount === SUGGESTED_PROFILE_ROW_IDX) { + itemsWithSuggestedProfileRow.push({ kind: 'suggested-profile-row', event: null, post: null, @@ -396,12 +399,11 @@ export function createVirtualizedFeedEventItems({ eventId: 'suggested-profile-row', itemType: null, }); - addedRow = true; + inserted = true; } - } else { - retItems.push(item); } + itemsWithSuggestedProfileRow.push(item); } - return { items: retItems }; + return { items: itemsWithSuggestedProfileRow }; } From 68c4b38fab7c344e28a27f52e928e6304fe44f29 Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 21:50:46 -0400 Subject: [PATCH 07/12] minor --- .../src/components/Feed/createVirtualizedFeedEventItems.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index 9b658c1f62..3cb2b4d626 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -384,10 +384,10 @@ export function createVirtualizedFeedEventItems({ let postCount = 0; const itemsWithSuggestedProfileRow = []; - let inserted = false; // Tracks if the special row has been inserted + let insertedRow = false; for (const item of items) { - if (!inserted && item.kind === 'post-item-mint-link') { + if (!insertedRow && item.kind === 'post-item-mint-link') { postCount++; if (postCount === SUGGESTED_PROFILE_ROW_IDX) { itemsWithSuggestedProfileRow.push({ From 6fe183d14f3d79ab5d459527a3e21c71f1a3a388 Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 21:55:51 -0400 Subject: [PATCH 08/12] closer --- .../src/components/Feed/Posts/FeedSuggestedProfileRow.tsx | 2 +- .../src/components/Feed/createVirtualizedFeedEventItems.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx index c2977a473e..804bda1feb 100644 --- a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -20,7 +20,7 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro fragment FeedSuggestedProfileRowFragment on Query { viewer @required(action: THROW) { ... on Viewer { - suggestedUsers(first: 2) @required(action: THROW) { + suggestedUsers(first: 4) @required(action: THROW) { __typename edges { node { diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index 3cb2b4d626..23b906e68b 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -22,7 +22,7 @@ import { removeNullValues } from '~/shared/relay/removeNullValues'; export type FeedItemTypes = 'Post' | 'FeedEvent'; type itemType = FeedItemTypes | null; -const SUGGESTED_PROFILE_ROW_IDX = 4; +const SUGGESTED_PROFILE_ROW_IDX = 5; export type FeedListItemType = { key: string } & ( | { @@ -387,7 +387,7 @@ export function createVirtualizedFeedEventItems({ let insertedRow = false; for (const item of items) { - if (!insertedRow && item.kind === 'post-item-mint-link') { + if (!insertedRow && item.kind === 'post-item-header') { postCount++; if (postCount === SUGGESTED_PROFILE_ROW_IDX) { itemsWithSuggestedProfileRow.push({ @@ -399,7 +399,7 @@ export function createVirtualizedFeedEventItems({ eventId: 'suggested-profile-row', itemType: null, }); - inserted = true; + insertedRow = true; } } itemsWithSuggestedProfileRow.push(item); From bd37f28b41c4ee2e249035a7fac2164afbb0e340 Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 22:01:52 -0400 Subject: [PATCH 09/12] cleanup --- .../mobile/src/components/Feed/FeedVirtualizedRow.tsx | 4 ++-- .../components/Feed/Posts/FeedSuggestedProfileRow.tsx | 11 ++++++----- .../Feed/createVirtualizedFeedEventItems.ts | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx b/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx index 54cd481aea..3c4d4e4066 100644 --- a/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx +++ b/apps/mobile/src/components/Feed/FeedVirtualizedRow.tsx @@ -7,14 +7,14 @@ 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'; import { PostListSectionHeader } from './Posts/PostListSectionHeader'; -import { FeedSuggestedProfileRow } from './Posts/FeedSuggestedProfileRow'; -import { SearchDefaultCardRowFallback } from '../Search/SearchDefaultFallback'; type Props = { item: FeedListItemType; diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx index 804bda1feb..7885bb967f 100644 --- a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -1,13 +1,14 @@ -import { graphql, useFragment } from 'react-relay'; -import { View } from 'react-native'; import { useMemo } from 'react'; +import { View } from 'react-native'; +import { graphql, useFragment } from 'react-relay'; +import { removeNullValues } from 'shared/relay/removeNullValues'; -import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedProfileRowFragment.graphql'; import { TrendingUserCard } from '~/components/Trending/TrendingUserCard'; +import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedProfileRowFragment.graphql'; + import { Typography } from '../../Typography'; -import { removeNullValues } from 'shared/relay/removeNullValues'; -const CARD_HEIGHT = 165; +const CARD_HEIGHT = 180; const CARD_WIDTH = 186; type FeedSuggestedProfileRowProps = { diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index 23b906e68b..4602dd61df 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -398,7 +398,7 @@ export function createVirtualizedFeedEventItems({ key: 'suggested-profile-row', eventId: 'suggested-profile-row', itemType: null, - }); + } as FeedListItemType); insertedRow = true; } } From 89a386397785b325f19872fa88d5c8960d105a78 Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Thu, 11 Apr 2024 22:22:11 -0400 Subject: [PATCH 10/12] finale --- .../src/components/Feed/Posts/FeedSuggestedProfileRow.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx index 7885bb967f..dbe664fcd2 100644 --- a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx +++ b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx @@ -9,7 +9,7 @@ import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedPr import { Typography } from '../../Typography'; const CARD_HEIGHT = 180; -const CARD_WIDTH = 186; +const CARD_WIDTH = 180; type FeedSuggestedProfileRowProps = { queryRef: FeedSuggestedProfileRowFragment$key; @@ -66,9 +66,9 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro }, [query.viewer?.suggestedUsers]); return ( - + Suggested creators and collectors From 83720c87cd2d50a593331fed7bbfbb3d8e61d733 Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Fri, 12 Apr 2024 00:29:04 -0400 Subject: [PATCH 11/12] better --- .../src/components/Feed/createVirtualizedFeedEventItems.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index 4602dd61df..1d01f443dc 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -384,10 +384,9 @@ export function createVirtualizedFeedEventItems({ let postCount = 0; const itemsWithSuggestedProfileRow = []; - let insertedRow = false; for (const item of items) { - if (!insertedRow && item.kind === 'post-item-header') { + if (item.kind === 'post-item-header') { postCount++; if (postCount === SUGGESTED_PROFILE_ROW_IDX) { itemsWithSuggestedProfileRow.push({ @@ -399,7 +398,6 @@ export function createVirtualizedFeedEventItems({ eventId: 'suggested-profile-row', itemType: null, } as FeedListItemType); - insertedRow = true; } } itemsWithSuggestedProfileRow.push(item); From bbd9c01f62cbfacc84d7e2caf9ea0f9b61539243 Mon Sep 17 00:00:00 2001 From: Robinnnnn Date: Fri, 12 Apr 2024 14:29:09 -0400 Subject: [PATCH 12/12] comment --- .../components/Feed/createVirtualizedFeedEventItems.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts index 1d01f443dc..1e66fbbf6e 100644 --- a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts +++ b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts @@ -382,9 +382,15 @@ export function createVirtualizedFeedEventItems({ } } + /** + * insert suggested profiles in between posts. + * + * we need to do it this way as opposed to a simple splice based on + * array length given there are different elements of a post component + * that count towards array item length + */ let postCount = 0; const itemsWithSuggestedProfileRow = []; - for (const item of items) { if (item.kind === 'post-item-header') { postCount++;