Merge branch 'main' into kyle/styleForgotPassword

.gitignore

@@ -34,3 +34,5 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+.vscode/

.vscode/settings.json

@@ -2,6 +2,5 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.formatDocument": "explicit",
-    "source.fixAll.eslint": "explicit"
   }
 }

package.json

@@ -32,6 +32,7 @@
     "@types/validator": "^13.11.5",
     "async-mutex": "^0.4.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",
@@ -53,10 +54,10 @@
     "react-native-paper": "^5.10.6",
     "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-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^10.0.2",
     "react-scroll-to-top": "^3.0.0",

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

@@ -7,7 +7,6 @@ import styles from './styles';
 import Icon from '../../../../assets/icons';
 import ContentCard from '../../../components/ContentCard/ContentCard';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
-import RecentSearchCard from '../../../components/RecentSearchCard/RecentSearchCard';
 import { fetchUsername } from '../../../queries/profiles';
 import {
   fetchFeaturedStoriesDescription,

src/app/_layout.tsx

@@ -2,6 +2,7 @@ import { Stack } from 'expo-router';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { AuthContextProvider } from '../utils/AuthContext';
+import ToastComponent from '../components/Toast/Toast';
 
 function StackLayout() {
   return (
@@ -14,6 +15,7 @@ function StackLayout() {
           <Stack.Screen name="auth" options={{ headerShown: false }} />
         </Stack>
       </AuthContextProvider>
+      <ToastComponent />
     </SafeAreaProvider>
   );
 }

src/app/auth/_layout.tsx

@@ -8,6 +8,7 @@ function StackLayout() {
       <Stack.Screen name="onboarding" options={{ headerShown: false }} />
       <Stack.Screen name="verify" options={{ headerShown: false }} />
       <Stack.Screen name="forgotPassword" options={{ headerShown: false }} />
+      <Stack.Screen name="resetPassword" options={{ headerShown: false }} />
     </Stack>
   );
 }

src/app/auth/login/index.tsx

@@ -9,8 +9,8 @@ import styles from './styles';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserStringInput from '../../../components/UserStringInput/UserStringInput';
 import { isEmailUsed, queryEmailByUsername } from '../../../queries/auth';
-import globalStyles from '../../../styles/globalStyles';
 import colors from '../../../styles/colors';
+import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 
 function LoginScreen() {
@@ -72,7 +72,6 @@ function LoginScreen() {
         <Text style={[globalStyles.h1, styles.title]}>
           {'Read stories from \nyoung creators'}
         </Text>
-
         <UserStringInput
           placeholder="Email or Username"
           label="Email or Username"
@@ -101,7 +100,6 @@ function LoginScreen() {
             onPress={() => setPasswordTextHidden(!passwordTextHidden)}
           />
         </UserStringInput>
-
         <Link
           style={[globalStyles.bodyUnderline, styles.forgotPassword]}
           href="/auth/forgotPassword"
@@ -120,12 +118,12 @@ function LoginScreen() {
           />
         </View>
 
-        <Text style={[globalStyles.body1, styles.redirectText]}>
-          Don&apos;t have an account?{' '}
+        <View style={styles.redirectText}>
+          <Text style={globalStyles.body1}>Don&apos;t have an account?</Text>
           <Link style={globalStyles.bodyBoldUnderline} href="/auth/signup">
             Sign Up
           </Link>
-        </Text>
+        </View>
       </View>
     </SafeAreaView>
   );

src/app/auth/login/styles.tsx

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
   flex: {
@@ -14,7 +13,9 @@ export default StyleSheet.create({
     textDecorationLine: 'underline',
   },
   redirectText: {
-    textAlign: 'center',
+    gap: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
     marginTop: 16,
     marginBottom: 64,
   },

src/app/auth/onboarding/index.tsx

@@ -1,18 +1,19 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
 import { Redirect, router } from 'expo-router';
 import { useState, useEffect } from 'react';
-import { Alert, ScrollView, Platform, Text } from 'react-native';
+import { Alert, ScrollView, Platform, Text, View } from 'react-native';
+import { Icon } from 'react-native-elements';
 
 import styles from './styles';
 import StyledButton from '../../../components/StyledButton/StyledButton';
+import UserSelectorInput from '../../../components/UserSelectorInput/UserSelectorInput';
+import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import supabase from '../../../utils/supabase';
-import globalStyles from '../../../styles/globalStyles';
-import UserSelectorInput from '../../../components/UserSelectorInput/UserSelectorInput';
-import DateTimePicker from '@react-native-community/datetimepicker';
 // import DatePicker from '../../../components/DatePicker/DatePicker';
 
 function OnboardingScreen() {
-  const { session } = useSession();
+  const { session, user } = useSession();
   const [loading, setLoading] = useState(true);
   const [firstName, setFirstName] = useState('');
   const [username, setUsername] = useState('');
@@ -116,8 +117,19 @@ function OnboardingScreen() {
 
   return (
     <ScrollView style={styles.container}>
-      <Text style={globalStyles.h1}>Welcome, {username}</Text>
-
+      <Text style={[globalStyles.h1, styles.h1]}>
+        Welcome, {user?.user_metadata.username}
+      </Text>
+      <Text style={[globalStyles.body1, styles.body1]}>
+        Input your profile information below.
+      </Text>
+      <View style={styles.info}>
+        <Icon type="material" name="info-outline" color="#797979" />
+        <Text style={[globalStyles.subtext, styles.subtext]}>
+          This information is only used for outreach efforts, and will not be
+          visible to other users on the app.
+        </Text>
+      </View>
       <UserSelectorInput
         options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
         label="Gender"

src/app/auth/onboarding/styles.tsx

@@ -1,21 +1,28 @@
 import { StyleSheet } from 'react-native';
 
+import colors from '../../../styles/colors';
+
 export default StyleSheet.create({
-  input: {
-    height: 40,
-    borderColor: 'gray',
-    borderWidth: 1,
-    marginTop: 10,
-    padding: 5,
-  },
-  verticallySpaced: {
-    paddingTop: 4,
-    paddingBottom: 4,
-    alignSelf: 'stretch',
-  },
   container: {
     paddingVertical: 63,
     paddingLeft: 43,
     paddingRight: 44,
   },
+  subtext: {
+    color: colors.darkGrey,
+    marginLeft: 8,
+  },
+  h1: {
+    marginTop: 66,
+  },
+  body1: {
+    marginTop: 26,
+  },
+  info: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: 12,
+    marginBottom: 16,
+    width: 250,
+  },
 });

src/app/auth/resetPassword/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;