Reactions implemented

calblueprint · Apr 22, 2024 · 89a796d · 89a796d
1 parent 3c15f86
commit 89a796d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 35 deletions.
diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
@@ -1,5 +1,3 @@
-import { faHeart as farHeart } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useLocalSearchParams, router } from 'expo-router';
 import React, { useEffect, useState } from 'react';
 import {
@@ -205,7 +203,7 @@ function StoryScreen() {
             <Text style={globalStyles.bodyBoldUnderline}>Back To Top</Text>
           </Button>
           <View style={styles.bottomReactionContainer}>
-            <ReactionPicker />
+            <ReactionPicker storyId={parseInt(storyId as string, 10)} />
           </View>
         </ScrollView>
       )}

diff --git a/src/components/ReactionDisplay/ReactionDisplay.tsx b/src/components/ReactionDisplay/ReactionDisplay.tsx
@@ -8,7 +8,7 @@ type ReactionDisplayProps = {
 };
 
 function ReactionDisplay({ reactions }: ReactionDisplayProps) {
-  const cleanedReactions = reactions.filter(reaction => reaction !== null);
+  const cleanedReactions = reactions.filter(reaction => reaction != null);
   const reactionColors: Record<string, string> = {
     heart: '#FFCCCB',
     clap: '#FFD580',
@@ -32,7 +32,7 @@ function ReactionDisplay({ reactions }: ReactionDisplayProps) {
       }}
     >
       {reactionDisplay.map(reaction => {
-        if (reaction === null) return;
+        if (reaction == null) return;
 
         return (
           <View

diff --git a/src/components/ReactionPicker/ReactionPicker.tsx b/src/components/ReactionPicker/ReactionPicker.tsx
@@ -1,24 +1,28 @@
 import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useState } from 'react';
-import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 
 import styles from './styles';
 import Emoji from 'react-native-emoji';
+import { addReactionToStory } from '../../queries/reactions';
+import { useSession } from '../../utils/AuthContext';
 
-const ReactionPicker = () => {
-  const [showReactions, setShowReactions] = useState(false);
+type ReactionPickerProps = {
+  storyId: number
+}
 
+const ReactionPicker = ({ storyId }: ReactionPickerProps) => {
+  const { user } = useSession();
+  const [showReactions, setShowReactions] = useState(false);
   const toggleReactions = () => setShowReactions(!showReactions);
+  const reactionMapping: Record<string, number> = { "heart": 2, "clap": 3, "muscle": 4, "cry": 5, "hugging_face": 6 };
 
-  // Dummy onPress functions
-  const onClapPress = () => console.log('Smile pressed');
-  const onHeartPress = () => console.log('Heart pressed');
-  const onMusclePress = () => console.log('Thumbs up pressed');
-  const onCryPress = () => console.log('Laugh pressed');
-  const onHuggingFacePress = () => console.log('Laugh pressed');
+  const addReaction = (reactionName: string) => {
+    const reactionId = reactionMapping[reactionName];
+    addReactionToStory(user?.id, storyId, reactionId);
+  }
 
-  // <View style={styles.container}>
   return (
     <TouchableOpacity style={styles.reactionView} onPress={toggleReactions}>
       <View style={styles.reactionsContainer}>
@@ -27,21 +31,12 @@ const ReactionPicker = () => {
         {showReactions && (
           <>
             <View style={{ marginLeft: 12 }} />
-            <TouchableOpacity onPress={onHeartPress}>
-              <Emoji name="heart" />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={onClapPress}>
-              <Emoji name="clap" />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={onMusclePress}>
-              <Emoji name="muscle" />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={onCryPress}>
-              <Emoji name="cry" />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={onHuggingFacePress}>
-              <Emoji name="hugging_face" />
-            </TouchableOpacity>
+            {Object.keys(reactionMapping).map((reaction, i) => (
+              <TouchableOpacity key={i} onPress={() => addReaction(reaction)}>
+                <Emoji name={reaction} />
+              </TouchableOpacity>
+            )
+            )}
           </>
         )}
       </View>

diff --git a/src/queries/reactions.tsx b/src/queries/reactions.tsx
@@ -2,7 +2,7 @@ import { Reactions } from './types';
 import supabase from '../utils/supabase';
 
 export async function addReactionToStory(
-  input_profile_id: number,
+  input_profile_id: string | undefined,
   input_story_id: number,
   input_reaction_id: number,
 ): Promise<void> {
@@ -22,7 +22,7 @@ export async function addReactionToStory(
 }
 
 export async function deleteReactionToStory(
-  input_profile_id: number,
+  input_profile_id: string | undefined,
   input_story_id: number,
   input_reaction_id: number,
 ): Promise<void> {
@@ -43,17 +43,18 @@ export async function deleteReactionToStory(
 
 export async function fetchAllReactionsToStory(
   storyId: number,
-): Promise<Reactions[]> {
+): Promise<string[]> {
   const { data, error } = await supabase.rpc('curr_get_reactions_for_story', {
-    input_story_id: storyId,
+    story_id: storyId,
   });
+
   if (error) {
     console.log(error);
     throw new Error(
       `An error occured when trying to fetch reactions to a story', ${error}`,
     );
   } else {
-    return data as Reactions[];
+    return data;
   }
 }