[native] Add drawer utils for flattening items structure
ClosedPublic
Actions

Authored by inka on Jun 6 2023, 8:03 AM.

Details

Reviewers

tomek
• kuba
kamil

Commits

rCOMM78feba2a4c7c: [native] Add drawer utils for flattening items structure

Summary

issue: https://linear.app/comm/issue/ENG-3412/fix-nested-flatlist-in-navigation-community-drawer
Currently the community drawer on native consists of nested FlatLists. This is bad for performance, we want to have a single FlatList. For this reason the recursive structure of type
CommunityDrawerItemData has to be "flattened" - every item has to end up in to top level array, that will be passed to the single FlatList.

CommunityDrawerItemDataFlattened is CommunityDrawerItemData with the following changes:

itemChildren was removed, because we are making the data structure flat, so we are moving nested children too the top level
isCommunity was added, to know which items are community items to be able to create proper components for them (they take different props)
hasChildren was added to be able to render the expand button properly (before we checked itemChildren.length)
itemStyle was added, because now that the items are not nested in each other an item needs to know its indentation and background

The background prop is not read only, because we need the last visible chat in the open community to know it's the last, and get background: 'end'. The best way to do this is to create
all items, and then look at the last item of the array and change its prop. This is the same approach as we use to determine which chat bubble endsCluster.

Test Plan

Checked for random chats that all their children are visible and their styles are correct

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

inka created this revision.Jun 6 2023, 8:03 AM

Herald added a subscriber: ashoat. · View Herald TranscriptJun 6 2023, 8:03 AM

inka retitled this revision from [native] Add drawer utils for flatteninng items structure to [native] Add drawer utils for flattening items structure.Jun 6 2023, 8:04 AM

inka edited the summary of this revision. (Show Details)

inka added a child revision: D8105: [native] Add functions to filter thread descendants in community drawer.Jun 6 2023, 8:16 AM

Harbormaster completed remote builds in B20039: Diff 27462.Jun 6 2023, 8:21 AM

inka requested review of this revision.Jun 6 2023, 8:21 AM

ashoat added inline comments.Jun 6 2023, 8:56 AM

native/utils/drawer-utils.react.js
16 ↗	(On Diff #27462)	Why isn't this one read-only?

tomek accepted this revision.Jun 7 2023, 3:40 AM

tomek added inline comments.

native/utils/drawer-utils.react.js
12 ↗	(On Diff #27462)	This is a little redundant, as we can check e.g. `threadTypeIsCommunityRoot(threadInfo.type)`or `threadInfo.threadID === threadInfo.parentThreadID` or something similar
16 ↗	(On Diff #27462)	It was explained in the summary The background prop is not read only, because we need the last visible chat in the open community to know it's the last, and get background: 'end'. The best way to do this is to create all items, and then look at the last item of the array and change its prop. This is the same approach as we use to determine which chat bubble endsCluster. But we can make this readonly while keeping the proposed approach. The solution is to replace results[results.length - 1].itemStyle.background = 'end'; with results[results.length - 1] = { ...results[results.length - 1], itemStyle: { ...results[results.length - 1].itemStyle, background: 'end', } };