reactions added to the PreviewCard and ContentCard

src/app/(tabs)/home/index.tsx

@@ -95,6 +95,7 @@ function HomeScreen() {
             <View style={{ marginRight: 24 }}>
               {featuredStories.map(story => (
                 <PreviewCard
+                  id={story.id}
                   key={story.id}
                   storyId={story.id}
                   title={story.title}

src/components/ContentCard/ContentCard.tsx

@@ -1,15 +1,18 @@
+import { Image } from 'expo-image';
+import { useEffect, useState } from 'react';
 import {
   GestureResponderEvent,
   Pressable,
   Text,
   View,
   TouchableOpacity,
 } from 'react-native';
-import { Image } from 'expo-image';
+import Emoji from 'react-native-emoji';
 
 import styles from './styles';
+import { fetchAllReactionsToStory } from '../../queries/reactions';
+import { Reactions } from '../../queries/types';
 import globalStyles from '../../styles/globalStyles';
-import Emoji from 'react-native-emoji';
 import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 type ContentCardProps = {
@@ -31,6 +34,19 @@ function ContentCard({
   storyId,
   pressFunction,
 }: ContentCardProps) {
+  const [reactions, setReactions] = useState<Reactions[]>();
+
+  useEffect(() => {
+    (async () => {
+      const temp = await fetchAllReactionsToStory(id);
+      if (temp != null) {
+        setReactions(temp);
+        return;
+      }
+      setReactions([]);
+    })();
+  });
+
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.contentCard}>
@@ -73,7 +89,7 @@ function ContentCard({
               {/* heart, clap, muscle, cry, ??? */}
               <View style={styles.reactionNumber}>
                 <Text style={[globalStyles.subtext, styles.reactionText]}>
-                  14{/*change number to work*/}
+                  {reactions?.length}
                 </Text>
               </View>
             </View>

src/components/PreviewCard/PreviewCard.tsx

@@ -1,4 +1,5 @@
 import * as cheerio from 'cheerio';
+import { Image } from 'expo-image';
 import {
   GestureResponderEvent,
   Pressable,
@@ -7,16 +8,19 @@ import {
   View,
 } from 'react-native';
 import Emoji from 'react-native-emoji';
-import { Image } from 'expo-image';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
 import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
+import { useEffect, useState } from 'react';
+import { fetchAllReactionsToStory } from '../../queries/reactions';
+import { Reactions } from '../../queries/types';
 
 const placeholderImage =
   'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2021/10/10120952/Girls-Write-Now-logo-avatar.png';
 
 type PreviewCardProps = {
+  id: number;
   title: string;
   image: string;
   storyId: number;
@@ -28,6 +32,7 @@ type PreviewCardProps = {
 };
 
 function PreviewCard({
+  id,
   title,
   image,
   storyId,
@@ -37,6 +42,18 @@ function PreviewCard({
   tags,
   pressFunction,
 }: PreviewCardProps) {
+  const [reactions, setReactions] = useState<Reactions[]>();
+  useEffect(() => {
+    (async () => {
+      const temp = await fetchAllReactionsToStory(id);
+      if (temp != null) {
+        setReactions(temp);
+        return;
+      }
+      setReactions([]);
+    })();
+  });
+
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
@@ -85,7 +102,7 @@ function PreviewCard({
             {/* heart, clap, muscle, cry, ??? */}
             <View style={styles.reactionNumber}>
               <Text style={[globalStyles.subtext, styles.reactionText]}>
-                14{/*change number to work*/}
+                {reactions?.length}
               </Text>
             </View>
           </View>

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "module": "esnext",
     "strict": true,
     "jsx": "react-jsx"
   }