add SuggestedUser card row in mobile feed #2417
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Bundle SizesCompared against a0a7efb Route: No significant changes found Dynamic import: No significant changes found |
| let postCount = 0; | ||
| const itemsWithSuggestedProfileRow = []; | ||
| let insertedRow = false; | ||
|
|
||
| for (const item of items) { | ||
| if (!insertedRow && 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); | ||
| insertedRow = true; | ||
| } | ||
| } | ||
| itemsWithSuggestedProfileRow.push(item); | ||
| } |
There was a problem hiding this comment.
- could we add an explainer / comment block for what's going on here?
- do we need to mark
insertedRowastrue? i assumepostCount === SUGGESTED_PROFILE_ROW_IDXwould only be true a single time anyway?
overall i'm wondering if there could be a simpler way to do this without the loop, like:
const itemsWithSuggestedProfileRow = [
...items.slice(0, 8),
{ kind: 'suggested-profile-row', /* rest of the object */ }
...items.slice(8)
]There was a problem hiding this comment.
yo @Robinnnnn, you're right we don't need the insertedRow variable, removed that now.
Regarding using the splice, I think we can't use the hardcoded value for the index because the items of the list are feed-post-header, feed-post-socialize-section, etc (basically subsections of a single post in the feed for all the posts) so we want to add the row only when it is before a feed-post-header
Or it might end up after a post and before its mint button for example.
Summary of Changes
Adds a new suggested profile section in the Feed, that shows up
4feed items down the list.Demo
Screen.Recording.2024-04-11.at.22.14.00.mov
Edge Cases
light mode
Testing Steps
Provide steps on how the reviewer can test the changes.
Checklist
Please make sure to review and check all of the following: