From 2a62682344f4f4c7b7073c9bc1b114eefe392f15 Mon Sep 17 00:00:00 2001
From: Vini Andrade <vini.andrade.dev@gmail.com>
Date: Mon, 27 Jul 2020 21:56:05 +0200
Subject: [PATCH] Only render <SimpleReactionList /> if there are reactions

---
 src/components/Reactions/SimpleReactionsList.js            | 4 ++++
 .../Reactions/__tests__/SimpleReactionsList.test.js        | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/src/components/Reactions/SimpleReactionsList.js b/src/components/Reactions/SimpleReactionsList.js
index f30572c6d..2d7f4bff2 100644
--- a/src/components/Reactions/SimpleReactionsList.js
+++ b/src/components/Reactions/SimpleReactionsList.js
@@ -14,6 +14,10 @@ const SimpleReactionsList = ({
 }) => {
   const [tooltipReactionType, setTooltipReactionType] = useState(null);
 
+  if (!reactions || reactions.length === 0) {
+    return null;
+  }
+
   /** @param {string | null} type */
   const getUsersPerReactionType = (type) =>
     reactions
diff --git a/src/components/Reactions/__tests__/SimpleReactionsList.test.js b/src/components/Reactions/__tests__/SimpleReactionsList.test.js
index ec670ec0e..a00f21be8 100644
--- a/src/components/Reactions/__tests__/SimpleReactionsList.test.js
+++ b/src/components/Reactions/__tests__/SimpleReactionsList.test.js
@@ -48,6 +48,13 @@ const expectEmojiToHaveBeenRendered = (id) => {
 describe('SimpleReactionsList', () => {
   afterEach(jest.clearAllMocks);
 
+  it('should not render anything if there are no reactions', () => {
+    const { container } = renderComponent({
+      reaction_counts: {},
+    });
+    expect(container).toBeEmptyDOMElement();
+  });
+
   it('should render the total reaction count', () => {
     const { getByText } = renderComponent({
       reaction_counts: {