Merge branch 'main' into emily/reactionStyles

.github/workflows/lint.yml

@@ -6,9 +6,6 @@ name: Lint
 #############################
 on:
   push:
-    branches-ignore: [main]
-  pull_request:
-    branches: [main]
 
 ###############
 # Set the Job #

.gitignore

@@ -34,3 +34,6 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+.vscode/
+eas.json

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.formatDocument": true,
-    "source.fixAll.eslint": true
+    "source.formatDocument": "explicit",
+    "source.fixAll.eslint": "explicit"
   }
 }

package.json

@@ -23,8 +23,8 @@
     "@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-community/datetimepicker": "7.2.0",
+    "@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",
     "@react-navigation/native": "^6.1.8",
@@ -33,7 +33,9 @@
     "@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",
     "dom-parser": "^0.1.6",
     "expo": "~49.0.11",
@@ -44,25 +46,34 @@
     "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",
+    "react-native-modal-datetime-picker": "^17.1.0",
+    "react-native-neat-date-picker": "^1.4.12",
     "react-native-otp-textinput": "^1.1.3",
     "react-native-paper": "^5.10.6",
+    "react-native-paper-dates": "^0.22.3",
     "react-native-render-html": "^6.3.4",
     "react-native-root-siblings": "^4.1.1",
-    "react-native-root-toast": "^3.5.1",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0",
+    "react-native-toast-message": "^2.2.0",
+    "react-native-ui-datepicker": "^2.0.2",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^10.0.2",
     "react-scroll-to-top": "^3.0.0",
-    "validator": "^13.11.0"
+    "use-debounce": "^10.0.0",
+    "validator": "^13.11.0",
+    "expo-image": "~1.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -74,8 +85,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

@@ -1,5 +1,5 @@
 import { Tabs } from 'expo-router';
-import { Platform } from 'react-native';
+import { Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Icon from '../../../assets/icons';
@@ -34,6 +34,7 @@ function TabNav() {
 
   return (
     <Tabs
+      backBehavior="history"
       screenOptions={{
         tabBarLabelStyle: { fontSize: 14 },
         tabBarHideOnKeyboard: true,
@@ -45,6 +46,7 @@ function TabNav() {
             Platform.OS === 'ios' ? insets.bottom : insets.bottom + 8,
           height: 68 + insets.bottom,
           backgroundColor: colors.white,
+          position: 'absolute',
         },
       }}
     >
@@ -54,7 +56,6 @@ function TabNav() {
           headerShown: false,
           tabBarLabel: 'Home',
           tabBarIcon: ({ color }) => HomeIcon({ color }),
-          // tabBarLabelStyle: { borderTopWidth: 12, paddingTop: 12 },
         }}
       />
       <Tabs.Screen
@@ -87,6 +88,13 @@ function TabNav() {
           tabBarIcon: ({ color }) => LibraryIcon({ color }),
         }}
       />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          headerShown: false,
+          href: null,
+        }}
+      />
       <Tabs.Screen
         name="genre"
         options={{

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

@@ -1,12 +1,12 @@
+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';
 import BackButton from '../../../components/BackButton/BackButton';
-import ContentCard from '../../../components/ContentCard/ContentCard';
 import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import {
@@ -46,14 +46,20 @@ function AuthorScreen() {
     })();
   }, [author]);
 
+  const getTextFromHtml = (text: string) => {
+    return cheerio.load(text).text().trim();
+  };
+
   return (
-    <SafeAreaView style={[globalStyles.container, { marginHorizontal: -8 }]}>
+    <SafeAreaView
+      style={[globalStyles.tabBarContainer, { paddingHorizontal: 22 }]}
+    >
       {isLoading ? (
         <ActivityIndicator />
       ) : (
         <ScrollView
           showsVerticalScrollIndicator={false}
-          bounces={false}
+          bounces
           contentContainerStyle={{ paddingHorizontal: 8 }}
         >
           <BackButton pressFunction={() => router.back()} />
@@ -68,12 +74,14 @@ function AuthorScreen() {
                 <Text
                   adjustsFontSizeToFit
                   numberOfLines={2}
-                  style={styles.name}
+                  style={globalStyles.h1}
                 >
-                  {authorInfo.name}
+                  {getTextFromHtml(authorInfo.name)}
                 </Text>
                 {authorInfo?.pronouns && (
-                  <Text style={styles.pronouns}>{authorInfo.pronouns}</Text>
+                  <Text style={[globalStyles.subHeading2, styles.pronouns]}>
+                    {authorInfo.pronouns}
+                  </Text>
                 )}
               </View>
             )}
@@ -83,18 +91,22 @@ function AuthorScreen() {
 
           {authorInfo?.bio && (
             <>
-              <Text style={styles.bioText}>{decode(authorInfo.bio)}</Text>
+              <Text style={globalStyles.body1}>
+                {getTextFromHtml(authorInfo.bio)}
+              </Text>
               <HorizontalLine />
             </>
           )}
 
           {authorInfo?.artist_statement && (
             <>
-              <Text style={styles.authorStatementTitle}>
+              <Text
+                style={[globalStyles.body2Bold, styles.authorStatementTitle]}
+              >
                 Artist's Statement
               </Text>
-              <Text style={styles.authorStatement}>
-                {decode(authorInfo.artist_statement)}
+              <Text style={globalStyles.body1}>
+                {getTextFromHtml(authorInfo.artist_statement)}
               </Text>
               <HorizontalLine />
             </>
@@ -110,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}
@@ -124,6 +137,9 @@ function AuthorScreen() {
               }
             />
           ))}
+
+          {/* View so there's space between the tab bar and the stories */}
+          <View style={{ paddingBottom: 10 }} />
         </ScrollView>
       )}
     </SafeAreaView>

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

@@ -4,34 +4,17 @@ import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   authorCardContainer: {
-    marginTop: 16,
     marginBottom: 8,
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'flex-end',
   },
-  name: {
-    fontWeight: 'bold',
-    fontSize: 24,
-    fontFamily: 'Manrope-Regular',
-  },
   image: {
     height: 68,
     width: 68,
     backgroundColor: colors.darkGrey,
     borderRadius: 4,
   },
-  bioText: {
-    color: 'black',
-    fontFamily: 'Manrope-Regular',
-    fontSize: 14,
-  },
-  authorStatement: {
-    fontSize: 14,
-    color: 'black',
-    fontWeight: '400',
-    fontFamily: 'Manrope-Regular',
-  },
   authorTextContainer: {
     paddingLeft: 20,
   },
@@ -40,17 +23,14 @@ const styles = StyleSheet.create({
     borderTopWidth: 20,
   },
   authorStatementTitle: {
-    fontWeight: 'bold',
-    fontFamily: 'Manrope-Regular',
-    fontSize: 16,
     marginBottom: 8,
   },
   storyCountText: {
     fontSize: 12,
     marginBottom: 8,
   },
   pronouns: {
-    color: '#797979',
+    color: colors.textGrey,
   },
 });