From a3f35300aa767432a06c03be7ace46cd1f981611 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com>
Date: Mon, 22 Apr 2024 12:24:36 -0700
Subject: [PATCH] Fix reactions (TY JUSTIN) (#94)

* Fix reactions (TY JUSTIN)

* Remove logs
---
 src/components/ReactionDisplay/ReactionDisplay.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ReactionDisplay/ReactionDisplay.tsx b/src/components/ReactionDisplay/ReactionDisplay.tsx
index 0bfb097..6b70eb1 100644
--- a/src/components/ReactionDisplay/ReactionDisplay.tsx
+++ b/src/components/ReactionDisplay/ReactionDisplay.tsx
@@ -4,10 +4,11 @@ import Emoji from 'react-native-emoji';
 import globalStyles from '../../styles/globalStyles';
 
 type ReactionDisplayProps = {
-  reactions: string[];
+  reactions: (string | null)[];
 };
 
 function ReactionDisplay({ reactions }: ReactionDisplayProps) {
+  const cleanedReactions = reactions.filter(reaction => reaction !== null);
   const reactionColors: Record<string, string> = {
     heart: '#FFCCCB',
     clap: '#FFD580',
@@ -16,7 +17,7 @@ function ReactionDisplay({ reactions }: ReactionDisplayProps) {
     muscle: '#eddcf7',
   };
   const defaultColor = reactionColors['heart'];
-  const setOfReactions = [...reactions];
+  const setOfReactions = [...cleanedReactions];
   setOfReactions.push('heart');
   setOfReactions.push('clap');
   setOfReactions.push('muscle');
@@ -31,6 +32,8 @@ function ReactionDisplay({ reactions }: ReactionDisplayProps) {
       }}
     >
       {reactionDisplay.map(reaction => {
+        if (reaction === null) return;
+
         return (
           <View
             key={reaction}
@@ -50,7 +53,7 @@ function ReactionDisplay({ reactions }: ReactionDisplayProps) {
       })}
       <View style={styles.reactionNumber}>
         <Text style={[globalStyles.subtext, styles.reactionText]}>
-          {reactions?.length ?? 0}
+          {cleanedReactions?.length ?? 0}
         </Text>
       </View>
     </View>