I'm working on making nested comments that have collapsible replies. To do this I simply render all comments in a flatlist in the order that I receive them and then add a margin to the left based on the level attribute that each item has. The incoming comment data is as follows.
{
id: "1a",
parent: "a",
author: "joemorgan",
body: "Such an amazing car, had seen this one in Paris earlier!",
level: 0,
replies: ["4w", "2f"]
},
{
id: "4w",
parent: "1a",
author: "jason",
body: "Truly a beast",
level: 1,
replies: []
},
{
id: "2f",
parent: "1a",
author: "katparis",
body: "Rightly said",
level: 1,
replies: []
},
I then render these comments using the following flatlist
<FlatList
data={SAMPLE_COMMENTS}
keyExtractor={item=>item.id.toString()}
renderItem={Comment body={item.body} level={item.level} commentId={item.id} commentChildren={item.replies} />}
/>
Finally, I have wrapped the actual comment component in a Collapsible (react-native-collapsible package). This way I can collapse the specific comment by tapping on it. The 'collapsed' prop is set using isCollapsed state.
const [isCollapsed, setIsCollapsed] = useState(false);
<Collapsible collapsed={isCollapsed}>
<TouchableWithoutFeedback onPress={()=> setIsCollapsed(true) }>
<View style={styles.container}>
</View>
</TouchableWithoutFeedback>
</Collapsible>
With the above code, I can collapse each individual comment by tapping on it.
The problem is I don't want to collapse the comment I'm pressing on. I want to collapse its children, to do that I really want to know how I can manipulate the isCollapsed state for the children of a parent comment without affecting the said parent comment. Since every comment has a unique id, I believe it could possibly be done using it perhaps? The children of every comment is also an attribute so maybe that could help as well.
Any leads would be very helpful. Thanks
You apparently do have a property commentChildren, but I can't see what it contains. Can't you use that property to collapse all comment children ?
Anyway, if not:
The logic to decide which item-components should be collapsed needs to be outside of the item-components, and the item-components would just have their own state and a callback to inform that controller logic, like "I was clicked, my ID is xyz". The controller would then know what to do.
Like:
const childsOfComment = findChildCommentsRecursively( allComments, clickedComment );
...
<Comment
commentId={ item.id }
isCollapsed={ childsOfComment.includes( item.id ) }
/>
Maybe even better would be to maintain the whole list including the information about what to collapse in the state, and have the render function just render that state.
{
id: "1a",
collapsed: true, // <-- store collapsed info in state
parent: "a",
...
},
This might need some refactoring though, and might be more complicated, depending on if you need to maintain the original list as well.