Flutter: myReactions of a post not updated until reload

General
1

After adding a reaction to a post :

  1. The AmityReactionMap post.reactions reflects the change immediately.
  2. However, the List post.myReactions is not updated until a reload.

Are we doing something wrong? Is it a bug? How to update “myReactions”?

child: ListView.builder(
              controller: scrollController,
              itemCount: amityPosts.length,
              itemBuilder: (context, index) {
                amityPosts[index].react().addReaction("test");
                print(amityPosts[index].reactions);
                print(amityPosts[index].myReactions);

Output

flutter: AmityReactionMap(reactions: {test: 1}) // reactions is updated 
flutter: [] // no update in myReactions

Desired output

flutter: AmityReactionMap(reactions: {test: 1})
flutter: [test]
2

Hello, could you please try this sample code:

post.react().addReaction('like').then((value) => {
       print(amityPosts[index].reactions);
      Future.delayed(Duration(milliseconds: 300), () {
            print(amityPosts[index].myReactions);
       });
});
3

We tried your sample code. It makes no difference. Even with a 5 seconds delay.

It is similar with comments: Adding a comment via
amityPosts[index].comment().create().text("text1").send()
updates latestCommentsIds but not latestComments and commentCount of a post.

comments
comments620×740 74.1 KB

In the screenshot you see 2 latestCommentsIds but only 1 latestComments and commentCount is also 1.

4

@devdieter We have raised a ticket to our engineer to check on this, I will keep you posted on the progress :pray:

1 Like
5

Hello, our team has released the enhancement to handle this issue in Flutter sdk ver 0.12.0, please let us know if you have further questions. Thank you :pray:

6

Hi, we updated to SDK 0.12.0. Unfortunately, we cannot notice any change in the behavior described earlier? MyReactions and latestComments still do not update immediately.

7

Hello @devdieter ,

you can use stream builder to listen to the updated in Amity Post object. so when ever there is any update, you will get an event with latest amity post object with update my reaction and latest comments.

StreamBuilder<AmityPost>(
      stream: amityPost.listen.stream,
      initialData: amityPost,
      builder: (context, snapshot) {
        /// Snapshot will always updated object
        final value = snapshot.data;
      },
    )

Another Approach we added in SDK 0.12.0, in case you dont want to use Streambuilder or have nested widgets, future return from the addReaction will always have latest Amity Post Object with my reaction and reactions.

amityPost.react().removeReaction('like').then((value) {
                    print(value.myReactions);
                  });
1 Like
8

Great, thanks for the explanation!

9

Currently facing a similar issue. Any advice on how to implement your fixes with our app? I gave it a shot on my own but it doesn’t appear to be helping. The myReactions remaining empty is preventing us from letting the users reaction persist through reload. Reactions work as expected until reload where the reaction button returns to its default state. The total count for the reactions persists but the fact that the user reacted to that post does not.

Relevant snippet from useCommentReaction
const userHasReacted =
isCommentReady && comment.myReactions && comment.myReactions.length > 0 // check for reactions
console.log(comment.myReactions);
const handleToggleReaction = (reactionKey) => {
if (!userHasReacted) {
CommentRepository.addReaction({ commentId, reactionName: reactionKey });
onReactionSuccess && onReactionSuccess(commentId);
} else {
let removeReactionKey = comment.myReactions[0]
CommentRepository.removeReaction({ commentId, reactionName: removeReactionKey });
onReactionRemove && onReactionRemove(commentId);
}
};

Relevant snippet from Comment.js
const { handleToggleReaction, isActive, disabled, totalReactions } = useCommentReaction({ commentId, postId: post.postId })
const [selectedReaction, setSelectedReaction] = React.useState(null);
const [anchorEl, setAnchorEl] = React.useState(null); // for reaction menu
const handleClick = (event) => {
if (selectedReaction) {
handleToggleReaction(selectedReaction.toLowerCase());
setSelectedReaction(null);
} else {
setAnchorEl(event.currentTarget);
}
};
{/* unrelated code /}
{/ Reaction Button /}
{totalReactions > 0 &&

{totalReactions}

<Button
sx={{
color: selectedReaction ? “white” : “black”,
backgroundColor: selectedReaction ? “blue” : “transparent”,
‘&:hover’: {
backgroundColor: selectedReaction ? “darkblue” : “lightgray”,
}
}}
style={{ textTransform: “none” }}
variant=“text”
size=“small”
onClick={handleClick}

{selectedReaction || ‘React’}
{/ Show total reaction count next to react button */}

Any help is appreciated and thank you in advance!

10

Hello @JamesBuret , may I know your platform and SDK version please?

11

Hi @amitysupport I am facing the same issue. My usecase is, I am creating a post, after creation I am listening to the post (first post from community) for comments using below code:

StreamBuilder(
stream: posts!.first.listen.stream,
initialData: posts.first,
builder: (context, snapshot) {
/// Snapshot will always updated object
AmityPost? value = snapshot.data;
return value != null
? SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
(value.data as TextData).text!,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 16),
),
),
Divider(
color: Colors.grey,
),
SizedBox(height: 12.0),
…value.latestComments
?.map((e) => Padding(
padding: const EdgeInsets.only(
left: 16.0,
right: 16.0,
bottom: 12.0),
child: Text(
(e.data as TextData).text!,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14),
),
))
.toList() ??
[SizedBox.shrink()],
],
),
)
: SizedBox.shrink();

My issue is when I am adding any comment to this post, from different device, this Streambuilder is not getting updated.
Please help.

12

Hi @amitysupport any update on above issue??

13

Hello, based on our team’s assessment, this behaviour is considered normal for comments on Flutter. While it is possible to implement interval fetching, but we do not recommend it.