Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: use queryReactions to fetch and show reactions in OverlayReactions. #2532

Merged
merged 15 commits into from
Jun 10, 2024

Conversation

khushal87
Copy link
Member

🎯 Goal

This PR focuses on using the client.queryReactions API to show reactions in the OverlayReactions instead of what was used before(message.latest_reactions). Optimistic fetching of reactions from local DB is present and is also handled in the PR.

Note: The reactions type could have been ReactionsResponse and that would make the code much cleaner but sadly that would be a breaking change so the response from the API is mapped to the existing Reaction type.

Also, this PR is to be reviewed and merged once #2523 is merged.

🛠 Implementation details

🎨 UI Changes

iOS
Before After
Android
Before After

🧪 Testing

☑️ Checklist

  • I have signed the Stream CLA (required)
  • PR targets the develop branch
  • Documentation is updated
  • New code is tested in main example apps, including all possible scenarios
    • SampleApp iOS and Android
    • Expo iOS and Android

@@ -63,33 +63,6 @@ export const addReactionToLocalState = <
message.reaction_groups[currentReaction.type].sum_scores - 1;
}

if (!message.reaction_groups) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was repetitive code, hence removed.

reactions: fetchedReactions,
} = useFetchReactions({
messageId,
sort: { created_at: -1 },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
sort: { created_at: -1 },
sort: { created_at: -1 },

I think we should move this to a const outside, so that inside the hook useMEmo stringify does not trigger again and again..

its a simple optimisation

Comment on lines 120 to 128
const reactions =
propReactions ||
(fetchedReactions.map((reaction) => ({
alignment: 'left',
id: reaction.user?.id,
image: reaction.user?.image,
name: reaction.user?.name,
type: reaction.type,
})) as Reaction[]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should useMemo this I think.. so that we dont map unnecessarily if the fetched reactions are the same

@khushal87 khushal87 merged commit d7c8243 into develop Jun 10, 2024
6 checks passed
@khushal87 khushal87 deleted the query-reactions branch June 10, 2024 10:17
@github-actions github-actions bot mentioned this pull request Jun 17, 2024
6 tasks
@stream-ci-bot
Copy link
Contributor

🎉 This PR is included in version 5.32.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants