Merge pull request #1816 from RocketChat/fix-reaction-counter-not-showing

[FIX] Reactions counter not showing

app/src/main/java/chat/rocket/android/chatroom/adapter/BaseViewHolder.kt

@@ -18,7 +18,9 @@ import chat.rocket.android.util.extensions.toList
 import chat.rocket.core.model.Message
 import chat.rocket.core.model.isSystemMessage
 import com.google.android.flexbox.FlexDirection
+import com.google.android.flexbox.FlexWrap
 import com.google.android.flexbox.FlexboxLayoutManager
+import com.google.android.flexbox.JustifyContent
 
 abstract class BaseViewHolder<T : BaseUiModel<*>>(
     itemView: View,
@@ -41,13 +43,12 @@ abstract class BaseViewHolder<T : BaseUiModel<*>>(
     private fun bindReactions() {
         data?.let {
             val recyclerView = itemView.findViewById(R.id.recycler_view_reactions) as RecyclerView
-            val adapter: MessageReactionsAdapter
-            if (recyclerView.adapter == null) {
-                adapter = MessageReactionsAdapter()
+            val adapter: MessageReactionsAdapter = if (recyclerView.adapter == null) {
+                MessageReactionsAdapter()
             } else {
-                adapter = recyclerView.adapter as MessageReactionsAdapter
-                adapter.clear()
+                recyclerView.adapter as MessageReactionsAdapter
             }
+            adapter.clear()
 
             if (it.nextDownStreamMessage == null) {
                 adapter.listener = object : EmojiReactionListener {
@@ -61,13 +62,16 @@ abstract class BaseViewHolder<T : BaseUiModel<*>>(
                         }
                     }
                 }
+
                 val context = itemView.context
                 val manager = FlexboxLayoutManager(context, FlexDirection.ROW)
+                manager.justifyContent = JustifyContent.FLEX_START
                 recyclerView.layoutManager = manager
                 recyclerView.adapter = adapter
-                adapter.addReactions(it.reactions.filterNot { reactionUiModel ->
-                    reactionUiModel.unicode.startsWith(":") && reactionUiModel.url.isNullOrEmpty()
-                })
+
+                if (it.reactions.isNotEmpty()) {
+                    itemView.post { adapter.addReactions(it.reactions) }
+                }
             }
         }
     }
@@ -129,4 +133,4 @@ abstract class BaseViewHolder<T : BaseUiModel<*>>(
         }
         return true
     }
-}
\ No newline at end of file
+}

app/src/main/java/chat/rocket/android/chatroom/adapter/MessageReactionsAdapter.kt

@@ -4,7 +4,6 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
-import android.widget.TextView
 import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import chat.rocket.android.R
@@ -35,17 +34,17 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
             }
             else -> {
                 view = inflater.inflate(R.layout.item_reaction, parent, false)
-                SingleReactionViewHolder(view, listener)
+                ReactionViewHolder(view, listener)
             }
         }
     }
 
     override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
-        if (holder is SingleReactionViewHolder) {
+        if (holder is ReactionViewHolder) {
             holder.bind(reactions[position])
         } else {
             holder as AddReactionViewHolder
-            holder.bind(reactions[0].messageId)
+            holder.bind(reactions.first().messageId)
         }
     }
 
@@ -73,7 +72,7 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
     fun contains(reactionShortname: String) =
         reactions.firstOrNull { it.shortname == reactionShortname } != null
 
-    class SingleReactionViewHolder(
+    class ReactionViewHolder(
         view: View,
         private val listener: EmojiReactionListener?
     ) : RecyclerView.ViewHolder(view), View.OnClickListener {
@@ -97,9 +96,11 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
             this.reaction = reaction
             with(itemView) {
                 if (reaction.url.isNullOrEmpty()) {
-                    text_emoji.text = reaction.unicode
+                    // The view at index 0 corresponds to the one to display unicode text emoji.
                     view_flipper_reaction.displayedChild = 0
+                    text_emoji.text = reaction.unicode
                 } else {
+                    // The view at index 1 corresponds to the one to display custom emojis which are images.
                     view_flipper_reaction.displayedChild = 1
                     val glideRequest = if (reaction.url!!.endsWith("gif", true)) {
                         GlideApp.with(context).asGif()
@@ -110,15 +111,16 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
                     glideRequest.load(reaction.url).into(image_emoji)
                 }
 
-                text_count.text = reaction.count.toString()
                 val myself = localRepository.get(LocalRepository.CURRENT_USERNAME_KEY)
                 if (reaction.usernames.contains(myself)) {
                     val context = itemView.context
                     text_count.setTextColor(ContextCompat.getColor(context, R.color.colorAccent))
                 }
 
-                view_flipper_reaction.setOnClickListener(this@SingleReactionViewHolder)
-                text_count.setOnClickListener(this@SingleReactionViewHolder)
+                text_count.text = reaction.count.toString()
+
+                view_flipper_reaction.setOnClickListener(this@ReactionViewHolder)
+                text_count.setOnClickListener(this@ReactionViewHolder)
             }
         }
 

app/src/main/java/chat/rocket/android/dagger/LocalComponent.kt

@@ -19,7 +19,7 @@ interface LocalComponent {
         fun build(): LocalComponent
     }
 
-    fun inject(adapter: MessageReactionsAdapter.SingleReactionViewHolder)
+    fun inject(adapter: MessageReactionsAdapter.ReactionViewHolder)
     fun inject(adapter: MessageReactionsAdapter.AddReactionViewHolder)
 
     /*@Component.Builder

app/src/main/java/chat/rocket/android/db/MessageDao.kt

@@ -40,7 +40,7 @@ abstract class  MessageDao {
     @Insert(onConflict = OnConflictStrategy.REPLACE)
     abstract fun insert(field: AttachmentFieldEntity)
 
-    @Insert(onConflict = OnConflictStrategy.IGNORE)
+    @Insert(onConflict = OnConflictStrategy.REPLACE)
     abstract fun insert(reaction: ReactionEntity)
 
     @Insert(onConflict = OnConflictStrategy.REPLACE)

app/src/main/res/layout/item_reaction.xml

 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
+    android:orientation="horizontal"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginEnd="2dp"
@@ -10,7 +11,7 @@
     <ViewFlipper
         android:id="@+id/view_flipper_reaction"
         android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+        android:layout_height="match_parent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@+id/text_count"
         app:layout_constraintStart_toStartOf="parent"
@@ -19,12 +20,13 @@
         <TextView
             android:id="@+id/text_emoji"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
+            android:layout_height="match_parent"
             android:ellipsize="end"
+            android:gravity="center"
             android:maxLines="1"
             android:paddingStart="4dp"
             android:paddingLeft="4dp"
-            android:textColor="#868585"
+            android:textColor="@color/reaction_text"
             android:textSize="16sp"
             tools:text=":)" />
 
@@ -48,13 +50,12 @@
         android:paddingEnd="4dp"
         android:paddingRight="4dp"
         android:paddingBottom="4dp"
-        android:textColor="#868585"
+        android:textColor="@color/reaction_text"
         android:textSize="16sp"
         android:textStyle="bold"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toEndOf="@+id/view_flipper_reaction"
         app:layout_constraintTop_toTopOf="parent"
         tools:text="12" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+</LinearLayout>

app/src/main/res/layout/layout_reactions.xml

@@ -2,4 +2,4 @@
 <androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/recycler_view_reactions"
     android:layout_width="wrap_content"
-    android:layout_height="wrap_content" />
\ No newline at end of file
+    android:layout_height="wrap_content" />

app/src/main/res/values/colors.xml

@@ -59,4 +59,6 @@
 
     <!-- Default Background Color -->
     <color name="default_background">#FAFAFA</color>
+
+    <color name="reaction_text">#868585</color>
 </resources>

dependencies.gradle

@@ -25,7 +25,7 @@ ext {
             firebaseAnalytics     : '16.0.3',
             playServices          : '16.0.0',
             exoPlayer             : '2.8.2',
-            flexbox               : '1.0.0',
+            flexbox               : '1.1.0',
             material              : '1.0.0-beta01',
 
             room                  : '2.0.0',