Merge branch 'main' into marcos/fetch-reactions2

calblueprint · Apr 21, 2024 · efb0255 · efb0255
2 parents e2dd2a0 + e0ffb52
commit efb0255
Show file tree

Hide file tree

Showing 18 changed files with 189 additions and 204 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
@@ -34,6 +34,7 @@ function TabNav() {
 
   return (
     <Tabs
+      backBehavior="history"
       screenOptions={{
         tabBarLabelStyle: { fontSize: 14 },
         tabBarHideOnKeyboard: true,

diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx
@@ -52,7 +52,7 @@ function AuthorScreen() {
 
   return (
     <SafeAreaView
-      style={[globalStyles.tabBarContainer, { marginHorizontal: -8 }]}
+      style={[globalStyles.tabBarContainer, { paddingHorizontal: 22 }]}
     >
       {isLoading ? (
         <ActivityIndicator />
@@ -139,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>

diff --git a/src/app/(tabs)/author/styles.tsx b/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',

diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
@@ -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]}> */}
@@ -297,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])}

diff --git a/src/app/(tabs)/genre/styles.tsx b/src/app/(tabs)/genre/styles.tsx
@@ -10,7 +10,6 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 24,
     width: '100%',
-    marginTop: 24,
     flex: 1,
   },
 

diff --git a/src/app/(tabs)/settings/index.tsx b/src/app/(tabs)/settings/index.tsx
@@ -8,19 +8,20 @@ import {
   Pressable,
   Appearance,
 } from 'react-native';
+import { Icon } from 'react-native-elements';
 import { ScrollView } from 'react-native-gesture-handler';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { Icon } from 'react-native-elements';
 
 import styles from './styles';
-import colors from '../../../styles/colors';
 import AccountDataDisplay from '../../../components/AccountDataDisplay/AccountDataDisplay';
+import BackButton from '../../../components/BackButton/BackButton';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserSelectorInput from '../../../components/UserSelectorInput/UserSelectorInput';
+import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import supabase from '../../../utils/supabase';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 
 function SettingsScreen() {
   const { session, signOut } = useSession();
@@ -180,16 +181,12 @@ function SettingsScreen() {
       edges={['right', 'left', 'top', 'bottom']}
     >
       <ScrollView
-        bounces={true}
+        bounces
         contentContainerStyle={styles.main}
         showsVerticalScrollIndicator={false}
       >
         <View>
-          <Link href="/home" style={styles.back}>
-            <Text style={[globalStyles.subtext, styles.backText]}>
-              {'<Back'}
-            </Text>
-          </Link>
+          <BackButton pressFunction={() => router.back()} />
           <View>
             <DateTimePickerModal
               isVisible={showDatePicker}
@@ -229,7 +226,7 @@ function SettingsScreen() {
                           type="material"
                           color={colors.darkGrey}
                           style={styles.icon}
-                        ></Icon>
+                        />
                       </View>
                     </Pressable>
                   </View>

diff --git a/src/app/(tabs)/settings/styles.tsx b/src/app/(tabs)/settings/styles.tsx
@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+
 import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
@@ -27,16 +28,6 @@ export default StyleSheet.create({
   heading: {
     paddingBottom: 20,
   },
-  back: {
-    paddingTop: 30,
-    paddingBottom: 16,
-    color: '#797979',
-    fontSize: 12,
-    fontWeight: '400',
-  },
-  backText: {
-    color: colors.darkGrey,
-  },
   staticData: {
     flexDirection: 'row',
     flexWrap: 'wrap',

diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
@@ -16,6 +16,7 @@ import { RenderHTML } from 'react-native-render-html';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
+import BackButton from '../../../components/BackButton/BackButton';
 import { fetchStory } from '../../../queries/stories';
 import { Story } from '../../../queries/types';
 import colors from '../../../styles/colors';
@@ -74,6 +75,8 @@ function StoryScreen() {
           ref={scrollRef}
           showsVerticalScrollIndicator={false}
         >
+          <BackButton pressFunction={() => router.back()} />
+
           <Text style={[globalStyles.h1, styles.title]}>{story?.title}</Text>
 
           <TouchableOpacity

diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts
@@ -1,11 +1,11 @@
 import { StyleSheet } from 'react-native';
+
 import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   container: {
     paddingLeft: 24,
     paddingRight: 24,
-    paddingTop: 48,
   },
   authorImage: {
     backgroundColor: '#D9D9D9',

diff --git a/src/app/auth/forgotPassword/index.tsx b/src/app/auth/forgotPassword/index.tsx
@@ -1,17 +1,19 @@
 import { router, Link } from 'expo-router';
 import { useState, useRef, useEffect } from 'react';
 import { Alert, Text, View } from 'react-native';
-import validator from 'validator';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useDebounce } from 'use-debounce';
+import validator from 'validator';
 
 import styles from './styles';
-import globalStyles from '../../../styles/globalStyles';
-import { useSession } from '../../../utils/AuthContext';
-import UserStringInput from '../../../components/UserStringInput/UserStringInput';
+import BackButton from '../../../components/BackButton/BackButton';
 import StyledButton from '../../../components/StyledButton/StyledButton';
-import { isEmailTaken } from '../../../queries/profiles';
+import UserStringInput from '../../../components/UserStringInput/UserStringInput';
 import { queryEmailByUsername } from '../../../queries/auth';
+import { isEmailTaken } from '../../../queries/profiles';
 import colors from '../../../styles/colors';
+import globalStyles from '../../../styles/globalStyles';
+import { useSession } from '../../../utils/AuthContext';
 
 function ForgotPasswordScreen() {
   const { resetPassword } = useSession();
@@ -71,10 +73,8 @@ function ForgotPasswordScreen() {
   };
 
   return (
-    <View style={styles.container}>
-      <Link href="/auth/login" style={styles.back}>
-        <Text style={[globalStyles.subtext, styles.backText]}>{'<Back'}</Text>
-      </Link>
+    <SafeAreaView style={styles.container}>
+      <BackButton pressFunction={() => router.back()} />
       <View style={styles.body}>
         <View>
           <Text style={[globalStyles.h1, styles.heading]}>
@@ -106,7 +106,7 @@ function ForgotPasswordScreen() {
           />
         </View>
       </View>
-    </View>
+    </SafeAreaView>
   );
 }
 

diff --git a/src/app/auth/forgotPassword/styles.tsx b/src/app/auth/forgotPassword/styles.tsx
@@ -1,20 +1,18 @@
 import { StyleSheet } from 'react-native';
+
 import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
   container: {
     flex: 1,
-    paddingVertical: 32,
-    paddingLeft: 30,
-    paddingRight: 30,
+    marginHorizontal: 42,
   },
   heading: {
     paddingBottom: 8,
   },
   body: {
     flex: 1,
     justifyContent: 'space-between',
-    paddingHorizontal: 12,
   },
   button: {
     paddingBottom: 40,
@@ -23,14 +21,4 @@ export default StyleSheet.create({
     paddingVertical: 18,
     color: colors.darkGrey,
   },
-  back: {
-    paddingTop: 30,
-    paddingBottom: 16,
-    color: colors.darkGrey,
-    fontSize: 12,
-    fontWeight: '400',
-  },
-  backText: {
-    color: colors.darkGrey,
-  },
 });
diff --git a/src/app/auth/verify/index.tsx b/src/app/auth/verify/index.tsx
@@ -1,16 +1,20 @@
 import { Link, 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 styles from './styles';
+import BackButton from '../../../components/BackButton/BackButton';
 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';
-import { text } from 'cheerio/lib/api/manipulation';
+
 
 function VerificationScreen() {
   const { user, verifyOtp, resendVerification } = useSession();
@@ -87,51 +91,48 @@ function VerificationScreen() {
 
   return (
     <SafeAreaView style={[globalStyles.authContainer, styles.container]}>
-      <Link href="/auth/signup" style={[globalStyles.subtext, styles.back]}>
-        <Text>{'<Back'}</Text>
-      </Link>
-      <View style={styles.marginHorizontal}>
-        <Text style={[globalStyles.h1, styles.title]}>
-          Enter Verification Code{' '}
+      <BackButton pressFunction={() => router.back()} />
+
+      <Text style={[globalStyles.h1, styles.title]}>
+        Enter Verification Code{' '}
+      </Text>
+
+      <Text style={[globalStyles.subtext, styles.sent]}>
+        We have sent the verification code to {renderBlurredEmail()}
+      </Text>
+
+      <OTPTextInput
+        ref={inputRef}
+        inputCount={6}
+        defaultValue={userInput}
+        inputCellLength={1}
+        handleTextChange={setUserInput}
+        containerStyle={styles.otpContainerStyle}
+        textInputStyle={styles.otpTextInputStyle}
+        // isValid={!showErrorMessage}
+        keyboardType="number-pad"
+        autoFocus
+        tintColor={colors.black}
+        offTintColor={colors.black}
+      />
+
+      <View style={{ flexDirection: 'row' }}>
+        <Text style={globalStyles.subtext}>Didn't receive a code?</Text>
+        <Text
+          style={[globalStyles.subtextBold, styles.resendButton]}
+          onPress={resendCode}
+        >
+          Resend Code
         </Text>
-
-        <Text style={[globalStyles.subtext, styles.sent]}>
-          We have sent the verification code to {renderBlurredEmail()}
-        </Text>
-
-        <OTPTextInput
-          ref={inputRef}
-          inputCount={6}
-          defaultValue={userInput}
-          inputCellLength={1}
-          handleTextChange={setUserInput}
-          containerStyle={styles.otpContainerStyle}
-          textInputStyle={styles.otpTextInputStyle}
-          // isValid={!showErrorMessage}
-          keyboardType="number-pad"
-          autoFocus={true}
-          tintColor={colors.black}
-          offTintColor={colors.black}
-        />
-
-        <View style={{ flexDirection: 'row' }}>
-          <Text style={globalStyles.subtext}>Didn't receive a code?</Text>
-          <Text
-            style={[globalStyles.subtextBold, styles.resendButton]}
-            onPress={resendCode}
-          >
-            Resend Code
+      </View>
+      {errorMessage && (
+        <View style={styles.errorContainer}>
+          {showX && <Text style={styles.x}>x</Text>}
+          <Text style={[globalStyles.errorMessage, styles.errorMessage]}>
+            {errorMessage}
           </Text>
         </View>
-        {errorMessage && (
-          <View style={styles.errorContainer}>
-            {showX && <Text style={styles.x}>x</Text>}
-            <Text style={[globalStyles.errorMessage, styles.errorMessage]}>
-              {errorMessage}
-            </Text>
-          </View>
-        )}
-      </View>
+      )}
     </SafeAreaView>
   );
 }