From 22dd7c9a0a2bcbb92bae1d83d5b9aa365d10e41a Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Sun, 12 Nov 2023 15:47:26 -0800 Subject: [PATCH 01/13] accidently forgot to branch --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 36bbe3af..d85cab47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@mui/material": "^5.14.13", "@mui/styled-engine-sc": "^6.0.0-alpha.1", "@mui/system": "^5.14.13", - "@react-native-async-storage/async-storage": "1.18.2", + "@react-native-async-storage/async-storage": "^1.18.2", "@react-native-community/datetimepicker": "7.2.0", "@react-navigation/bottom-tabs": "^6.5.9", "@react-navigation/material-bottom-tabs": "^6.2.17", diff --git a/package.json b/package.json index 2d951965..d978c864 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@mui/material": "^5.14.13", "@mui/styled-engine-sc": "^6.0.0-alpha.1", "@mui/system": "^5.14.13", - "@react-native-async-storage/async-storage": "1.18.2", + "@react-native-async-storage/async-storage": "^1.18.2", "@react-native-community/datetimepicker": "7.2.0", "@react-navigation/bottom-tabs": "^6.5.9", "@react-navigation/material-bottom-tabs": "^6.2.17", From 05ec265b46e1ce14478ca0d7d0b2f1c47447c565 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Thu, 18 Apr 2024 22:33:25 -0700 Subject: [PATCH 02/13] mergong --- src/app/(tabs)/home/index.tsx | 2 ++ src/components/ContentCard/ContentCard.tsx | 2 ++ src/queries/reactions.tsx | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx index 81341d77..a00ae25c 100644 --- a/src/app/(tabs)/home/index.tsx +++ b/src/app/(tabs)/home/index.tsx @@ -128,6 +128,7 @@ function HomeScreen() { > {recommendedStories.map(story => ( {newStories.map(story => ( Date: Fri, 19 Apr 2024 22:09:24 -0700 Subject: [PATCH 03/13] reactions added to the PreviewCard and ContentCard --- src/app/(tabs)/home/index.tsx | 1 + src/components/ContentCard/ContentCard.tsx | 22 +++++++++++++++++++--- src/components/PreviewCard/PreviewCard.tsx | 21 +++++++++++++++++++-- tsconfig.json | 1 + 4 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx index 2b262871..b3c3e2ba 100644 --- a/src/app/(tabs)/home/index.tsx +++ b/src/app/(tabs)/home/index.tsx @@ -95,6 +95,7 @@ function HomeScreen() { {featuredStories.map(story => ( (); + + useEffect(() => { + (async () => { + const temp = await fetchAllReactionsToStory(id); + if (temp != null) { + setReactions(temp); + return; + } + setReactions([]); + })(); + }); + return ( @@ -73,7 +89,7 @@ function ContentCard({ {/* heart, clap, muscle, cry, ??? */} - 14{/*change number to work*/} + {reactions?.length} diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index 71d6d057..ddb56719 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/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(); + useEffect(() => { + (async () => { + const temp = await fetchAllReactionsToStory(id); + if (temp != null) { + setReactions(temp); + return; + } + setReactions([]); + })(); + }); + return ( @@ -85,7 +102,7 @@ function PreviewCard({ {/* heart, clap, muscle, cry, ??? */} - 14{/*change number to work*/} + {reactions?.length} diff --git a/tsconfig.json b/tsconfig.json index a0863d0f..e55b0e42 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "expo/tsconfig.base", "compilerOptions": { + "module": "esnext", "strict": true, "jsx": "react-jsx" } From 1b69364a5ac2b2a5f4b60dd88a2b815034baafe5 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Fri, 19 Apr 2024 22:57:23 -0700 Subject: [PATCH 04/13] prettier problems --- src/components/PreviewCard/PreviewCard.tsx | 6 +++--- src/utils/FilterContext.tsx | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index ddb56719..cd8f2b94 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -1,5 +1,6 @@ import * as cheerio from 'cheerio'; import { Image } from 'expo-image'; +import { useEffect, useState } from 'react'; import { GestureResponderEvent, Pressable, @@ -10,11 +11,10 @@ import { import Emoji from 'react-native-emoji'; 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'; +import globalStyles from '../../styles/globalStyles'; +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'; diff --git a/src/utils/FilterContext.tsx b/src/utils/FilterContext.tsx index b488e0dd..fa999b8d 100644 --- a/src/utils/FilterContext.tsx +++ b/src/utils/FilterContext.tsx @@ -5,6 +5,7 @@ import React, { useMemo, useReducer, } from 'react'; + import supabase from './supabase'; type FilterAction = From 31fc8234d0a190328ce3c8c579e323266149422c Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Fri, 19 Apr 2024 23:13:25 -0700 Subject: [PATCH 05/13] minor change --- src/queries/stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/queries/stories.tsx b/src/queries/stories.tsx index 9b8e833b..1a18e68d 100644 --- a/src/queries/stories.tsx +++ b/src/queries/stories.tsx @@ -25,7 +25,7 @@ export async function fetchStory(storyId: number): Promise { `An error occured when trying to fetch story ${storyId}: ${error.code}`, ); } else { - return data; + return data as Story[]; } } From a81751d4147797dd745f097e4744bb57f1742082 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Fri, 19 Apr 2024 23:17:46 -0700 Subject: [PATCH 06/13] fixed small error --- src/app/(tabs)/author/index.tsx | 5 ++--- src/app/(tabs)/home/index.tsx | 1 - src/components/PreviewCard/PreviewCard.tsx | 4 +--- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index 7767637c..a47ae9d8 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -1,5 +1,5 @@ +import * as cheerio from 'cheerio'; import { useLocalSearchParams, router } from 'expo-router'; -import { decode } from 'html-entities'; import { useEffect, useState } from 'react'; import { ActivityIndicator, ScrollView, View, Text, Image } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; @@ -14,7 +14,6 @@ import { } from '../../../queries/authors'; import { Author, StoryPreview } from '../../../queries/types'; import globalStyles from '../../../styles/globalStyles'; -import * as cheerio from 'cheerio'; function AuthorScreen() { const [authorInfo, setAuthorInfo] = useState(); @@ -59,7 +58,7 @@ function AuthorScreen() { ) : ( router.back()} /> diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx index b3c3e2ba..2b262871 100644 --- a/src/app/(tabs)/home/index.tsx +++ b/src/app/(tabs)/home/index.tsx @@ -95,7 +95,6 @@ function HomeScreen() { {featuredStories.map(story => ( (); useEffect(() => { (async () => { - const temp = await fetchAllReactionsToStory(id); + const temp = await fetchAllReactionsToStory(storyId); if (temp != null) { setReactions(temp); return; From 825d248f2e6a4d032fb47aff7d64ecb754c92592 Mon Sep 17 00:00:00 2001 From: Aditya Pawar Date: Sun, 21 Apr 2024 11:17:53 -0700 Subject: [PATCH 07/13] Improve performence --- src/app/(tabs)/author/index.tsx | 3 ++- src/app/(tabs)/story/index.tsx | 2 +- src/components/AuthorCard/AuthorCard.tsx | 3 ++- src/components/ContentCard/ContentCard.tsx | 2 +- src/components/GenreStoryPreviewCard/GenreStoryPreviewCard.tsx | 2 +- src/components/PreviewCard/PreviewCard.tsx | 2 +- src/components/SplashScreen/SplashScreen.tsx | 3 ++- 7 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index a47ae9d8..fec884a8 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -1,7 +1,8 @@ import * as cheerio from 'cheerio'; import { useLocalSearchParams, router } from 'expo-router'; import { useEffect, useState } from 'react'; -import { ActivityIndicator, ScrollView, View, Text, Image } from 'react-native'; +import { ActivityIndicator, ScrollView, View, Text } from 'react-native'; +import { Image } from 'expo-image'; import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx index 2995426d..4aa62f2c 100644 --- a/src/app/(tabs)/story/index.tsx +++ b/src/app/(tabs)/story/index.tsx @@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react'; import { ActivityIndicator, FlatList, - Image, ScrollView, Share, Text, @@ -11,6 +10,7 @@ import { View, useWindowDimensions, } from 'react-native'; +import { Image } from 'expo-image'; import { Button } from 'react-native-paper'; import { RenderHTML } from 'react-native-render-html'; import { SafeAreaView } from 'react-native-safe-area-context'; diff --git a/src/components/AuthorCard/AuthorCard.tsx b/src/components/AuthorCard/AuthorCard.tsx index 99694abd..edec4725 100644 --- a/src/components/AuthorCard/AuthorCard.tsx +++ b/src/components/AuthorCard/AuthorCard.tsx @@ -1,4 +1,5 @@ -import { Image, Text, View } from 'react-native'; +import { Image } from 'expo-image'; +import { Text, View } from 'react-native'; import styles from './styles'; type AuthorCardProps = { diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx index acd8487d..7a0ad171 100644 --- a/src/components/ContentCard/ContentCard.tsx +++ b/src/components/ContentCard/ContentCard.tsx @@ -45,7 +45,7 @@ function ContentCard({ } setReactions([]); })(); - }); + }, []); return ( diff --git a/src/components/GenreStoryPreviewCard/GenreStoryPreviewCard.tsx b/src/components/GenreStoryPreviewCard/GenreStoryPreviewCard.tsx index 00b413da..7ea1ba20 100644 --- a/src/components/GenreStoryPreviewCard/GenreStoryPreviewCard.tsx +++ b/src/components/GenreStoryPreviewCard/GenreStoryPreviewCard.tsx @@ -1,10 +1,10 @@ import { GestureResponderEvent, Text, - Image, View, TouchableOpacity, } from 'react-native'; +import { Image } from 'expo-image'; import styles from './styles'; import globalStyles from '../../styles/globalStyles'; diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index 726e7f50..6b5a0585 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -50,7 +50,7 @@ function PreviewCard({ } setReactions([]); })(); - }); + }, []); return ( diff --git a/src/components/SplashScreen/SplashScreen.tsx b/src/components/SplashScreen/SplashScreen.tsx index 3d791035..d9585ce9 100644 --- a/src/components/SplashScreen/SplashScreen.tsx +++ b/src/components/SplashScreen/SplashScreen.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { View, Image } from 'react-native'; +import { View } from 'react-native'; +import { Image } from 'expo-image'; import styles from './styles'; From b50d89de2717d4dcb51f589f370faeb70918879f Mon Sep 17 00:00:00 2001 From: Aditya Pawar Date: Sun, 21 Apr 2024 11:25:01 -0700 Subject: [PATCH 08/13] Preload reactions --- src/app/(tabs)/search/index.tsx | 11 ++++++----- src/components/PreviewCard/PreviewCard.tsx | 12 ++++++++++-- src/queries/stories.tsx | 4 ++-- src/queries/types.tsx | 21 +++++++++++++++++---- 4 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index fdc5612d..4bd2adc5 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -20,7 +20,7 @@ import PreviewCard from '../../../components/PreviewCard/PreviewCard'; import RecentSearchCard from '../../../components/RecentSearchCard/RecentSearchCard'; import { fetchGenres } from '../../../queries/genres'; import { fetchAllStoryPreviews } from '../../../queries/stories'; -import { StoryPreview, RecentSearch, Genre } from '../../../queries/types'; +import { StoryPreview, RecentSearch, Genre, StoryPreviewWithPreloadedReactions } from '../../../queries/types'; import colors from '../../../styles/colors'; import globalStyles from '../../../styles/globalStyles'; import { GenreType } from '../genre'; @@ -62,9 +62,9 @@ const setRecentStory = async (recentStories: StoryPreview[]) => { }; function SearchScreen() { - const [allStories, setAllStories] = useState([]); + const [allStories, setAllStories] = useState([]); const [allGenres, setAllGenres] = useState([]); - const [searchResults, setSearchResults] = useState([]); + const [searchResults, setSearchResults] = useState([]); const [search, setSearch] = useState(''); const [filterVisible, setFilterVisible] = useState(false); const [recentSearches, setRecentSearches] = useState([]); @@ -75,7 +75,7 @@ function SearchScreen() { useEffect(() => { (async () => { - fetchAllStoryPreviews().then((stories: StoryPreview[]) => + fetchAllStoryPreviews().then((stories) => setAllStories(stories), ); fetchGenres().then((genres: Genre[]) => setAllGenres(genres)); @@ -99,7 +99,7 @@ function SearchScreen() { return; } - const updatedData = allStories.filter((item: StoryPreview) => { + const updatedData = allStories.filter(item => { const title = `${item.title.toUpperCase()})`; const author = `${item.author_name.toUpperCase()})`; const text_data = text.toUpperCase(); @@ -400,6 +400,7 @@ function SearchScreen() { storyId={item.id} title={item.title} image={item.featured_media} + reactions={item.reactions} author={item.author_name} authorImage={item.author_image} excerpt={item.excerpt} diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index 6b5a0585..efc6cfde 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -27,6 +27,7 @@ type PreviewCardProps = { authorImage: string; excerpt: { html: string }; tags: string[]; + reactions?: string[] | null; pressFunction: (event: GestureResponderEvent) => void; }; @@ -39,13 +40,20 @@ function PreviewCard({ excerpt, tags, pressFunction, + reactions: preloadedReactions = null }: PreviewCardProps) { - const [reactions, setReactions] = useState(); + const [reactions, setReactions] = useState(preloadedReactions); useEffect(() => { + if (preloadedReactions != null) { + return; + } + (async () => { + console.log("fetching reactions"); + const temp = await fetchAllReactionsToStory(storyId); if (temp != null) { - setReactions(temp); + setReactions(temp.map(r => r.reaction)); return; } setReactions([]); diff --git a/src/queries/stories.tsx b/src/queries/stories.tsx index 1a18e68d..0dffc354 100644 --- a/src/queries/stories.tsx +++ b/src/queries/stories.tsx @@ -1,7 +1,7 @@ -import { Story, StoryPreview, StoryCard } from './types'; +import { Story, StoryPreview, StoryCard, StoryPreviewWithPreloadedReactions } from './types'; import supabase from '../utils/supabase'; -export async function fetchAllStoryPreviews(): Promise { +export async function fetchAllStoryPreviews(): Promise { const { data, error } = await supabase.rpc('fetch_all_story_previews'); if (error) { diff --git a/src/queries/types.tsx b/src/queries/types.tsx index 60748adc..b349433e 100644 --- a/src/queries/types.tsx +++ b/src/queries/types.tsx @@ -11,6 +11,21 @@ export interface StoryPreview { genre_medium: string[]; } +export interface StoryPreviewWithPreloadedReactions { + id: number; + date: string; + title: string; + excerpt: { html: string }; + featured_media: string; + author_name: string; + author_image: string; + topic: string[]; + tone: string[]; + genre_medium: string[]; + reactions: string[]; +} + + export interface Author { id: number; name: string; @@ -70,8 +85,6 @@ export interface GenreStories { } export interface Reactions { - profile_id: number; - story_id: number; - emoji_id: number; - emoji: string; + reaction_id: number; + reaction: string; } From b9014d18b417b96f0c45c0d8e092dfcc47780683 Mon Sep 17 00:00:00 2001 From: Aditya Pawar Date: Sun, 21 Apr 2024 11:25:20 -0700 Subject: [PATCH 09/13] Clean up code --- src/app/(tabs)/search/index.tsx | 19 +++++++++++++------ src/components/PreviewCard/PreviewCard.tsx | 8 ++++---- src/queries/stories.tsx | 11 +++++++++-- src/queries/types.tsx | 1 - 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index 4bd2adc5..6163689c 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -20,7 +20,12 @@ import PreviewCard from '../../../components/PreviewCard/PreviewCard'; import RecentSearchCard from '../../../components/RecentSearchCard/RecentSearchCard'; import { fetchGenres } from '../../../queries/genres'; import { fetchAllStoryPreviews } from '../../../queries/stories'; -import { StoryPreview, RecentSearch, Genre, StoryPreviewWithPreloadedReactions } from '../../../queries/types'; +import { + StoryPreview, + RecentSearch, + Genre, + StoryPreviewWithPreloadedReactions, +} from '../../../queries/types'; import colors from '../../../styles/colors'; import globalStyles from '../../../styles/globalStyles'; import { GenreType } from '../genre'; @@ -62,9 +67,13 @@ const setRecentStory = async (recentStories: StoryPreview[]) => { }; function SearchScreen() { - const [allStories, setAllStories] = useState([]); + const [allStories, setAllStories] = useState< + StoryPreviewWithPreloadedReactions[] + >([]); const [allGenres, setAllGenres] = useState([]); - const [searchResults, setSearchResults] = useState([]); + const [searchResults, setSearchResults] = useState< + StoryPreviewWithPreloadedReactions[] + >([]); const [search, setSearch] = useState(''); const [filterVisible, setFilterVisible] = useState(false); const [recentSearches, setRecentSearches] = useState([]); @@ -75,9 +84,7 @@ function SearchScreen() { useEffect(() => { (async () => { - fetchAllStoryPreviews().then((stories) => - setAllStories(stories), - ); + fetchAllStoryPreviews().then(stories => setAllStories(stories)); fetchGenres().then((genres: Genre[]) => setAllGenres(genres)); getRecentSearch().then((searches: RecentSearch[]) => setRecentSearches(searches), diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index efc6cfde..b6cb634d 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -40,17 +40,17 @@ function PreviewCard({ excerpt, tags, pressFunction, - reactions: preloadedReactions = null + reactions: preloadedReactions = null, }: PreviewCardProps) { - const [reactions, setReactions] = useState(preloadedReactions); + const [reactions, setReactions] = useState( + preloadedReactions, + ); useEffect(() => { if (preloadedReactions != null) { return; } (async () => { - console.log("fetching reactions"); - const temp = await fetchAllReactionsToStory(storyId); if (temp != null) { setReactions(temp.map(r => r.reaction)); diff --git a/src/queries/stories.tsx b/src/queries/stories.tsx index 0dffc354..e48dc51b 100644 --- a/src/queries/stories.tsx +++ b/src/queries/stories.tsx @@ -1,7 +1,14 @@ -import { Story, StoryPreview, StoryCard, StoryPreviewWithPreloadedReactions } from './types'; +import { + Story, + StoryPreview, + StoryCard, + StoryPreviewWithPreloadedReactions, +} from './types'; import supabase from '../utils/supabase'; -export async function fetchAllStoryPreviews(): Promise { +export async function fetchAllStoryPreviews(): Promise< + StoryPreviewWithPreloadedReactions[] +> { const { data, error } = await supabase.rpc('fetch_all_story_previews'); if (error) { diff --git a/src/queries/types.tsx b/src/queries/types.tsx index b349433e..a7ce63a0 100644 --- a/src/queries/types.tsx +++ b/src/queries/types.tsx @@ -25,7 +25,6 @@ export interface StoryPreviewWithPreloadedReactions { reactions: string[]; } - export interface Author { id: number; name: string; From ba86b457f48367f2cd2c38cb132d17552b424cfb Mon Sep 17 00:00:00 2001 From: Aditya Pawar Date: Sun, 21 Apr 2024 11:28:09 -0700 Subject: [PATCH 10/13] Make content card use string[] --- src/components/ContentCard/ContentCard.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx index 7a0ad171..6d895f19 100644 --- a/src/components/ContentCard/ContentCard.tsx +++ b/src/components/ContentCard/ContentCard.tsx @@ -34,15 +34,16 @@ function ContentCard({ storyId, pressFunction, }: ContentCardProps) { - const [reactions, setReactions] = useState(); + const [reactions, setReactions] = useState(); useEffect(() => { (async () => { const temp = await fetchAllReactionsToStory(id); if (temp != null) { - setReactions(temp); + setReactions(temp.map(r => r.reaction)); return; } + setReactions([]); })(); }, []); From 4e1dd255117076a5d1976f608abaf64711036e05 Mon Sep 17 00:00:00 2001 From: Aditya Pawar Date: Sun, 21 Apr 2024 11:31:58 -0700 Subject: [PATCH 11/13] Add null checks for preview length --- src/components/ContentCard/ContentCard.tsx | 4 ++-- src/components/PreviewCard/PreviewCard.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx index 6d895f19..76d64234 100644 --- a/src/components/ContentCard/ContentCard.tsx +++ b/src/components/ContentCard/ContentCard.tsx @@ -87,10 +87,10 @@ function ContentCard({ - {/* heart, clap, muscle, cry, ??? */} + - {reactions?.length} + {reactions?.length ?? 0} diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index b6cb634d..f2816337 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -108,7 +108,7 @@ function PreviewCard({ {/* heart, clap, muscle, cry, ??? */} - {reactions?.length} + {reactions?.length ?? 0} From e2dd2a063ae5f8bd46baf6fb1935db39a53ed23e Mon Sep 17 00:00:00 2001 From: Aditya Pawar Date: Sun, 21 Apr 2024 12:54:17 -0700 Subject: [PATCH 12/13] Add reactions display component --- src/app/auth/verify/index.tsx | 1 + src/components/ContentCard/ContentCard.tsx | 19 +----- src/components/PreviewCard/PreviewCard.tsx | 19 +----- .../ReactionDisplay/ReactionDisplay.tsx | 60 +++++++++++++++++++ src/components/ReactionDisplay/styles.tsx | 27 +++++++++ .../SaveStoryButton/SaveStoryButton.tsx | 20 ++++--- 6 files changed, 104 insertions(+), 42 deletions(-) create mode 100644 src/components/ReactionDisplay/ReactionDisplay.tsx create mode 100644 src/components/ReactionDisplay/styles.tsx diff --git a/src/app/auth/verify/index.tsx b/src/app/auth/verify/index.tsx index a3b9406c..7eae7667 100644 --- a/src/app/auth/verify/index.tsx +++ b/src/app/auth/verify/index.tsx @@ -10,6 +10,7 @@ import globalStyles from '../../../styles/globalStyles'; import { useSession } from '../../../utils/AuthContext'; import Toast, { BaseToast, BaseToastProps } from 'react-native-toast-message'; import { Icon } from 'react-native-elements'; +import { text } from 'cheerio/lib/api/manipulation'; function VerificationScreen() { const { user, verifyOtp, resendVerification } = useSession(); diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx index 76d64234..c0ac44f7 100644 --- a/src/components/ContentCard/ContentCard.tsx +++ b/src/components/ContentCard/ContentCard.tsx @@ -14,6 +14,7 @@ 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'; type ContentCardProps = { id: number; @@ -77,23 +78,7 @@ function ContentCard({ - - - - - - - - - - - - - - {reactions?.length ?? 0} - - - + diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index f2816337..f561cd48 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -15,6 +15,7 @@ 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'; const placeholderImage = 'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2021/10/10120952/Girls-Write-Now-logo-avatar.png'; @@ -95,23 +96,7 @@ function PreviewCard({ - - - - - - - - - - - {/* heart, clap, muscle, cry, ??? */} - - - {reactions?.length ?? 0} - - - + {(tags?.length ?? 0) > 0 && ( diff --git a/src/components/ReactionDisplay/ReactionDisplay.tsx b/src/components/ReactionDisplay/ReactionDisplay.tsx new file mode 100644 index 00000000..0bfb0970 --- /dev/null +++ b/src/components/ReactionDisplay/ReactionDisplay.tsx @@ -0,0 +1,60 @@ +import { Text, View } from 'react-native'; +import styles from './styles'; +import Emoji from 'react-native-emoji'; +import globalStyles from '../../styles/globalStyles'; + +type ReactionDisplayProps = { + reactions: string[]; +}; + +function ReactionDisplay({ reactions }: ReactionDisplayProps) { + const reactionColors: Record = { + heart: '#FFCCCB', + clap: '#FFD580', + cry: '#89CFF0', + hugging_face: '#ffc3bf', + muscle: '#eddcf7', + }; + const defaultColor = reactionColors['heart']; + const setOfReactions = [...reactions]; + setOfReactions.push('heart'); + setOfReactions.push('clap'); + setOfReactions.push('muscle'); + + const reactionDisplay = [...new Set(setOfReactions)].slice(0, 3); + + return ( + + {reactionDisplay.map(reaction => { + return ( + + + + ); + })} + + + {reactions?.length ?? 0} + + + + ); +} + +export default ReactionDisplay; diff --git a/src/components/ReactionDisplay/styles.tsx b/src/components/ReactionDisplay/styles.tsx new file mode 100644 index 00000000..e0d37ab4 --- /dev/null +++ b/src/components/ReactionDisplay/styles.tsx @@ -0,0 +1,27 @@ +import { StyleSheet } from 'react-native'; +import colors from '../../styles/colors'; + +const styles = StyleSheet.create({ + reactions: { + width: 32, + height: 32, + borderRadius: 32 / 2, + borderWidth: 1, + backgroundColor: '#89CFF0', //different per emoji reaction + borderColor: 'white', + marginTop: 10, + marginRight: -5, // -10 + overflow: 'hidden', + justifyContent: 'center', + paddingLeft: 4, + }, + reactionText: { + color: colors.grey, + }, + reactionNumber: { + marginLeft: 16, + marginTop: 16, + }, +}); + +export default styles; diff --git a/src/components/SaveStoryButton/SaveStoryButton.tsx b/src/components/SaveStoryButton/SaveStoryButton.tsx index c4d43315..be44ebb9 100644 --- a/src/components/SaveStoryButton/SaveStoryButton.tsx +++ b/src/components/SaveStoryButton/SaveStoryButton.tsx @@ -11,17 +11,27 @@ import { TouchableOpacity } from 'react-native-gesture-handler'; type SaveStoryButtonProps = { storyId: number; + defaultState?: boolean | null; }; const saveStoryImage = require('../../../assets/save_story.png'); const savedStoryImage = require('../../../assets/saved_story.png'); -export default function SaveStoryButton({ storyId }: SaveStoryButtonProps) { +export default function SaveStoryButton({ + storyId, + defaultState = null, +}: SaveStoryButtonProps) { const { user } = useSession(); - const [storyIsSaved, setStoryIsSaved] = useState(false); + const [storyIsSaved, setStoryIsSaved] = useState( + defaultState, + ); const { channels, initializeChannel, publish } = usePubSub(); useEffect(() => { + if (defaultState != null) { + return; + } + isStoryInReadingList(storyId, user?.id).then(storyInReadingList => { setStoryIsSaved(storyInReadingList); initializeChannel(storyId); @@ -35,12 +45,6 @@ export default function SaveStoryButton({ storyId }: SaveStoryButtonProps) { } }, [channels[storyId]]); - useEffect(() => { - isStoryInReadingList(storyId, user?.id).then(storyInReadingList => - setStoryIsSaved(storyInReadingList), - ); - }, [storyId]); - const saveStory = async (saved: boolean) => { setStoryIsSaved(saved); publish(storyId, saved); // update other cards with this story From 6e5fcd95ab7e00fb815c9e9f38afce349e8ff739 Mon Sep 17 00:00:00 2001 From: Aditya Pawar Date: Sun, 21 Apr 2024 14:29:11 -0700 Subject: [PATCH 13/13] Run prettier --- src/app/auth/verify/index.tsx | 9 ++------- src/components/PreviewCard/PreviewCard.tsx | 1 - 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/app/auth/verify/index.tsx b/src/app/auth/verify/index.tsx index fe231b67..a14cf766 100644 --- a/src/app/auth/verify/index.tsx +++ b/src/app/auth/verify/index.tsx @@ -1,10 +1,9 @@ -import { Link, Redirect, router, useLocalSearchParams } from 'expo-router'; +import { Redirect, router, useLocalSearchParams } from 'expo-router'; import { useState, useRef, useEffect } from 'react'; import { View, Text } from 'react-native'; -import { Icon } from 'react-native-elements'; import OTPTextInput from 'react-native-otp-textinput'; import { SafeAreaView } from 'react-native-safe-area-context'; -import Toast, { BaseToast, BaseToastProps } from 'react-native-toast-message'; +import Toast from 'react-native-toast-message'; import styles from './styles'; import BackButton from '../../../components/BackButton/BackButton'; @@ -12,10 +11,6 @@ import colors from '../../../styles/colors'; import globalStyles from '../../../styles/globalStyles'; import { useSession } from '../../../utils/AuthContext'; -import Toast, { BaseToast, BaseToastProps } from 'react-native-toast-message'; -import { Icon } from 'react-native-elements'; - - function VerificationScreen() { const { user, verifyOtp, resendVerification } = useSession(); const [errorMessage, setErrorMessage] = useState(''); diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index 656d7066..f561cd48 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -43,7 +43,6 @@ function PreviewCard({ pressFunction, reactions: preloadedReactions = null, }: PreviewCardProps) { - const [reactions, setReactions] = useState( preloadedReactions, );