[apple review] Guest users (#100)

* Fix deps * Add alerts for guest users * Fix library for guests * Small fixes * Fix type error * Fix some styling * Fix filtering styling
calblueprint · Sep 30, 2024 · d60a06d · d60a06d
1 parent 58e8ab2
commit d60a06d
Show file tree

Hide file tree

Showing 24 changed files with 4,561 additions and 3,256 deletions.
diff --git a/assets/icons.tsx b/assets/icons.tsx
@@ -17,6 +17,7 @@ export type IconType =
   | 'home_inactive'
   | 'search_inactive'
   | 'library_inactive'
+  | 'library_disabled'
   | 'home_active'
   | 'search_active'
   | 'library_active';
@@ -246,6 +247,25 @@ const IconSvgs: Record<IconType, React.ReactElement> = {
         </svg>`}
     />
   ),
+  library_disabled: (
+    <SvgXml
+      xml={`<svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="23"
+          height="23"
+          viewBox="0 0 23 23"
+          fill="none"
+        >
+          <path
+            d="M7.66683 3.83325H6.90016C5.82683 3.83325 5.29016 3.83325 4.88 4.04217C4.51933 4.22587 4.22611 4.51908 4.04241 4.87975C3.8335 5.28992 3.8335 5.82659 3.8335 6.89992V16.0999C3.8335 17.1733 3.8335 17.7099 4.04241 18.1201C4.22617 18.4807 4.51937 18.7739 4.88 18.9577C5.2892 19.1666 5.82587 19.1666 6.89729 19.1666H7.66683M7.66683 3.83325H16.1002C17.1735 3.83325 17.7102 3.83325 18.1194 4.04217C18.4807 4.22617 18.7739 4.51846 18.9579 4.87975C19.1668 5.28896 19.1668 5.82563 19.1668 6.89704V16.1038C19.1668 17.1752 19.1668 17.7109 18.9579 18.1201C18.7738 18.4808 18.4803 18.774 18.1194 18.9577C17.7102 19.1666 17.1745 19.1666 16.103 19.1666H7.66683M7.66683 3.83325V19.1666M11.5002 10.5416H15.3335M11.5002 7.66659H15.3335"
+            stroke="#A19F9F"
+            strokeWidth="1.91667"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>`}
+    />
+  ),
 };
 
 type Props = {

diff --git a/babel.config.js b/babel.config.js
@@ -2,6 +2,5 @@ module.exports = api => {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: ['expo-router/babel'],
   };
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,16 +15,16 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@expo-google-fonts/manrope": "^0.2.3",
-    "@expo/vector-icons": "^13.0.0",
+    "@expo/vector-icons": "^14.0.3",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@mui/icons-material": "^5.14.13",
     "@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.23.1",
+    "@react-native-community/datetimepicker": "^8.0.1",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",
     "@react-navigation/native": "^6.1.8",
@@ -38,48 +38,49 @@
     "cheerio": "^1.0.0-rc.12",
     "deprecated-react-native-prop-types": "^4.2.1",
     "dom-parser": "^0.1.6",
-    "expo": "~49.0.11",
-    "expo-constants": "~14.4.2",
-    "expo-font": "~11.4.0",
-    "expo-image": "~1.3.5",
-    "expo-linking": "~5.0.2",
-    "expo-router": "^2.0.0",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^51.0.34",
+    "expo-constants": "^16.0.2",
+    "expo-font": "^12.0.10",
+    "expo-image": "^1.13.0",
+    "expo-linking": "^6.3.1",
+    "expo-router": "^3.5.23",
+    "expo-status-bar": "^1.12.1",
     "html-entities": "^2.4.0",
     "react": "18.2.0",
     "react-apple-emojis": "^2.2.1",
-    "react-native": "0.72.10",
+    "react-native": "^0.74.5",
     "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-gesture-handler": "^2.16.1",
     "react-native-htmlview": "^0.16.0",
     "react-native-hyperlink": "^0.0.22",
     "react-native-ionicons": "^4.6.5",
-    "react-native-modal-datetime-picker": "^17.1.0",
+    "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-neat-date-picker": "^1.4.12",
-    "react-native-otp-textinput": "^1.1.3",
+    "react-native-otp-textinput": "^1.1.6",
     "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-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "react-native-svg": "13.9.0",
+    "react-native-safe-area-context": "^4.10.5",
+    "react-native-screens": "^3.31.1",
+    "react-native-svg": "^15.2.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",
+    "typescript": "^5.3.3",
     "use-debounce": "^10.0.0",
     "validator": "^13.11.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "@iconify/react": "^4.1.1",
-    "@types/react": "~18.2.14",
+    "@types/react": "^18.2.79",
     "@types/react-native": "^0.72.3",
     "@types/react-native-htmlview": "^0.16.1",
     "@types/react-native-vector-icons": "^6.4.15",

diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
@@ -1,10 +1,11 @@
 import { Tabs } from 'expo-router';
-import { Platform, View } from 'react-native';
+import { Alert, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import Icon from '../../../assets/icons';
+import Icon, { IconType } from '../../../assets/icons';
 import colors from '../../styles/colors';
 import globalStyles from '../../styles/globalStyles';
+import { useSession } from '../../utils/AuthContext';
 
 function HomeIcon({ color }: { color: string }) {
   return (
@@ -22,15 +23,18 @@ function SearchIcon({ color }: { color: string }) {
   );
 }
 
-function LibraryIcon({ color }: { color: string }) {
-  return (
-    <Icon
-      type={color === colors.fadedBlack ? 'library_inactive' : 'library_active'}
-    />
-  );
+function LibraryIcon({ color, guest }: { color: string; guest: boolean }) {
+  let icon: IconType;
+  if (guest) {
+    icon = 'library_inactive';
+  } else {
+    icon = color === colors.fadedBlack ? 'library_inactive' : 'library_active';
+  }
+  return <Icon type={icon} />;
 }
 
 function TabNav() {
+  const { guest } = useSession();
   const insets = useSafeAreaInsets();
 
   return (
@@ -86,8 +90,9 @@ function TabNav() {
         options={{
           headerShown: false,
           tabBarLabel: 'Library',
-          tabBarIcon: ({ color }) => LibraryIcon({ color }),
+          tabBarIcon: ({ color }) => LibraryIcon({ color, guest }),
         }}
+        listeners={{}}
       />
       <Tabs.Screen
         name="settings"

diff --git a/src/app/(tabs)/library/index.tsx b/src/app/(tabs)/library/index.tsx
@@ -20,7 +20,7 @@ import { Channel, usePubSub } from '../../../utils/PubSubContext';
  * The screen recieves updates from PreviewCard and ContentCard from the PubSubContext via the usePubSub hook. If a story is favorited, the channel will be updated, and a useEffect is triggered. The screen is updated after 4 seconds of the update. This is to give the user time to resave a story on the library page if they accidently unsave it.
  */
 function LibraryScreen() {
-  const { user } = useSession();
+  const { user, guest } = useSession();
   const [favoritesSelected, setFavoritesSelected] = useState(true);
   const [readingSelected, setReadingSelected] = useState(false);
   const [favoriteStories, setFavoriteStories] = useState<StoryPreview[]>([]);
@@ -66,6 +66,7 @@ function LibraryScreen() {
   };
 
   useEffect(() => {
+    if (guest) return;
     if (updateFavoritesListTimeout) {
       clearTimeout(updateFavoritesListTimeout);
     }
@@ -80,6 +81,7 @@ function LibraryScreen() {
   }, [channels[Channel.FAVORITES]]);
 
   useEffect(() => {
+    if (guest) return;
     if (updateReadingListTimeout) {
       clearTimeout(updateReadingListTimeout);
     }
@@ -94,6 +96,8 @@ function LibraryScreen() {
   }, [channels[Channel.SAVED_STORIES]]);
 
   useEffect(() => {
+    if (guest) return;
+
     (async () => {
       await Promise.all([
         fetchUserStoriesFavorites(user?.id).then(favorites =>
@@ -144,28 +148,35 @@ function LibraryScreen() {
       <View style={{ width: '100%', flex: 1, marginBottom: 100 }}>
         {favoritesSelected &&
           (favoriteStories.length > 0 ? (
-            <FlatList data={favoriteStories} renderItem={renderItem} />
+            <FlatList
+              data={favoriteStories}
+              renderItem={obj => renderItem(obj as any)}
+            />
           ) : (
             <View style={{ paddingBottom: 16 }}>
               <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
-                Favorited stories
+                {guest ? 'Sign in' : 'Favorited stories'}
               </Text>
               <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
-                will appear here.
+                {guest ? 'to favorite stories.' : 'will appear here.'}
               </Text>
             </View>
           ))}
 
         {readingSelected &&
           (readingListStories.length > 0 ? (
-            <FlatList data={readingListStories} renderItem={renderItem} />
+            <FlatList
+              data={readingListStories}
+              renderItem={obj => renderItem(obj as any)}
+            />
           ) : (
             <View style={{ paddingBottom: 16 }}>
               <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
-                Saved stories
+                {guest}
+                {guest ? 'Sign in' : 'Saved stories'}
               </Text>
               <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
-                will appear here.
+                {guest ? 'to save stories.' : 'will appear here.'}
               </Text>
             </View>
           ))}

diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
@@ -9,6 +9,7 @@ import {
   ScrollView,
   Pressable,
   TouchableOpacity,
+  Platform,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -31,6 +32,7 @@ import {
   FilterDropdown,
   FilterSingleDropdown,
 } from '../../../components/FilterDropdown/FilterDropdown';
+import { Icon } from 'react-native-elements';
 
 const getRecentSearch = async () => {
   try {
@@ -370,7 +372,11 @@ function SearchScreen() {
             setShowRecents(true);
             setShowGenreCarousals(false);
           }}
-          searchIcon
+          searchIcon={
+            Platform.OS === 'ios' ? (
+              <Icon name="search" color={colors.grey} />
+            ) : undefined
+          }
           clearIcon={false}
           cancelButtonProps={{
             buttonTextStyle: [globalStyles.body1Bold, styles.cancelButton],
@@ -395,7 +401,7 @@ function SearchScreen() {
           }}
         />
 
-        {((search && searchResults.length > 0) || showGenreCarousals) && (
+        {(search || showGenreCarousals) && (
           <ScrollView
             horizontal={true}
             showsHorizontalScrollIndicator={false}
@@ -435,15 +441,6 @@ function SearchScreen() {
           </ScrollView>
         )}
 
-        {/* {search && ( */}
-        {/*   <View style={styles.default}> */}
-        {/*     <Button */}
-        {/*       title="Show Filter Modal" */}
-        {/*       onPress={() => setFilterVisible(true)} */}
-        {/*     /> */}
-        {/*   </View> */}
-        {/* )} */}
-
         {showRecents &&
           (search && searchResults.length > 0 ? (
             <View style={styles.resultCounter}>

diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts
@@ -83,11 +83,10 @@ const styles = StyleSheet.create({
     textDecorationLine: 'underline',
   },
   emptySearch: {
-    display: 'flex',
-    flexDirection: 'column',
-    textAlign: 'center',
-    alignItems: 'center',
-    marginTop: '60%',
+    // display: 'flex',
+    // flexDirection: 'column',
+    // textAlign: 'center',
+    // alignItems: 'center',
   },
   cancelButton: {
     color: colors.grey,
@@ -103,6 +102,7 @@ const styles = StyleSheet.create({
     color: '#797979',
   },
   dropdownContainer: {
+    zIndex: 1,
     marginLeft: 10,
     marginTop: 13,
     marginBottom: 30,

diff --git a/src/app/(tabs)/settings/index.tsx b/src/app/(tabs)/settings/index.tsx
@@ -31,7 +31,7 @@ import { deleteUser } from '../../../queries/auth';
  * The birthday can only be set once per account. Once it is set, it cannot be changed again.
  */
 function SettingsScreen() {
-  const { session, signOut } = useSession();
+  const { session, signOut, guest } = useSession();
   const [loading, setLoading] = useState(true);
   const [firstName, setFirstName] = useState('');
   const [username, setUsername] = useState('');
@@ -157,7 +157,7 @@ function SettingsScreen() {
         ...(gender && { gender }),
         ...(pronouns && { pronouns }),
         ...(raceEthnicity && { race_ethnicity: raceEthnicity }),
-        ...(birthday && { birthday }),
+        ...(birthdayExists && { birthday }),
       };
 
       // Check if user exists

diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -5,19 +5,22 @@ import { AuthContextProvider } from '../utils/AuthContext';
 import { BooleanPubSubProvider } from '../utils/PubSubContext';
 import ToastComponent from '../components/Toast/Toast';
 import { Keyboard, TouchableWithoutFeedback } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 function StackLayout() {
   return (
     <SafeAreaProvider>
-      <AuthContextProvider>
-        <BooleanPubSubProvider>
-          <Stack>
-            <Stack.Screen name="index" options={{ headerShown: false }} />
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen name="auth" options={{ headerShown: false }} />
-          </Stack>
-        </BooleanPubSubProvider>
-      </AuthContextProvider>
+      <GestureHandlerRootView>
+        <AuthContextProvider>
+          <BooleanPubSubProvider>
+            <Stack>
+              <Stack.Screen name="index" options={{ headerShown: false }} />
+              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+              <Stack.Screen name="auth" options={{ headerShown: false }} />
+            </Stack>
+          </BooleanPubSubProvider>
+        </AuthContextProvider>
+      </GestureHandlerRootView>
       <ToastComponent />
     </SafeAreaProvider>
   );