Merge pull request #100 from GetStream/dj-develop

feat: Added reaction faces to bottom sheet

lib/src/message_actions_bottom_sheet.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';
+import 'package:stream_chat_flutter/src/user_reaction_display.dart';
 
 import '../stream_chat_flutter.dart';
 import 'message_input.dart';
@@ -43,6 +44,14 @@ class MessageActionsBottomSheet extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
+          if (showReactions &&
+              (message.status == MessageSendingStatus.SENT ||
+                  message.status == null) &&
+              message.latestReactions.isNotEmpty)
+            UserReactionDisplay(
+              reactionToEmoji: reactionToEmoji,
+              message: message,
+            ),
           if (showReactions &&
               (message.status == MessageSendingStatus.SENT ||
                   message.status == null))

lib/src/reaction_picker.dart

@@ -31,7 +31,7 @@ class ReactionPicker extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         mainAxisSize: MainAxisSize.min,
         children: reactionToEmoji.keys.map((reactionType) {
-          final ownReactionIndex = message.ownReactions
+          final ownReactionIndex = message.latestReactions
                   ?.indexWhere((reaction) => reaction.type == reactionType) ??
               -1;
           return Column(
@@ -49,7 +49,7 @@ class ReactionPicker extends StatelessWidget {
                 onPressed: () {
                   if (ownReactionIndex != -1) {
                     removeReaction(
-                        context, message.ownReactions[ownReactionIndex]);
+                        context, message.latestReactions[ownReactionIndex]);
                   } else {
                     sendReaction(context, reactionType);
                   }
@@ -59,7 +59,8 @@ class ReactionPicker extends StatelessWidget {
                   ? Padding(
                       padding: const EdgeInsets.only(bottom: 4.0),
                       child: Text(
-                        message.ownReactions[ownReactionIndex].score.toString(),
+                        message.latestReactions[ownReactionIndex].score
+                            .toString(),
                         style: TextStyle(color: Colors.white),
                       ),
                     )

lib/src/user_reaction_display.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/user_avatar.dart';
+
+class UserReactionDisplay extends StatelessWidget {
+  const UserReactionDisplay({
+    Key key,
+    @required this.reactionToEmoji,
+    @required this.message,
+    this.size = 30,
+  }) : super(key: key);
+
+  final Map<String, String> reactionToEmoji;
+  final Message message;
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.black87,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisSize: MainAxisSize.min,
+        children: reactionToEmoji.keys.map((reactionType) {
+          var firstUserReaction = message.latestReactions.firstWhere(
+              (element) => element.type == reactionType, orElse: () {
+            return null;
+          });
+
+          if (firstUserReaction == null) {
+            return IconButton(
+              iconSize: size,
+              icon: Container(),
+              onPressed: null,
+            );
+          }
+
+          return IconButton(
+            iconSize: size,
+            icon: UserAvatar(
+              user: firstUserReaction.user,
+              constraints: BoxConstraints(
+                maxHeight: size - 5,
+                maxWidth: size - 5,
+              ),
+              onTap: (user) {},
+            ),
+            onPressed: () {},
+          );
+        }).toList(),
+      ),
+    );
+  }
+}