[home] Update content card

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

@@ -6,7 +6,6 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import BackButton from '../../../components/BackButton/BackButton';
-import ContentCard from '../../../components/ContentCard/ContentCard';
 import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import {

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

@@ -43,6 +43,7 @@ function HomeScreen() {
         fetchRecommendedStories().catch(() => []),
         fetchNewStories().catch(() => []),
       ]);
+
       setUsername(usernameResponse);
       setFeaturedStories(featuredStoryResponse);
       setFeaturedStoriesDescription(featuredStoryDescriptionResponse);
@@ -115,13 +116,14 @@ function HomeScreen() {
               horizontal
               showsHorizontalScrollIndicator={false}
               bounces={false}
-              style={styles.scrollView}
+              style={styles.scrollView1}
             >
               {recommendedStories.map(story => (
                 <ContentCard
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
+                  authorImage={story.author_image}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',
@@ -143,13 +145,14 @@ function HomeScreen() {
               horizontal
               showsHorizontalScrollIndicator={false}
               bounces={false}
-              style={styles.scrollView}
+              style={styles.scrollView2}
             >
               {newStories.map(story => (
                 <ContentCard
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
+                  authorImage={story.author_image}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',

src/app/(tabs)/home/styles.ts

@@ -19,9 +19,15 @@ const styles = StyleSheet.create({
     marginTop: 12,
     marginBottom: 16,
   },
-  scrollView: {
-    marginBottom: 20,
+  scrollView1: {
+    paddingBottom: 16,
     flexGrow: 0,
+    padding: 8,
+  },
+  scrollView2: {
+    paddingBottom: 80,
+    flexGrow: 0,
+    padding: 8,
   },
   headerContainer: {
     flexDirection: 'row',

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

@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { SearchBar } from '@rneui/themed';
 import { router } from 'expo-router';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import {
   Button,
   FlatList,
@@ -286,7 +286,7 @@ function SearchScreen() {
             contentContainerStyle={{ paddingHorizontal: 8 }}
           >
             {allGenres.map((genre, index) => (
-              <>
+              <Fragment key={index}>
                 <View style={styles.genreText}>
                   <Text style={styles.parentName}>{genre.parent_name}</Text>
                   <Text style={styles.seeAll}>See All</Text>
@@ -299,13 +299,14 @@ function SearchScreen() {
                 >
                   {genre.subgenres.map(subgenre => (
                     <GenreCard
+                      key={subgenre.id}
                       subgenres={subgenre.name}
                       cardColor={getColor(index)}
                       pressFunction={() => null}
                     />
                   ))}
                 </ScrollView>
-              </>
+              </Fragment>
             ))}
           </ScrollView>
         ) : (

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

@@ -74,9 +74,8 @@ function StoryScreen() {
           ref={scrollRef}
           showsVerticalScrollIndicator={false}
         >
-          {/* <Image style={styles.image} source={{ uri: story.featured_media }} /> */}
-
           <Text style={[globalStyles.h1, styles.title]}>{story?.title}</Text>
+
           <TouchableOpacity
             onPress={() => {
               router.push({

src/app/(tabs)/story/styles.ts

@@ -11,11 +11,6 @@ const styles = StyleSheet.create({
     paddingRight: 24,
     paddingTop: 48,
   },
-  image: {
-    width: '100%',
-    height: 153,
-    marginBottom: 16,
-  },
   authorImage: {
     backgroundColor: '#D9D9D9',
     width: 21,

src/components/ContentCard/ContentCard.tsx

@@ -4,6 +4,7 @@ import {
   Pressable,
   Text,
   View,
+  TouchableOpacity,
 } from 'react-native';
 
 import styles from './styles';
@@ -13,26 +14,81 @@ type ContentCardProps = {
   title: string;
   author: string;
   image: string;
+  authorImage: string;
   pressFunction: (event: GestureResponderEvent) => void;
 };
 
 function ContentCard({
   title,
   author,
   image,
+  authorImage,
   pressFunction,
 }: ContentCardProps) {
+  const saveStory = () => {
+    console.log("testing '+' icon does something for story " + title);
+  };
+
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.contentCard}>
-        <Image style={styles.image} source={{ uri: image }} />
+        <View style={{ flexDirection: 'row' }}>
+          <Image style={styles.image} source={{ uri: image }} />
+          <Image
+            style={styles.authors}
+            source={{
+              uri: authorImage,
+            }}
+          />
+        </View>
+
         <View style={styles.textContainer}>
-          <Text style={[globalStyles.h3, styles.title]} numberOfLines={1}>
+          <Text
+            style={[globalStyles.subHeading2, styles.title]}
+            numberOfLines={1}
+          >
             {title}
           </Text>
-          <Text style={globalStyles.body1} numberOfLines={1}>
-            {author}
-          </Text>
+          <View style={styles.authorSpacing}>
+            <Text style={styles.by} numberOfLines={1}>
+              By
+            </Text>
+            <Text style={globalStyles.subtext} numberOfLines={1}>
+              {author}
+            </Text>
+          </View>
+          <View style={styles.buttons}>
+            <View>
+              <TouchableOpacity
+                onPress={() => null}
+                style={{ flexDirection: 'row' }}
+              >
+                <Image
+                  style={styles.reactions}
+                  source={require('./savedStoriesIcon.png')}
+                />
+                <Image
+                  style={styles.reactions}
+                  source={require('./savedStoriesIcon.png')}
+                />
+                <Image
+                  style={styles.reactions}
+                  source={require('./savedStoriesIcon.png')}
+                />
+                <View style={styles.reactionNumber}>
+                  <Text style={[globalStyles.subtext, styles.reactionText]}>
+                    14{/*change number to work*/}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity onPress={() => saveStory()}>
+              <Image
+                style={{ width: 30, height: 30 }}
+                source={require('./savedStoriesIcon.png')}
+              />
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
     </Pressable>

src/components/ContentCard/styles.ts

@@ -7,19 +7,77 @@ const styles = StyleSheet.create({
     marginRight: 20,
     flexDirection: 'column',
     justifyContent: 'space-between',
+    backgroundColor: '#FFF',
+    borderRadius: 6,
+    shadowColor: colors.black,
+    shadowOpacity: 0.5,
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 5,
+    elevation: 4,
   },
   image: {
+    margin: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
     height: 140,
     width: 148,
     backgroundColor: colors.lime,
     borderRadius: 4,
     marginBottom: 8,
   },
+  authors: {
+    width: 30,
+    height: 30,
+    borderRadius: 30,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0',
+    borderColor: 'white',
+    marginTop: 15,
+    marginLeft: -45,
+    flexDirection: 'row',
+  },
   textContainer: {
-    width: 148,
+    width: 166,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
   },
   title: {
-    marginBottom: 4,
+    marginBottom: 8,
+    padding: 0,
+  },
+  reactionText: {
+    color: colors.grey,
+  },
+  reactionNumber: {
+    marginLeft: 15,
+    marginTop: 10,
+  },
+  reactions: {
+    width: 20,
+    height: 20,
+    borderRadius: 20 / 2,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0', //different per emoji reaction
+    borderColor: 'white',
+    marginTop: 10,
+    marginRight: -10,
+  },
+  buttons: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 5,
+  },
+  by: {
+    fontFamily: 'Manrope-Regular',
+    fontSize: 10,
+    color: colors.grey,
+  },
+  authorSpacing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    overflow: 'hidden',
   },
 });
 

src/components/PreviewCard/PreviewCard.tsx

@@ -1,11 +1,11 @@
+import * as cheerio from 'cheerio';
 import {
   GestureResponderEvent,
   Image,
   Pressable,
   Text,
   View,
 } from 'react-native';
-import * as cheerio from 'cheerio';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';

src/queries/types.tsx

@@ -47,6 +47,7 @@ export interface StoryCard {
   title: string;
   author_name: string;
   featured_media: string;
+  author_image: string;
 }
 
 export interface Subgenre {