Merge branch 'main' into adi/deployment

package.json

@@ -30,6 +30,7 @@
     "@rneui/themed": "^4.0.0-rc.8",
     "@supabase/supabase-js": "^2.36.0",
     "@types/validator": "^13.11.5",
+    "@xenova/transformers": "^2.16.1",
     "axios": "^1.5.0",
     "cheerio": "^1.0.0-rc.12",
     "deprecated-react-native-prop-types": "^4.2.1",
@@ -42,10 +43,13 @@
     "expo-status-bar": "~1.6.0",
     "html-entities": "^2.4.0",
     "react": "18.2.0",
+    "react-apple-emojis": "^2.2.1",
     "react-native": "0.72.10",
     "react-native-dom-parser": "^1.5.3",
     "react-native-element-dropdown": "^2.10.0",
     "react-native-elements": "^3.4.3",
+    "react-native-emoji": "^1.8.0",
+    "react-native-emojicon": "^1.0.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-htmlview": "^0.16.0",
     "react-native-ionicons": "^4.6.5",
@@ -65,7 +69,8 @@
     "react-native-vector-icons": "^10.0.2",
     "react-scroll-to-top": "^3.0.0",
     "use-debounce": "^10.0.0",
-    "validator": "^13.11.0"
+    "validator": "^13.11.0",
+    "expo-image": "~1.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -77,8 +82,7 @@
     "eslint-config-universe": "^12.0.0",
     "husky": "^8.0.3",
     "prettier": "^3.0.3",
-    "supabase": "^1.110.1",
-    "typescript": "^5.1.3"
+    "supabase": "^1.110.1"
   },
   "private": true
 }

src/app/(tabs)/_layout.tsx

@@ -34,6 +34,7 @@ function TabNav() {
 
   return (
     <Tabs
+      backBehavior="history"
       screenOptions={{
         tabBarLabelStyle: { fontSize: 14 },
         tabBarHideOnKeyboard: true,

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

@@ -1,7 +1,8 @@
+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 { ActivityIndicator, ScrollView, View, Text } from 'react-native';
+import { Image } from 'expo-image';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
@@ -14,7 +15,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<Author>();
@@ -52,14 +52,14 @@ function AuthorScreen() {
 
   return (
     <SafeAreaView
-      style={[globalStyles.tabBarContainer, { marginHorizontal: -8 }]}
+      style={[globalStyles.tabBarContainer, { paddingHorizontal: 22 }]}
     >
       {isLoading ? (
         <ActivityIndicator />
       ) : (
         <ScrollView
           showsVerticalScrollIndicator={false}
-          bounces={true}
+          bounces
           contentContainerStyle={{ paddingHorizontal: 8 }}
         >
           <BackButton pressFunction={() => router.back()} />
@@ -122,6 +122,7 @@ function AuthorScreen() {
           {authorStoryPreview?.map(story => (
             <PreviewCard
               key={story.title}
+              storyId={story.id}
               title={story.title}
               image={story.featured_media}
               author={story.author_name}
@@ -138,7 +139,7 @@ function AuthorScreen() {
           ))}
 
           {/* View so there's space between the tab bar and the stories */}
-          <View style={{ paddingBottom: 10 }}></View>
+          <View style={{ paddingBottom: 10 }} />
         </ScrollView>
       )}
     </SafeAreaView>

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

@@ -4,7 +4,6 @@ import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   authorCardContainer: {
-    marginTop: 16,
     marginBottom: 8,
     flexDirection: 'row',
     justifyContent: 'flex-start',

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,
@@ -14,11 +14,11 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import BackButton from '../../../components/BackButton/BackButton';
+import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import { fetchGenreStoryById } from '../../../queries/genres';
 import { fetchStoryPreviewByIds } from '../../../queries/stories';
 import { StoryPreview, GenreStories } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
-import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 
 function GenreScreen() {
   const [genreStoryData, setGenreStoryData] = useState<GenreStories[]>();
@@ -47,13 +47,13 @@ function GenreScreen() {
 
   useEffect(() => {
     const checkTopic = (preview: StoryPreview): boolean => {
-      if (preview == null || preview.topic == null) return false;
+      if (preview?.topic == null) return false;
       if (selectedTopicsForFiltering.length == 0) return true;
       else
         return selectedTopicsForFiltering.every(t => preview.topic.includes(t));
     };
     const checkTone = (preview: StoryPreview): boolean => {
-      if (preview == null || preview.tone == null) return false;
+      if (preview?.tone == null) return false;
       if (selectedTonesForFiltering.length == 0) return true;
       else
         return selectedTonesForFiltering.every(t => preview.tone.includes(t));
@@ -202,7 +202,7 @@ function GenreScreen() {
   const renderGenreHeading = () => {
     return (
       <View>
-        <Text style={[globalStyles.h1, { marginTop: 15 }]}>
+        <Text style={globalStyles.h1}>
           {selectedSubgenre === 'All' ? mainGenre : selectedSubgenre}
         </Text>
         {/* <Text style={[globalStyles.subHeading1]}> */}
@@ -272,6 +272,7 @@ function GenreScreen() {
         renderItem={({ item }) => (
           <PreviewCard
             key={item.id}
+            storyId={item.id}
             tags={item.genre_medium.concat(item.tone).concat(item.topic)}
             author={item.author_name}
             image={item.featured_media}
@@ -296,13 +297,7 @@ function GenreScreen() {
     >
       <View style={styles.container}>
         <View style={styles.headerContainer}>
-          <BackButton
-            pressFunction={() =>
-              router.push({
-                pathname: '/search',
-              })
-            }
-          />
+          <BackButton pressFunction={() => router.back()} />
 
           {useMemo(renderGenreHeading, [selectedSubgenre, mainGenre])}
           {useMemo(renderGenreScrollSelector, [subgenres, selectedSubgenre])}

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

@@ -10,7 +10,6 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 24,
     width: '100%',
-    marginTop: 24,
     flex: 1,
   },