From 8aa2740f949d39df58432722c3a78dfca4d1075e Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Sun, 5 Nov 2023 14:41:21 -0800 Subject: [PATCH 01/14] author card sprint progress --- src/app/(tabs)/search/_layout.tsx | 1 + src/app/(tabs)/search/author.tsx | 50 ++++++++++++++++++++++++ src/app/(tabs)/story/index.tsx | 8 ++-- src/components/AuthorCard/AuthorCard.tsx | 0 src/components/AuthorCard/styles.ts | 0 src/queries/authors.tsx | 34 ++++++++++++++++ src/queries/types.tsx | 20 +++------- tsconfig.json | 2 + 8 files changed, 98 insertions(+), 17 deletions(-) create mode 100644 src/app/(tabs)/search/author.tsx create mode 100644 src/components/AuthorCard/AuthorCard.tsx create mode 100644 src/components/AuthorCard/styles.ts create mode 100644 src/queries/authors.tsx diff --git a/src/app/(tabs)/search/_layout.tsx b/src/app/(tabs)/search/_layout.tsx index d021a461..481bc302 100644 --- a/src/app/(tabs)/search/_layout.tsx +++ b/src/app/(tabs)/search/_layout.tsx @@ -4,6 +4,7 @@ function StackLayout() { return ( + ); } diff --git a/src/app/(tabs)/search/author.tsx b/src/app/(tabs)/search/author.tsx new file mode 100644 index 00000000..1a7a4c35 --- /dev/null +++ b/src/app/(tabs)/search/author.tsx @@ -0,0 +1,50 @@ +import { useNavigation, useRouter, useLocalSearchParams } from 'expo-router'; +import React, { useEffect, useState } from 'react'; +import { + ActivityIndicator, + FlatList, + Image, + ScrollView, + Share, + Text, + View, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; + +import styles from './styles'; +import { AuthorInfo } from './types'; +import SearchCard from '../../../components/SearchCard/SearchCard'; +import { + fetchAuthor, + fetchAllAuthorStoryPreviews, +} from '../../../queries/authors'; + +const navigation = useNavigation(); +const router = useRouter(); +const params = useLocalSearchParams(); +const { authorID } = params; + +function AuthorScreen() { + const [authorInfo, setAuthorInfo] = useState(); + const [isLoading, setLoading] = useState(true); + + //useeffect should call fetchAuthor + useEffect(() => { + setAuthorInfo(fetchAuthor(params)); + setLoading(false); + }, []); + return ( + + {isLoading ? ( + + ) : ( + + + + + )} + + ); +} + +export default AuthorScreen; diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx index 899e8632..70d44533 100644 --- a/src/app/(tabs)/story/index.tsx +++ b/src/app/(tabs)/story/index.tsx @@ -1,4 +1,4 @@ -import { useLocalSearchParams } from 'expo-router'; +import { useNavigation, useRouter, useLocalSearchParams } from 'expo-router'; import React, { useEffect, useState } from 'react'; import { ActivityIndicator, @@ -14,8 +14,10 @@ import { RenderHTML } from 'react-native-render-html'; import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; -import { fetchStory } from '../../../queries/stories'; -import { Story } from '../../../queries/types'; +import { storyObject } from '../../../utils/story'; + +const navigation = useNavigation(); +const router = useRouter(); function StoryScreen() { const [isLoading, setLoading] = useState(true); diff --git a/src/components/AuthorCard/AuthorCard.tsx b/src/components/AuthorCard/AuthorCard.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/AuthorCard/styles.ts b/src/components/AuthorCard/styles.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/queries/authors.tsx b/src/queries/authors.tsx new file mode 100644 index 00000000..8edf77b5 --- /dev/null +++ b/src/queries/authors.tsx @@ -0,0 +1,34 @@ +import { AuthorInfo, StoryPreview } from './types'; +import supabase from '../utils/supabase'; + +export async function fetchAuthor(authorID: number): Promise { + const { data, error } = await supabase + .from('authors') + .select() + .eq('id', authorID); + if (error) { + console.log(error); + throw new Error( + `An error occured when trying to fetch author information:' ${error}`, + ); + } else { + return data; //TODO: figure out why this is returning any[] instead of the AuthorInfo Interface + } +} + +export async function fetchAllAuthorStoryPreviews( + input_author_id: number, +): Promise { + const { data, error } = await supabase.rpc( + 'fetch_author_story', + input_author_id, + ); + if (error) { + console.log(error); + throw new Error( + `An error occured when trying to fetch all author story previews: ${error}`, + ); + } else { + return data; + } +} diff --git a/src/queries/types.tsx b/src/queries/types.tsx index a0079025..2ced87d3 100644 --- a/src/queries/types.tsx +++ b/src/queries/types.tsx @@ -11,19 +11,11 @@ export interface StoryPreview { genre_medium: string[]; } -export interface Story { +export interface AuthorInfo { id: number; - date: string; - title: string; - featured_media: string; - author_id: number; - author_name: string; - author_image: string; - topic: string[]; - tone: string[]; - genre_medium: string[]; - excerpt: { html: string }; - content: { html: string }; - process: { html: string }; - link: string; + name: string; + pronouns: string; + bio: string; + artist_statement: string; + image: string; } diff --git a/tsconfig.json b/tsconfig.json index b9567f60..65f8f7d5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,8 @@ { "extends": "expo/tsconfig.base", "compilerOptions": { + "jsx": "react", + "jsx": "react", "strict": true } } From dc592b005df77a742d6091df00f78f55331b2fa5 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Tue, 14 Nov 2023 03:23:43 -0800 Subject: [PATCH 02/14] fixing authorCard pull request comments --- assets/icons.tsx | 2 + package-lock.json | 1 + package.json | 3 +- src/app/(tabs)/_layout.tsx | 7 + src/app/(tabs)/author/_layout.tsx | 11 ++ src/app/(tabs)/author/index.tsx | 140 ++++++++++++++++++ src/app/(tabs)/author/styles.tsx | 68 +++++++++ src/app/(tabs)/search/_layout.tsx | 1 - src/app/(tabs)/search/author.tsx | 50 ------- src/app/(tabs)/search/index.tsx | 14 +- src/app/(tabs)/story/index.tsx | 36 +++-- src/components/AuthorCard/AuthorCard.tsx | 60 ++++++++ src/components/AuthorCard/styles.ts | 56 +++++++ .../HorizontalLine/HorizontalLine.tsx | 9 ++ src/components/HorizontalLine/styles.ts | 13 ++ src/components/SearchCard/SearchCard.tsx | 5 +- src/components/SearchCard/styles.ts | 4 + src/queries/authors.tsx | 20 ++- src/queries/types.tsx | 19 ++- tsconfig.json | 5 +- 20 files changed, 441 insertions(+), 83 deletions(-) create mode 100644 src/app/(tabs)/author/_layout.tsx create mode 100644 src/app/(tabs)/author/index.tsx create mode 100644 src/app/(tabs)/author/styles.tsx delete mode 100644 src/app/(tabs)/search/author.tsx create mode 100644 src/components/HorizontalLine/HorizontalLine.tsx create mode 100644 src/components/HorizontalLine/styles.ts diff --git a/assets/icons.tsx b/assets/icons.tsx index 03a92b5f..acb9ae45 100644 --- a/assets/icons.tsx +++ b/assets/icons.tsx @@ -4,12 +4,14 @@ import { SvgXml } from 'react-native-svg'; export type IconType = | 'home_outline' + | 'back_icon' | 'document_outline' | 'search_outline' | 'close_modal_button'; const IconSvgs: Record = { home_outline: , + back_icon: , search_outline: , document_outline: , close_modal_button: ( diff --git a/package-lock.json b/package-lock.json index 36bbe3af..55331f68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "dom-parser": "^0.1.6", "expo": "~49.0.11", "expo-constants": "~14.4.2", + "expo-font": "~11.4.0", "expo-linking": "~5.0.2", "expo-router": "^2.0.0", "expo-status-bar": "~1.6.0", diff --git a/package.json b/package.json index 2d951965..0adf9e77 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "react-native-svg": "13.9.0", "react-native-url-polyfill": "^2.0.0", "react-native-vector-icons": "^10.0.0", - "react-scroll-to-top": "^3.0.0" + "react-scroll-to-top": "^3.0.0", + "expo-font": "~11.4.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx index 9a5f56bf..60ee9389 100644 --- a/src/app/(tabs)/_layout.tsx +++ b/src/app/(tabs)/_layout.tsx @@ -37,6 +37,13 @@ function TabNav() { tabBarIcon: SearchIcon, }} /> + + + + ); +} + +export default StackLayout; diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx new file mode 100644 index 00000000..cef6e93e --- /dev/null +++ b/src/app/(tabs)/author/index.tsx @@ -0,0 +1,140 @@ +import { useLocalSearchParams, router } from 'expo-router'; +import React, { useEffect, useState } from 'react'; +import { + ActivityIndicator, + ScrollView, + View, + Text, + Image, + TouchableOpacity, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; + +import styles from './styles'; +import Icon from '../../../../assets/icons'; +import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine'; +import SearchCard from '../../../components/SearchCard/SearchCard'; +import { + fetchAuthor, + fetchAuthorStoryPreviews, +} from '../../../queries/authors'; +import { Author, StoryPreview } from '../../../queries/types'; +import globalStyles from '../../../styles/globalStyles'; + +function AuthorScreen() { + const [authorInfo, setAuthorInfo] = useState(); + const [authorStoryPreview, setAuthorStoryPreview] = + useState(); + const [isLoading, setLoading] = useState(true); + const params = useLocalSearchParams<{ author: string }>(); + const { author } = params; + + useEffect(() => { + (async () => { + const storyData: StoryPreview[] = await fetchAuthorStoryPreviews( + parseInt(author as string, 10), + ); + const authorData: Author = await fetchAuthor( + parseInt(author as string, 10), + ); + try { + setAuthorInfo(authorData); + console.log('TESTING AUTHOR INFO QUERY OUTPUT:', authorInfo); + } catch (error) { + console.log( + `There was an error while trying to output authorinfo ${error}`, + ); + } + try { + setAuthorStoryPreview(storyData); + console.log('TESTING STORY PREVIEW INFO QUERY OUTPUT:', storyData); + } catch (error) { + console.log( + `There was an error while trying to output author story preview info ${error}`, + ); + } + setLoading(false); + })(); + }, []); + + return ( + + {isLoading ? ( + + ) : ( + + + + { + router.back(); + }} + > + BACK + + + + + + + + {authorInfo ? authorInfo.name : ''} + + {authorInfo ? authorInfo.pronouns : ' '} + + + + + {authorInfo ? authorInfo.bio : ''} + + + + + + + Artist's Statement + + + {authorInfo ? authorInfo.artist_statement : ''} + + + + + + + + {authorStoryPreview?.length + ' '} + {authorStoryPreview + ? authorStoryPreview?.length > 1 + ? 'Stories' + : 'Story' + : ''} + + + {authorStoryPreview + ? authorStoryPreview.map(story => ( + + router.push({ + pathname: '/story', + params: { storyId: story.id.toString() }, + }) + } + /> + )) + : ''} + + )} + + ); +} + +export default AuthorScreen; diff --git a/src/app/(tabs)/author/styles.tsx b/src/app/(tabs)/author/styles.tsx new file mode 100644 index 00000000..92e90430 --- /dev/null +++ b/src/app/(tabs)/author/styles.tsx @@ -0,0 +1,68 @@ +import { StyleSheet } from 'react-native'; + +import colors from '../../../styles/colors'; + +const styles = StyleSheet.create({ + authorCardContainer: { + marginRight: 20, + flexDirection: 'row', + justifyContent: 'flex-start', + flexWrap: 'wrap', + }, + name: { + paddingTop: 15, + fontWeight: 'bold', + fontSize: 20, + fontFamily: 'Avenir', + }, + image: { + height: 76, + width: 84, + backgroundColor: colors.darkGrey, + borderRadius: 4, + marginBottom: 12, + marginTop: 12, + }, + bioText: { + paddingTop: 15, + paddingBottom: 15, + color: 'black', + fontFamily: 'Avenir', + }, + authorStatementContainer: { + paddingTop: 15, + paddingBottom: 5, + fontWeight: 'bold', + fontSize: 15, + }, + authorStatement: { + paddingBottom: 15, + color: 'black', + fontWeight: '400', + fontFamily: 'Avenir', + }, + authorTextContainer: { + paddingLeft: 20, + }, + line: { + borderTopColor: 'black', + borderTopWidth: 20, + }, + authorStatementTitle: { + fontWeight: 'bold', + fontFamily: 'Avenir', + }, + backButton: { + paddingTop: 20, + paddingBottom: 15, + flexDirection: 'row', + justifyContent: 'flex-start', + color: colors.lightGrey, + }, + storyCountText: { + paddingTop: 10, + fontWeight: 'bold', + }, +}); + +export default styles; diff --git a/src/app/(tabs)/search/_layout.tsx b/src/app/(tabs)/search/_layout.tsx index 481bc302..d021a461 100644 --- a/src/app/(tabs)/search/_layout.tsx +++ b/src/app/(tabs)/search/_layout.tsx @@ -4,7 +4,6 @@ function StackLayout() { return ( - ); } diff --git a/src/app/(tabs)/search/author.tsx b/src/app/(tabs)/search/author.tsx deleted file mode 100644 index 1a7a4c35..00000000 --- a/src/app/(tabs)/search/author.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useNavigation, useRouter, useLocalSearchParams } from 'expo-router'; -import React, { useEffect, useState } from 'react'; -import { - ActivityIndicator, - FlatList, - Image, - ScrollView, - Share, - Text, - View, -} from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; - -import styles from './styles'; -import { AuthorInfo } from './types'; -import SearchCard from '../../../components/SearchCard/SearchCard'; -import { - fetchAuthor, - fetchAllAuthorStoryPreviews, -} from '../../../queries/authors'; - -const navigation = useNavigation(); -const router = useRouter(); -const params = useLocalSearchParams(); -const { authorID } = params; - -function AuthorScreen() { - const [authorInfo, setAuthorInfo] = useState(); - const [isLoading, setLoading] = useState(true); - - //useeffect should call fetchAuthor - useEffect(() => { - setAuthorInfo(fetchAuthor(params)); - setLoading(false); - }, []); - return ( - - {isLoading ? ( - - ) : ( - - - - - )} - - ); -} - -export default AuthorScreen; diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index a18ca242..ed30ba8e 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -1,7 +1,7 @@ import { SearchBar } from '@rneui/themed'; import { Link, router } from 'expo-router'; import React, { useEffect, useState } from 'react'; -import { Button, FlatList, View } from 'react-native'; +import { Button, FlatList, View, TouchableOpacity, Text } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; @@ -63,6 +63,18 @@ function SearchScreen() { title="Show Filter Modal" onPress={() => setFilterVisible(true)} /> + + {/* { + router.push({ + pathname: '/author', + params: { author: '2778' }, + }); + }} + > + testing + */} + - + {/* */} {story?.title} - - - - By {story.author_name} - + { + router.push({ + pathname: '/author', + params: { author: story.author_id.toString() }, + }); + }} + > + + + By {story.author_name} + + + + + + + + {name} + {pronouns} + Mentee + + + + + + + + + + {bio} + + + + + + + + + Artist's Statement + {artist_statement} + + + + + + + 1 Story + + ); +} +export default AuthorCard; diff --git a/src/components/AuthorCard/styles.ts b/src/components/AuthorCard/styles.ts index e69de29b..a5e7b1ca 100644 --- a/src/components/AuthorCard/styles.ts +++ b/src/components/AuthorCard/styles.ts @@ -0,0 +1,56 @@ +import { StyleSheet } from 'react-native'; + +import colors from '../../styles/colors'; + +const styles = StyleSheet.create({ + authorCardContainer: { + marginRight: 20, + flexDirection: 'row', + justifyContent: 'flex-start', + flexWrap: 'wrap', + }, + authorInfo: { + flexDirection: 'row', + justifyContent: 'flex-start', + }, + name: { + paddingTop: 15, + fontWeight: 'bold', + fontSize: 20, + }, + image: { + height: 76, + width: 84, + backgroundColor: colors.darkGrey, + borderRadius: 4, + marginBottom: 12, + marginTop: 12, + }, + + bioContainer: {}, + bioText: { + paddingTop: 15, + paddingBottom: 15, + color: 'gray', + }, + authorStatementContainer: { + paddingTop: 15, + paddingBottom: 5, + fontWeight: 'bold', + fontSize: 15, + }, + authorStatement: { + paddingBottom: 15, + color: 'gray', + }, + imageContainer: {}, + authorTextContainer: { + paddingLeft: 20, + }, + line: { + borderTopColor: 'black', + borderTopWidth: 20, + }, +}); + +export default styles; diff --git a/src/components/HorizontalLine/HorizontalLine.tsx b/src/components/HorizontalLine/HorizontalLine.tsx new file mode 100644 index 00000000..b29a1f73 --- /dev/null +++ b/src/components/HorizontalLine/HorizontalLine.tsx @@ -0,0 +1,9 @@ +import { View } from 'react-native'; + +import styles from './styles'; + +function HorizontalLine() { + return ; +} + +export default HorizontalLine; diff --git a/src/components/HorizontalLine/styles.ts b/src/components/HorizontalLine/styles.ts new file mode 100644 index 00000000..2b6089ff --- /dev/null +++ b/src/components/HorizontalLine/styles.ts @@ -0,0 +1,13 @@ +import { StyleSheet } from 'react-native'; + +import colors from '../../styles/colors'; + +const styles = StyleSheet.create({ + line: { + borderBottomColor: colors.darkGrey, + borderBottomWidth: 1, + width: 500, + }, +}); + +export default styles; diff --git a/src/components/SearchCard/SearchCard.tsx b/src/components/SearchCard/SearchCard.tsx index da160c1d..efd6a307 100644 --- a/src/components/SearchCard/SearchCard.tsx +++ b/src/components/SearchCard/SearchCard.tsx @@ -4,6 +4,7 @@ import { Pressable, Text, View, + TouchableOpacity, } from 'react-native'; import styles from './styles'; @@ -26,7 +27,7 @@ function SearchCard({ pressFunction, }: SearchCardProps) { return ( - + @@ -44,7 +45,7 @@ function SearchCard({ - + ); } diff --git a/src/components/SearchCard/styles.ts b/src/components/SearchCard/styles.ts index 8c72ed95..c214cc44 100644 --- a/src/components/SearchCard/styles.ts +++ b/src/components/SearchCard/styles.ts @@ -13,6 +13,10 @@ const styles = StyleSheet.create({ maxHeight: 100, paddingLeft: 12, paddingRight: 12, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.3, + shadowRadius: 3, }, image: { height: 76, diff --git a/src/queries/authors.tsx b/src/queries/authors.tsx index 8edf77b5..e9874d06 100644 --- a/src/queries/authors.tsx +++ b/src/queries/authors.tsx @@ -1,10 +1,10 @@ -import { AuthorInfo, StoryPreview } from './types'; +import { Author, StoryPreview } from './types'; import supabase from '../utils/supabase'; -export async function fetchAuthor(authorID: number): Promise { +export async function fetchAuthor(authorID: number): Promise { const { data, error } = await supabase .from('authors') - .select() + .select('*') .eq('id', authorID); if (error) { console.log(error); @@ -12,19 +12,17 @@ export async function fetchAuthor(authorID: number): Promise { `An error occured when trying to fetch author information:' ${error}`, ); } else { - return data; //TODO: figure out why this is returning any[] instead of the AuthorInfo Interface + return data[0] as unknown as Author; } } -export async function fetchAllAuthorStoryPreviews( - input_author_id: number, +export async function fetchAuthorStoryPreviews( + author_id: number, ): Promise { - const { data, error } = await supabase.rpc( - 'fetch_author_story', - input_author_id, - ); + const { data, error } = await supabase.rpc('fetch_author_story_previews', { + input_author_id: author_id, + }); if (error) { - console.log(error); throw new Error( `An error occured when trying to fetch all author story previews: ${error}`, ); diff --git a/src/queries/types.tsx b/src/queries/types.tsx index 2ced87d3..0cf8d8e6 100644 --- a/src/queries/types.tsx +++ b/src/queries/types.tsx @@ -11,7 +11,7 @@ export interface StoryPreview { genre_medium: string[]; } -export interface AuthorInfo { +export interface Author { id: number; name: string; pronouns: string; @@ -19,3 +19,20 @@ export interface AuthorInfo { artist_statement: string; image: string; } + +export interface Story { + id: number; + date: string; + title: string; + featured_media: string; + author_id: number; + author_name: string; + author_image: string; + topic: string[]; + tone: string[]; + genre_medium: string[]; + excerpt: { html: string }; + content: { html: string }; + process: { html: string }; + link: string; +} diff --git a/tsconfig.json b/tsconfig.json index 65f8f7d5..a0863d0f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,7 @@ { "extends": "expo/tsconfig.base", "compilerOptions": { - "jsx": "react", - "jsx": "react", - "strict": true + "strict": true, + "jsx": "react-jsx" } } From c06b1fb8e1cdbc2799f8ff6c14c6448912eebad4 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Tue, 14 Nov 2023 03:25:00 -0800 Subject: [PATCH 03/14] solving rebase issue --- src/app/(tabs)/search/index.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index ed30ba8e..d0eb5e40 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -64,17 +64,6 @@ function SearchScreen() { onPress={() => setFilterVisible(true)} /> - {/* { - router.push({ - pathname: '/author', - params: { author: '2778' }, - }); - }} - > - testing - */} - Date: Mon, 6 Nov 2023 18:23:19 -0800 Subject: [PATCH 04/14] finished majority styling for author page --- src/queries/authors.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/queries/authors.tsx b/src/queries/authors.tsx index e9874d06..5d8e5dbf 100644 --- a/src/queries/authors.tsx +++ b/src/queries/authors.tsx @@ -6,6 +6,7 @@ export async function fetchAuthor(authorID: number): Promise { .from('authors') .select('*') .eq('id', authorID); + if (error) { console.log(error); throw new Error( From d6b3fb15e4ea4b4ff86dbf6b29fa65a8cb464d90 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Mon, 6 Nov 2023 19:30:26 -0800 Subject: [PATCH 05/14] debugging queries --- src/queries/authors.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/queries/authors.tsx b/src/queries/authors.tsx index 5d8e5dbf..325aca5b 100644 --- a/src/queries/authors.tsx +++ b/src/queries/authors.tsx @@ -23,6 +23,7 @@ export async function fetchAuthorStoryPreviews( const { data, error } = await supabase.rpc('fetch_author_story_previews', { input_author_id: author_id, }); + console.log('TESTING QUERY OUTPUT:', data); if (error) { throw new Error( `An error occured when trying to fetch all author story previews: ${error}`, From 1688a4d869a781320bef88988962caa36b1da93f Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Tue, 14 Nov 2023 10:34:05 -0800 Subject: [PATCH 06/14] deleting SearchCard component --- src/app/(tabs)/author/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index cef6e93e..bbfb1e4a 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -12,8 +12,8 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; import Icon from '../../../../assets/icons'; +import ContentCard from '../../../components/ContentCard/ContentCard'; import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine'; -import SearchCard from '../../../components/SearchCard/SearchCard'; import { fetchAuthor, fetchAuthorStoryPreviews, @@ -116,12 +116,10 @@ function AuthorScreen() { {authorStoryPreview ? authorStoryPreview.map(story => ( - router.push({ pathname: '/story', From 97c86f5164c4c3e0db392fcfea5948ef98d94131 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Tue, 14 Nov 2023 10:49:21 -0800 Subject: [PATCH 07/14] fixed preview card and basic author styling --- src/app/(tabs)/author/index.tsx | 16 ++++++++++++---- src/app/(tabs)/author/styles.tsx | 9 ++++++--- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index bbfb1e4a..096b5fbf 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -12,8 +12,8 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; import Icon from '../../../../assets/icons'; -import ContentCard from '../../../components/ContentCard/ContentCard'; import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine'; +import PreviewCard from '../../../components/PreviewCard/PreviewCard'; import { fetchAuthor, fetchAuthorStoryPreviews, @@ -83,7 +83,9 @@ function AuthorScreen() { {authorInfo ? authorInfo.name : ''} - {authorInfo ? authorInfo.pronouns : ' '} + + {authorInfo ? authorInfo.pronouns : ' '} + @@ -116,10 +118,16 @@ function AuthorScreen() { {authorStoryPreview ? authorStoryPreview.map(story => ( - router.push({ pathname: '/story', diff --git a/src/app/(tabs)/author/styles.tsx b/src/app/(tabs)/author/styles.tsx index 92e90430..b56c1903 100644 --- a/src/app/(tabs)/author/styles.tsx +++ b/src/app/(tabs)/author/styles.tsx @@ -12,12 +12,12 @@ const styles = StyleSheet.create({ name: { paddingTop: 15, fontWeight: 'bold', - fontSize: 20, + fontSize: 25, fontFamily: 'Avenir', }, image: { - height: 76, - width: 84, + height: 68, + width: 68, backgroundColor: colors.darkGrey, borderRadius: 4, marginBottom: 12, @@ -63,6 +63,9 @@ const styles = StyleSheet.create({ paddingTop: 10, fontWeight: 'bold', }, + pronouns: { + color: '#797979', + }, }); export default styles; From 2a029a1a29e888d410d66676197f3b4d451d5153 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Tue, 14 Nov 2023 12:28:10 -0800 Subject: [PATCH 08/14] edited author useeffect to detect params change --- src/app/(tabs)/author/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index 096b5fbf..652ab45f 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -55,7 +55,7 @@ function AuthorScreen() { } setLoading(false); })(); - }, []); + }, [author]); return ( From 729f0626f05db656a64bd1c5c1941f238494bade Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Tue, 14 Nov 2023 12:32:01 -0800 Subject: [PATCH 09/14] final cleanup --- src/queries/authors.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/queries/authors.tsx b/src/queries/authors.tsx index 325aca5b..5d8e5dbf 100644 --- a/src/queries/authors.tsx +++ b/src/queries/authors.tsx @@ -23,7 +23,6 @@ export async function fetchAuthorStoryPreviews( const { data, error } = await supabase.rpc('fetch_author_story_previews', { input_author_id: author_id, }); - console.log('TESTING QUERY OUTPUT:', data); if (error) { throw new Error( `An error occured when trying to fetch all author story previews: ${error}`, From 209ef3893b7d2b5b920465f816fd4fcbb3d84cfc Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Tue, 14 Nov 2023 19:14:29 -0800 Subject: [PATCH 10/14] styling changes author card, added margins and fixed font sizes --- src/app/(tabs)/author/styles.tsx | 8 +++- src/app/(tabs)/search/index.tsx | 10 ++++- src/app/(tabs)/search/styles.ts | 4 ++ src/app/(tabs)/story/index.tsx | 3 -- src/components/LandingCard/LandingCard.tsx | 35 +++++++++++++++ src/components/LandingCard/styles.ts | 31 +++++++++++++ .../LandingScrollView/LandingScrollView.tsx | 43 +++++++++++++++++++ src/components/LandingScrollView/styles.ts | 26 +++++++++++ 8 files changed, 155 insertions(+), 5 deletions(-) create mode 100644 src/components/LandingCard/LandingCard.tsx create mode 100644 src/components/LandingCard/styles.ts create mode 100644 src/components/LandingScrollView/LandingScrollView.tsx create mode 100644 src/components/LandingScrollView/styles.ts diff --git a/src/app/(tabs)/author/styles.tsx b/src/app/(tabs)/author/styles.tsx index b56c1903..8324030a 100644 --- a/src/app/(tabs)/author/styles.tsx +++ b/src/app/(tabs)/author/styles.tsx @@ -28,18 +28,22 @@ const styles = StyleSheet.create({ paddingBottom: 15, color: 'black', fontFamily: 'Avenir', + fontSize: 14, + width: 324, }, authorStatementContainer: { paddingTop: 15, paddingBottom: 5, fontWeight: 'bold', - fontSize: 15, + fontSize: 20, }, authorStatement: { paddingBottom: 15, + fontSize: 14, color: 'black', fontWeight: '400', fontFamily: 'Avenir', + width: 324, }, authorTextContainer: { paddingLeft: 20, @@ -51,6 +55,8 @@ const styles = StyleSheet.create({ authorStatementTitle: { fontWeight: 'bold', fontFamily: 'Avenir', + fontSize: 17, + paddingBottom: 2, }, backButton: { paddingTop: 20, diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index f5a4562f..f3ee3178 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -1,11 +1,19 @@ import { SearchBar } from '@rneui/themed'; import { Link, router } from 'expo-router'; import React, { useEffect, useState } from 'react'; -import { Button, FlatList, View, TouchableOpacity, Text } from 'react-native'; +import { + Button, + FlatList, + View, + TouchableOpacity, + Text, + ScrollView, +} from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; import FilterModal from '../../../components/FilterModal/FilterModal'; +import LandingCard from '../../../components/LandingCard/LandingCard'; import SearchCard from '../../../components/PreviewCard/PreviewCard'; import { fetchAllStoryPreviews } from '../../../queries/stories'; import { StoryPreview } from '../../../queries/types'; diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts index f069ff55..eb2b24f6 100644 --- a/src/app/(tabs)/search/styles.ts +++ b/src/app/(tabs)/search/styles.ts @@ -43,6 +43,10 @@ const styles = StyleSheet.create({ width, height, }, + scrollView: { + marginBottom: 20, + flexGrow: 0, + }, }); export default styles; diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx index 7e36f39e..381a937f 100644 --- a/src/app/(tabs)/story/index.tsx +++ b/src/app/(tabs)/story/index.tsx @@ -18,9 +18,6 @@ import styles from './styles'; import { fetchStory } from '../../../queries/stories'; import { Story } from '../../../queries/types'; -// eslint-disable-next-line react-hooks/rules-of-hooks -// const router = useRouter(); - function StoryScreen() { const [isLoading, setLoading] = useState(true); const scrollRef = React.useRef(null); diff --git a/src/components/LandingCard/LandingCard.tsx b/src/components/LandingCard/LandingCard.tsx new file mode 100644 index 00000000..e9ab0870 --- /dev/null +++ b/src/components/LandingCard/LandingCard.tsx @@ -0,0 +1,35 @@ +import { + GestureResponderEvent, + Image, + Pressable, + Text, + View, + TouchableOpacity, +} from 'react-native'; + +import styles from './styles'; +import globalStyles from '../../styles/globalStyles'; + +type LandingCardProps = { + genre_medium: string; + image: string; + id: number; //story ID to send for routing + pressFunction: (event: GestureResponderEvent) => void; +}; + +function LandingCard({ genre_medium, id, pressFunction }: LandingCardProps) { + return ( + + + + + {genre_medium} + + + + ); +} + +export default LandingCard; + +//landing scroll will pass a color prop into the landingcard component? diff --git a/src/components/LandingCard/styles.ts b/src/components/LandingCard/styles.ts new file mode 100644 index 00000000..34492fa3 --- /dev/null +++ b/src/components/LandingCard/styles.ts @@ -0,0 +1,31 @@ +import { StyleSheet } from 'react-native'; + +import colors from '../../styles/colors'; + +const styles = StyleSheet.create({ + contentCardContainer: { + marginRight: 20, + flexDirection: 'column', + justifyContent: 'space-between', + }, + card: { + height: 135, + width: 120, + backgroundColor: colors.lime, + borderRadius: 4, + marginBottom: 8, + }, + overlayContainer: { + ...StyleSheet.absoluteFillObject, // This makes the overlay cover the entire parent container + justifyContent: 'flex-end', + flexDirection: 'row', + alignItems: 'flex-end', + }, + overlayText: { + color: 'white', + paddingBottom: 20, + whiteSpace: 'pre-wrap', + }, +}); + +export default styles; diff --git a/src/components/LandingScrollView/LandingScrollView.tsx b/src/components/LandingScrollView/LandingScrollView.tsx new file mode 100644 index 00000000..f05dcb11 --- /dev/null +++ b/src/components/LandingScrollView/LandingScrollView.tsx @@ -0,0 +1,43 @@ +import { + GestureResponderEvent, + Image, + Pressable, + Text, + View, +} from 'react-native'; + +import styles from './styles'; +import globalStyles from '../../styles/globalStyles'; + +type ContentCardProps = { + title: string; + author: string; + image: string; + pressFunction: (event: GestureResponderEvent) => void; +}; + +//landing scroll should have a see all button and title for genre +function ContentCard({ + title, + author, + image, + pressFunction, +}: ContentCardProps) { + return ( + + + + + + {title} + + + {author} + + + + + ); +} + +export default ContentCard; diff --git a/src/components/LandingScrollView/styles.ts b/src/components/LandingScrollView/styles.ts new file mode 100644 index 00000000..1ea6f118 --- /dev/null +++ b/src/components/LandingScrollView/styles.ts @@ -0,0 +1,26 @@ +import { StyleSheet } from 'react-native'; + +import colors from '../../styles/colors'; + +const styles = StyleSheet.create({ + contentCard: { + marginRight: 20, + flexDirection: 'column', + justifyContent: 'space-between', + }, + image: { + height: 140, + width: 148, + backgroundColor: colors.lime, + borderRadius: 4, + marginBottom: 8, + }, + textContainer: { + width: 148, + }, + title: { + marginBottom: 4, + }, +}); + +export default styles; From b172aa7511c9e5527664cfd45c91aa612fc2b91e Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Wed, 15 Nov 2023 23:02:31 -0800 Subject: [PATCH 11/14] progress on genre carousels, added supabase query --- src/app/(tabs)/author/index.tsx | 2 +- src/app/(tabs)/author/styles.tsx | 3 ++ src/app/(tabs)/search/index.tsx | 31 +++++++++++++++- src/components/LandingCard/LandingCard.tsx | 10 ++++- src/components/LandingCard/styles.ts | 3 -- .../LandingScrollView/LandingScrollView.tsx | 37 ++++++++----------- src/components/LandingScrollView/styles.ts | 23 +++--------- src/queries/genres.tsx | 13 +++++++ src/queries/types.tsx | 6 +++ 9 files changed, 80 insertions(+), 48 deletions(-) create mode 100644 src/queries/genres.tsx diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index 652ab45f..d98f9c57 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -80,7 +80,7 @@ function AuthorScreen() { source={{ uri: authorInfo ? authorInfo.image : '' }} /> - + {authorInfo ? authorInfo.name : ''} diff --git a/src/app/(tabs)/author/styles.tsx b/src/app/(tabs)/author/styles.tsx index 8324030a..13f419bc 100644 --- a/src/app/(tabs)/author/styles.tsx +++ b/src/app/(tabs)/author/styles.tsx @@ -14,6 +14,7 @@ const styles = StyleSheet.create({ fontWeight: 'bold', fontSize: 25, fontFamily: 'Avenir', + marginLeft: -10, }, image: { height: 68, @@ -67,10 +68,12 @@ const styles = StyleSheet.create({ }, storyCountText: { paddingTop: 10, + paddingBottom: 10, fontWeight: 'bold', }, pronouns: { color: '#797979', + marginLeft: -10, }, }); diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index f3ee3178..ed9d03c4 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -14,13 +14,15 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; import FilterModal from '../../../components/FilterModal/FilterModal'; import LandingCard from '../../../components/LandingCard/LandingCard'; +import LandingScrollView from '../../../components/LandingScrollView/LandingScrollView'; import SearchCard from '../../../components/PreviewCard/PreviewCard'; +import { fetchGenres } from '../../../queries/genres'; import { fetchAllStoryPreviews } from '../../../queries/stories'; -import { StoryPreview } from '../../../queries/types'; -import globalStyles from '../../../styles/globalStyles'; +import { StoryPreview, Genre } from '../../../queries/types'; function SearchScreen() { const [allStories, setAllStories] = useState([]); + const [allGenres, setAllGenres] = useState(); const [searchResults, setSearchResults] = useState([]); const [search, setSearch] = useState(''); const [filterVisible, setFilterVisible] = useState(false); @@ -45,6 +47,8 @@ function SearchScreen() { (async () => { const data: StoryPreview[] = await fetchAllStoryPreviews(); setAllStories(data); + const genreData: Genre = await fetchGenres(); + setAllGenres(genreData); })(); }, []); @@ -72,6 +76,29 @@ function SearchScreen() { onPress={() => setFilterVisible(true)} /> + {/* + + + + + + + + + + + */} + void; }; -function LandingCard({ genre_medium, id, pressFunction }: LandingCardProps) { +function LandingCard({ + genre_medium, + id, + pressFunction, + cardColor, +}: LandingCardProps) { return ( - + {genre_medium} diff --git a/src/components/LandingCard/styles.ts b/src/components/LandingCard/styles.ts index 34492fa3..03660448 100644 --- a/src/components/LandingCard/styles.ts +++ b/src/components/LandingCard/styles.ts @@ -1,7 +1,5 @@ import { StyleSheet } from 'react-native'; -import colors from '../../styles/colors'; - const styles = StyleSheet.create({ contentCardContainer: { marginRight: 20, @@ -11,7 +9,6 @@ const styles = StyleSheet.create({ card: { height: 135, width: 120, - backgroundColor: colors.lime, borderRadius: 4, marginBottom: 8, }, diff --git a/src/components/LandingScrollView/LandingScrollView.tsx b/src/components/LandingScrollView/LandingScrollView.tsx index f05dcb11..f5ab7f28 100644 --- a/src/components/LandingScrollView/LandingScrollView.tsx +++ b/src/components/LandingScrollView/LandingScrollView.tsx @@ -4,39 +4,32 @@ import { Pressable, Text, View, + ScrollView, } from 'react-native'; import styles from './styles'; import globalStyles from '../../styles/globalStyles'; +import LandingCard from '../LandingCard/LandingCard'; type ContentCardProps = { - title: string; - author: string; - image: string; - pressFunction: (event: GestureResponderEvent) => void; + genre: string; }; //landing scroll should have a see all button and title for genre -function ContentCard({ - title, - author, - image, - pressFunction, -}: ContentCardProps) { +function ContentCard({ genre }: ContentCardProps) { return ( - - - - - - {title} - - - {author} - - + + + {genre} + See All - + + ); } diff --git a/src/components/LandingScrollView/styles.ts b/src/components/LandingScrollView/styles.ts index 1ea6f118..a42903bc 100644 --- a/src/components/LandingScrollView/styles.ts +++ b/src/components/LandingScrollView/styles.ts @@ -3,24 +3,11 @@ import { StyleSheet } from 'react-native'; import colors from '../../styles/colors'; const styles = StyleSheet.create({ - contentCard: { - marginRight: 20, - flexDirection: 'column', - justifyContent: 'space-between', - }, - image: { - height: 140, - width: 148, - backgroundColor: colors.lime, - borderRadius: 4, - marginBottom: 8, - }, - textContainer: { - width: 148, - }, - title: { - marginBottom: 4, - }, + textContainer: {}, + genreText: {}, + seeAll: {}, + parentContainer: {}, + scrollView: {}, }); export default styles; diff --git a/src/queries/genres.tsx b/src/queries/genres.tsx new file mode 100644 index 00000000..c5d129fc --- /dev/null +++ b/src/queries/genres.tsx @@ -0,0 +1,13 @@ +import { Genre } from './types'; +import supabase from '../utils/supabase'; + +export async function fetchGenres(): Promise { + const { data, error } = await supabase.rpc('get_subgenres'); + if (error) { + throw new Error( + `An error occured when trying to fetch all author story previews: ${error}`, + ); + } else { + return data; + } +} diff --git a/src/queries/types.tsx b/src/queries/types.tsx index d1e30d16..74d41044 100644 --- a/src/queries/types.tsx +++ b/src/queries/types.tsx @@ -43,3 +43,9 @@ export interface StoryCard { author_name: string; featured_media: string; } + +export interface Genre { + parent_id: number; + parent_name: string; + subgenre: string; +} From f22cd4fa8eed0f09838c60c085ff8e39bbe98aee Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Sun, 19 Nov 2023 15:31:30 -0800 Subject: [PATCH 12/14] genre carousels sprint progress --- src/app/(tabs)/search/index.tsx | 5 ++++ src/components/LandingCard/LandingCard.tsx | 9 +++----- .../LandingScrollView/LandingScrollView.tsx | 23 ++++++++++++++++--- 3 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index ed9d03c4..6b246dbe 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -76,6 +76,11 @@ function SearchScreen() { onPress={() => setFilterVisible(true)} /> + + + + + {/* void; }; function LandingCard({ - genre_medium, - id, + subgenres, pressFunction, cardColor, }: LandingCardProps) { @@ -29,7 +26,7 @@ function LandingCard({ - {genre_medium} + {subgenres} diff --git a/src/components/LandingScrollView/LandingScrollView.tsx b/src/components/LandingScrollView/LandingScrollView.tsx index f5ab7f28..dad86352 100644 --- a/src/components/LandingScrollView/LandingScrollView.tsx +++ b/src/components/LandingScrollView/LandingScrollView.tsx @@ -12,15 +12,26 @@ import globalStyles from '../../styles/globalStyles'; import LandingCard from '../LandingCard/LandingCard'; type ContentCardProps = { - genre: string; + main_genre: string; + subgenres: string; + cardColor: string; + pressFunction: (event: GestureResponderEvent) => void; + + landing_card: typeof LandingCard; }; //landing scroll should have a see all button and title for genre -function ContentCard({ genre }: ContentCardProps) { +function ContentCard({ + main_genre, + landing_card, + subgenres, + cardColor, + pressFunction, +}: ContentCardProps) { return ( - {genre} + {main_genre} See All void; +// }; From 4707847c1602e1fad0b97b5edb32eb0eefcde8a5 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Mon, 27 Nov 2023 10:22:24 -0800 Subject: [PATCH 13/14] basic styling and carousel --- src/app/(tabs)/search/index.tsx | 62 ++++++++++--------- src/app/(tabs)/search/styles.ts | 18 +++++- src/components/LandingCard/styles.ts | 7 ++- .../LandingScrollView/LandingScrollView.tsx | 53 ---------------- src/components/LandingScrollView/styles.ts | 13 ---- src/queries/genres.tsx | 5 +- src/queries/types.tsx | 7 ++- 7 files changed, 64 insertions(+), 101 deletions(-) delete mode 100644 src/components/LandingScrollView/LandingScrollView.tsx delete mode 100644 src/components/LandingScrollView/styles.ts diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index 6b246dbe..d1c38143 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -14,7 +14,6 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; import FilterModal from '../../../components/FilterModal/FilterModal'; import LandingCard from '../../../components/LandingCard/LandingCard'; -import LandingScrollView from '../../../components/LandingScrollView/LandingScrollView'; import SearchCard from '../../../components/PreviewCard/PreviewCard'; import { fetchGenres } from '../../../queries/genres'; import { fetchAllStoryPreviews } from '../../../queries/stories'; @@ -22,11 +21,16 @@ import { StoryPreview, Genre } from '../../../queries/types'; function SearchScreen() { const [allStories, setAllStories] = useState([]); - const [allGenres, setAllGenres] = useState(); + const [allGenres, setAllGenres] = useState([]); const [searchResults, setSearchResults] = useState([]); const [search, setSearch] = useState(''); const [filterVisible, setFilterVisible] = useState(false); + const getColor = (index: number) => { + const genreColors = ['#E66E3F', '#ACC073', '#B49BC6']; + return genreColors[index % genreColors.length]; + }; + const searchFunction = (text: string) => { if (text === '') { setSearch(text); @@ -47,7 +51,8 @@ function SearchScreen() { (async () => { const data: StoryPreview[] = await fetchAllStoryPreviews(); setAllStories(data); - const genreData: Genre = await fetchGenres(); + const genreData: Genre[] = await fetchGenres(); + console.log('testing use effect fetch of genre data:', genreData); setAllGenres(genreData); })(); }, []); @@ -76,34 +81,33 @@ function SearchScreen() { onPress={() => setFilterVisible(true)} /> - - - - - - {/* - - - - + + {allGenres.map((genre, index) => ( + + + {genre.parent_name} + See All + + + + {genre.subgenres.map(subgenre => ( + null} + /> + ))} + + + + ))} - - - - - */} - void; - - landing_card: typeof LandingCard; -}; - -//landing scroll should have a see all button and title for genre -function ContentCard({ - main_genre, - landing_card, - subgenres, - cardColor, - pressFunction, -}: ContentCardProps) { - return ( - - - {main_genre} - See All - - - - ); -} - -export default ContentCard; - -// type LandingCardProps = { -// subgenres: string; -// cardColor: string; -// pressFunction: (event: GestureResponderEvent) => void; -// }; diff --git a/src/components/LandingScrollView/styles.ts b/src/components/LandingScrollView/styles.ts deleted file mode 100644 index a42903bc..00000000 --- a/src/components/LandingScrollView/styles.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { StyleSheet } from 'react-native'; - -import colors from '../../styles/colors'; - -const styles = StyleSheet.create({ - textContainer: {}, - genreText: {}, - seeAll: {}, - parentContainer: {}, - scrollView: {}, -}); - -export default styles; diff --git a/src/queries/genres.tsx b/src/queries/genres.tsx index c5d129fc..01be5f74 100644 --- a/src/queries/genres.tsx +++ b/src/queries/genres.tsx @@ -1,8 +1,9 @@ import { Genre } from './types'; import supabase from '../utils/supabase'; -export async function fetchGenres(): Promise { - const { data, error } = await supabase.rpc('get_subgenres'); +export async function fetchGenres(): Promise { + const { data, error } = await supabase.rpc('fetch_subgenres'); + console.log('TESTING SUPABASE QUERY OUTPUT:', data); if (error) { throw new Error( `An error occured when trying to fetch all author story previews: ${error}`, diff --git a/src/queries/types.tsx b/src/queries/types.tsx index 74d41044..c40ac039 100644 --- a/src/queries/types.tsx +++ b/src/queries/types.tsx @@ -44,8 +44,13 @@ export interface StoryCard { featured_media: string; } +export interface Subgenre { + id: number; + name: string; +} + export interface Genre { parent_id: number; parent_name: string; - subgenre: string; + subgenres: Subgenre[]; } From d6bb67d47bd684ae677cebbaa067619afc048b08 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Mon, 27 Nov 2023 11:06:58 -0800 Subject: [PATCH 14/14] fully functional genre carousals --- src/app/(tabs)/search/index.tsx | 125 +++++++++++++++------------ src/components/LandingCard/styles.ts | 15 ++-- 2 files changed, 76 insertions(+), 64 deletions(-) diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index d1c38143..c55bf17a 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -25,6 +25,7 @@ function SearchScreen() { const [searchResults, setSearchResults] = useState([]); const [search, setSearch] = useState(''); const [filterVisible, setFilterVisible] = useState(false); + const [showGenreCarousals, setShowGenreCarousals] = useState(true); const getColor = (index: number) => { const genreColors = ['#E66E3F', '#ACC073', '#B49BC6']; @@ -45,6 +46,7 @@ function SearchScreen() { }); setSearch(text); setSearchResults(updatedData); + setShowGenreCarousals(false); }; useEffect(() => { @@ -57,11 +59,17 @@ function SearchScreen() { })(); }, []); + const handleCancelButtonPress = () => { + setSearchResults([]); + setShowGenreCarousals(true); + }; + return ( handleCancelButtonPress()} searchIcon={false} clearIcon containerStyle={styles.searchContainer} @@ -69,72 +77,75 @@ function SearchScreen() { inputStyle={{ color: 'black' }} leftIconContainerStyle={{}} rightIconContainerStyle={{}} - lightTheme + // lightTheme loadingProps={{}} placeholder="Search" placeholderTextColor="black" onChangeText={text => searchFunction(text)} value={search} /> -