[retool] Add way to set description of featured stories

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

@@ -1,5 +1,5 @@
 import { useLocalSearchParams, router } from 'expo-router';
-import { useEffect, useState, useMemo, ReactNode } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import {
   ActivityIndicator,
   ScrollView,

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

@@ -1,13 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { router } from 'expo-router';
 import { useEffect, useState } from 'react';
-import {
-  ActivityIndicator,
-  Pressable,
-  ScrollView,
-  Text,
-  View,
-} from 'react-native';
+import { ActivityIndicator, ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
@@ -16,6 +10,7 @@ import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import { fetchUsername } from '../../../queries/profiles';
 import {
   fetchFeaturedStoriesDescription,
+  fetchFeaturedStoriesHeader,
   fetchFeaturedStoryPreviews,
   fetchNewStories,
   fetchRecommendedStories,
@@ -33,6 +28,7 @@ function HomeScreen() {
   const [recentlyViewed, setRecentlyViewed] = useState<StoryPreview[]>([]);
   const [featuredStoriesDescription, setFeaturedStoriesDescription] =
     useState<string>('');
+  const [featuredStoriesHeader, setFeaturedStoriesHeader] = useState('');
   const [recommendedStories, setRecommendedStories] = useState<StoryCard[]>([]);
   const [newStories, setNewStories] = useState<StoryCard[]>([]);
 
@@ -93,7 +89,7 @@ function HomeScreen() {
   };
 
   useEffect(() => {
-    const getRecommendedStories = async () => {
+    const updateRecommendedStories = async () => {
       const recentStoryResponse = await getRecentStory();
 
       const recommendedStoriesResponse =
@@ -105,22 +101,27 @@ function HomeScreen() {
       const [
         usernameResponse,
         featuredStoryResponse,
+        featuredStoryHeaderResponse,
         featuredStoryDescriptionResponse,
         newStoriesResponse,
         recentStoryResponse,
+        _,
       ] = await Promise.all([
         fetchUsername(user?.id).catch(() => ''),
         fetchFeaturedStoryPreviews().catch(() => []),
+        fetchFeaturedStoriesHeader().catch(() => ''),
         fetchFeaturedStoriesDescription().catch(() => ''),
         fetchNewStories().catch(() => []),
         getRecentStory(),
+        updateRecommendedStories(),
       ]);
+
       setUsername(usernameResponse);
       setFeaturedStories(featuredStoryResponse);
+      setFeaturedStoriesHeader(featuredStoryHeaderResponse);
       setFeaturedStoriesDescription(featuredStoryDescriptionResponse);
       setNewStories(newStoriesResponse);
       setRecentlyViewed(recentStoryResponse);
-      await getRecommendedStories();
     })().finally(() => {
       setLoading(false);
     });
@@ -142,21 +143,29 @@ function HomeScreen() {
         contentContainerStyle={{ paddingHorizontal: 8 }}
       >
         <View style={styles.headerContainer}>
-          <Text style={globalStyles.h1}>
+          <Text style={[globalStyles.h1, { paddingBottom: 24 }]}>
             {username ? `Welcome, ${username}` : 'Welcome!'}
           </Text>
         </View>
 
         {featuredStories.length > 0 && (
           <View>
-            <Text style={globalStyles.h3}>Featured Stories</Text>
-            {featuredStoriesDescription != null &&
-              featuredStoriesDescription.length > 0 && (
+            <Text style={[globalStyles.h2, { paddingBottom: 16 }]}>
+              Featured Stories
+            </Text>
+            {featuredStoriesHeader != null && featuredStoriesHeader != '' && (
+              <Text style={[globalStyles.h3, { paddingBottom: 16 }]}>
+                {featuredStoriesHeader}
+              </Text>
+            )}
+            {featuredStoriesHeader != '' &&
+              featuredStoriesDescription != null &&
+              featuredStoriesDescription != '' && (
                 <Text style={[globalStyles.body1, styles.featuredDescription]}>
                   {featuredStoriesDescription}
                 </Text>
               )}
-            <View style={{ marginRight: 24, marginTop: 16 }}>
+            <View style={{ marginRight: 24 }}>
               {featuredStories.map(story => (
                 <PreviewCard
                   key={story.id}

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

@@ -38,8 +38,7 @@ const styles = StyleSheet.create({
     marginRight: 24,
   },
   featuredDescription: {
-    marginBottom: 16,
-    marginTop: 8,
+    marginBottom: 24,
     marginRight: 24,
   },
 });

src/components/ContentCard/ContentCard.tsx

@@ -1,20 +1,18 @@
 import { Image } from 'expo-image';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   GestureResponderEvent,
   Pressable,
   Text,
   View,
   TouchableOpacity,
 } from 'react-native';
-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 SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 import ReactionDisplay from '../ReactionDisplay/ReactionDisplay';
+import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 type ContentCardProps = {
   id: number;

src/components/PreviewCard/PreviewCard.tsx

@@ -1,21 +1,19 @@
 import * as cheerio from 'cheerio';
 import { Image } from 'expo-image';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   GestureResponderEvent,
   Pressable,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
-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 SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 import ReactionDisplay from '../ReactionDisplay/ReactionDisplay';
+import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 const placeholderImage =
   'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2021/10/10120952/Girls-Write-Now-logo-avatar.png';

src/queries/stories.tsx

@@ -1,12 +1,10 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import {
   Story,
   StoryPreview,
   StoryCard,
   StoryPreviewWithPreloadedReactions,
 } from './types';
 import supabase from '../utils/supabase';
-import { useState } from 'react';
 
 export async function fetchAllStoryPreviews(): Promise<
   StoryPreviewWithPreloadedReactions[]
@@ -51,25 +49,10 @@ export async function fetchFeaturedStoryPreviews(): Promise<StoryPreview[]> {
   }
 }
 
-export async function fetchFeaturedStoriesDescription(): Promise<string> {
-  const { data, error } = await supabase
-    .from('featured_stories')
-    .select('description');
-
-  if (error) {
-    console.log(error);
-    throw new Error(
-      `An error occured when trying to fetch featured story description: ${error}`,
-    );
-  } else {
-    return data[0].description;
-  }
-}
-
 export async function fetchRecommendedStories(
   inputStories: StoryPreview[],
 ): Promise<StoryPreview[]> {
-  if (inputStories.length == 0) {
+  if (inputStories.length === 0) {
     return [];
   }
   const storyIDs = inputStories.map(story => story.id);
@@ -199,3 +182,33 @@ export async function fetchStoryPreviewByIds(
     return data;
   }
 }
+
+export async function fetchFeaturedStoriesHeader(): Promise<string> {
+  const { data, error } = await supabase
+    .from('featured_stories_description')
+    .select('header');
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch featured story description: ${error}`,
+    );
+  } else {
+    return data[0].header;
+  }
+}
+
+export async function fetchFeaturedStoriesDescription(): Promise<string> {
+  const { data, error } = await supabase
+    .from('featured_stories_description')
+    .select('description');
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch featured story description: ${error}`,
+    );
+  } else {
+    return data[0].description;
+  }
+}