Add reactions display component

calblueprint · Apr 21, 2024 · e2dd2a0 · e2dd2a0
1 parent 4e1dd25
commit e2dd2a0
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 42 deletions.
diff --git a/src/app/auth/verify/index.tsx b/src/app/auth/verify/index.tsx
@@ -10,6 +10,7 @@ import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import Toast, { BaseToast, BaseToastProps } from 'react-native-toast-message';
 import { Icon } from 'react-native-elements';
+import { text } from 'cheerio/lib/api/manipulation';
 
 function VerificationScreen() {
   const { user, verifyOtp, resendVerification } = useSession();

diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
@@ -14,6 +14,7 @@ import { fetchAllReactionsToStory } from '../../queries/reactions';
 import { Reactions } from '../../queries/types';
 import globalStyles from '../../styles/globalStyles';
 import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
+import ReactionDisplay from '../ReactionDisplay/ReactionDisplay';
 
 type ContentCardProps = {
   id: number;
@@ -77,23 +78,7 @@ function ContentCard({
             </Text>
           </View>
           <View style={styles.buttons}>
-            <View style={{ flexDirection: 'row', gap: -7 }}>
-              <View style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}>
-                <Emoji name="heart" />
-              </View>
-              <View style={[styles.reactions, { backgroundColor: '#FFD580' }]}>
-                <Emoji name="clap" />
-              </View>
-              <View style={[styles.reactions, { backgroundColor: '#89CFF0' }]}>
-                <Emoji name="muscle" />
-              </View>
-
-              <View style={styles.reactionNumber}>
-                <Text style={[globalStyles.subtext, styles.reactionText]}>
-                  {reactions?.length ?? 0}
-                </Text>
-              </View>
-            </View>
+            <ReactionDisplay reactions={reactions ?? []} />
             <TouchableOpacity>
               <SaveStoryButton storyId={storyId} />
             </TouchableOpacity>

diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
@@ -15,6 +15,7 @@ import { fetchAllReactionsToStory } from '../../queries/reactions';
 import { Reactions } from '../../queries/types';
 import globalStyles from '../../styles/globalStyles';
 import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
+import ReactionDisplay from '../ReactionDisplay/ReactionDisplay';
 
 const placeholderImage =
   'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2021/10/10120952/Girls-Write-Now-logo-avatar.png';
@@ -95,23 +96,7 @@ function PreviewCard({
           </View>
         </View>
         <View style={styles.tagsContainer}>
-          <View style={{ flexDirection: 'row', gap: -7 }}>
-            <View style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}>
-              <Emoji name="heart" />
-            </View>
-            <View style={[styles.reactions, { backgroundColor: '#FFD580' }]}>
-              <Emoji name="clap" />
-            </View>
-            <View style={[styles.reactions, { backgroundColor: '#89CFF0' }]}>
-              <Emoji name="muscle" />
-            </View>
-            {/* heart, clap, muscle, cry, ??? */}
-            <View style={styles.reactionNumber}>
-              <Text style={[globalStyles.subtext, styles.reactionText]}>
-                {reactions?.length ?? 0}
-              </Text>
-            </View>
-          </View>
+          <ReactionDisplay reactions={reactions ?? []} />
           <View style={styles.tagsRow}>
             {(tags?.length ?? 0) > 0 && (
               <View style={styles.tag}>

diff --git a/src/components/ReactionDisplay/ReactionDisplay.tsx b/src/components/ReactionDisplay/ReactionDisplay.tsx
@@ -0,0 +1,60 @@
+import { Text, View } from 'react-native';
+import styles from './styles';
+import Emoji from 'react-native-emoji';
+import globalStyles from '../../styles/globalStyles';
+
+type ReactionDisplayProps = {
+  reactions: string[];
+};
+
+function ReactionDisplay({ reactions }: ReactionDisplayProps) {
+  const reactionColors: Record<string, string> = {
+    heart: '#FFCCCB',
+    clap: '#FFD580',
+    cry: '#89CFF0',
+    hugging_face: '#ffc3bf',
+    muscle: '#eddcf7',
+  };
+  const defaultColor = reactionColors['heart'];
+  const setOfReactions = [...reactions];
+  setOfReactions.push('heart');
+  setOfReactions.push('clap');
+  setOfReactions.push('muscle');
+
+  const reactionDisplay = [...new Set(setOfReactions)].slice(0, 3);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: -7,
+      }}
+    >
+      {reactionDisplay.map(reaction => {
+        return (
+          <View
+            key={reaction}
+            style={[
+              styles.reactions,
+              {
+                backgroundColor:
+                  reaction in reactionColors
+                    ? reactionColors[reaction]
+                    : defaultColor,
+              },
+            ]}
+          >
+            <Emoji name={reaction} />
+          </View>
+        );
+      })}
+      <View style={styles.reactionNumber}>
+        <Text style={[globalStyles.subtext, styles.reactionText]}>
+          {reactions?.length ?? 0}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export default ReactionDisplay;
diff --git a/src/components/ReactionDisplay/styles.tsx b/src/components/ReactionDisplay/styles.tsx
@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import colors from '../../styles/colors';
+
+const styles = StyleSheet.create({
+  reactions: {
+    width: 32,
+    height: 32,
+    borderRadius: 32 / 2,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0', //different per emoji reaction
+    borderColor: 'white',
+    marginTop: 10,
+    marginRight: -5, // -10
+    overflow: 'hidden',
+    justifyContent: 'center',
+    paddingLeft: 4,
+  },
+  reactionText: {
+    color: colors.grey,
+  },
+  reactionNumber: {
+    marginLeft: 16,
+    marginTop: 16,
+  },
+});
+
+export default styles;
diff --git a/src/components/SaveStoryButton/SaveStoryButton.tsx b/src/components/SaveStoryButton/SaveStoryButton.tsx
@@ -11,17 +11,27 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 type SaveStoryButtonProps = {
   storyId: number;
+  defaultState?: boolean | null;
 };
 
 const saveStoryImage = require('../../../assets/save_story.png');
 const savedStoryImage = require('../../../assets/saved_story.png');
 
-export default function SaveStoryButton({ storyId }: SaveStoryButtonProps) {
+export default function SaveStoryButton({
+  storyId,
+  defaultState = null,
+}: SaveStoryButtonProps) {
   const { user } = useSession();
-  const [storyIsSaved, setStoryIsSaved] = useState(false);
+  const [storyIsSaved, setStoryIsSaved] = useState<boolean | null>(
+    defaultState,
+  );
   const { channels, initializeChannel, publish } = usePubSub();
 
   useEffect(() => {
+    if (defaultState != null) {
+      return;
+    }
+
     isStoryInReadingList(storyId, user?.id).then(storyInReadingList => {
       setStoryIsSaved(storyInReadingList);
       initializeChannel(storyId);
@@ -35,12 +45,6 @@ export default function SaveStoryButton({ storyId }: SaveStoryButtonProps) {
     }
   }, [channels[storyId]]);
 
-  useEffect(() => {
-    isStoryInReadingList(storyId, user?.id).then(storyInReadingList =>
-      setStoryIsSaved(storyInReadingList),
-    );
-  }, [storyId]);
-
   const saveStory = async (saved: boolean) => {
     setStoryIsSaved(saved);
     publish(storyId, saved); // update other cards with this story