diff options
Diffstat (limited to 'src/screens')
6 files changed, 307 insertions, 67 deletions
diff --git a/src/screens/index.ts b/src/screens/index.ts index c34cd571..faf3d0b7 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -3,3 +3,4 @@ export * from './onboarding'; export * from './profile'; export * from './search'; export * from './suggestedPeople'; +export * from './suggestedPeopleOnboarding'; diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx index 8ebdaea6..bf34ba6e 100644 --- a/src/screens/suggestedPeople/AnimatedTutorial.tsx +++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx @@ -1,13 +1,13 @@ -import * as React from 'react'; -import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; -import {isIPhoneX, SCREEN_WIDTH} from '../../utils'; import {SafeAreaView} from 'react-native-safe-area-context'; -import {useNavigation} from '@react-navigation/native'; import {useDispatch, useSelector} from 'react-redux'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {suggestedPeopleAnimatedTutorialFinished} from '../../store/actions/user'; import {RootState} from '../../store/rootReducer'; -import {updateSPSwipeTutorial} from '../../store/actions/user'; +import {isIPhoneX, SCREEN_WIDTH} from '../../utils'; const AnimatedTutorial: React.FC = () => { const navigation = useNavigation(); @@ -15,11 +15,7 @@ const AnimatedTutorial: React.FC = () => { const {user} = useSelector((state: RootState) => state.user); const handleCloseAnimationTutorial = async () => { - /* In user's store, check if profile.sp_swipe_tutorial === 0 - * Make call to edit profile endpoint with suggested people === 1 - */ - const data = 1; - dispatch(updateSPSwipeTutorial(user, data)); + dispatch(suggestedPeopleAnimatedTutorialFinished(user.userId)); navigation.pop(); }; return ( diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 4d8607a4..3437cd85 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -1,3 +1,4 @@ +import {useFocusEffect, useNavigation} from '@react-navigation/native'; import React, {useCallback} from 'react'; import { StatusBar, @@ -7,16 +8,15 @@ import { View, } from 'react-native'; import {Image} from 'react-native-animatable'; -import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import {TabsGradient, TaggsBar} from '../../components'; -import {SafeAreaView} from 'react-native-safe-area-context'; -import {normalize} from '../../utils'; import Animated from 'react-native-reanimated'; -import {ScreenType} from '../../types'; +import {SafeAreaView} from 'react-native-safe-area-context'; import {useSelector} from 'react-redux'; -import {RootState} from '../../store/rootReducer'; -import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import {TabsGradient, TaggsBar} from '../../components'; import {MutualFriends} from '../../components/suggestedPeople'; +import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; +import {RootState} from '../../store/rootReducer'; +import {ScreenType} from '../../types'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** * Bare bones for suggested people consisting of: @@ -24,75 +24,71 @@ import {MutualFriends} from '../../components/suggestedPeople'; */ const SuggestedPeopleScreen: React.FC = () => { + const {suggested_people_linked} = useSelector( + (state: RootState) => state.user.profile, + ) ?? {suggested_people_linked: -1}; + const y = Animated.useValue(0); + // Can be removed once firstname, username props are received const firstName = 'Sarah'; // Adviced to maintain username as a variable here to append @ symbol for maintainability const username = '@' + 'sarahmiller'; const navigation = useNavigation(); - const screenType = ScreenType.SuggestedPeople; - const { - profile: {sp_swipe_tutorial}, - } = useSelector((state: RootState) => state.user); useFocusEffect( useCallback(() => { const navigateToAnimatedTutorial = () => { - /* In user's store, check if profile.sp_swipe_tutorial === 0 - * If, true show tutorial. - */ - if (sp_swipe_tutorial === 0) { + // if the user has finished the previous SP onboarding + if (suggested_people_linked === 1) { navigation.navigate('AnimatedTutorial'); } }; navigateToAnimatedTutorial(); - }, [sp_swipe_tutorial, navigation]), + }, [navigation, suggested_people_linked]), ); - return ( - <> - <SafeAreaView> - <StatusBar barStyle={'light-content'} /> - <Image - // !!! Displaying Sarah Miller's image - source={require('../../assets/images/sarah_miller_full.jpeg')} - style={styles.image} - /> - <View style={styles.mainContainer}> - <Text style={styles.title}>Suggested People</Text> - <View style={styles.body}> - {/* First row contaning name, username, add button (w/o functionality) */} - <View style={styles.addUserContainer}> - <View style={styles.nameInfoContainer}> - <Text style={styles.firstName}>{firstName}</Text> - <Text style={styles.username}>{username}</Text> - </View> - <TouchableOpacity - activeOpacity={0.5} - // TODO: Call function to Add Friend - onPress={() => console.log('Call add friend function')}> - <View style={styles.addButton}> - <Text style={styles.addButtonTitle}>{'Add Friend'}</Text> - </View> - </TouchableOpacity> + const mainContent = () => ( + <SafeAreaView> + <StatusBar barStyle={'light-content'} /> + <Image + // !!! Displaying Sarah Miller's image + source={require('../../assets/images/sarah_miller_full.jpeg')} + style={styles.image} + /> + <View style={styles.mainContainer}> + <Text style={styles.title}>Suggested People</Text> + <View style={styles.body}> + <View style={styles.addUserContainer}> + <View style={styles.nameInfoContainer}> + <Text style={styles.firstName}>{firstName}</Text> + <Text style={styles.username}>{username}</Text> </View> - {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */} - <TaggsBar - y={Animated.useValue(0)} - // :: For testing purposes, to view user's own profile, pass userXId='' - userXId={''} - profileBodyHeight={0} - screenType={screenType} - /> - {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends - * Needs to be displayed only if userX !user himself - */} - <MutualFriends /> + <TouchableOpacity + activeOpacity={0.5} + onPress={() => console.log('Call add friend function')}> + <View style={styles.addButton}> + <Text style={styles.addButtonTitle}>{'Add Friend'}</Text> + </View> + </TouchableOpacity> </View> + <TaggsBar + y={y} + userXId={undefined} + profileBodyHeight={0} + screenType={ScreenType.SuggestedPeople} + /> + <MutualFriends /> </View> - <TabsGradient /> - </SafeAreaView> - </> + </View> + <TabsGradient /> + </SafeAreaView> + ); + + return suggested_people_linked === 0 ? ( + <SuggestedPeopleOnboardingStackScreen /> + ) : ( + mainContent() ); }; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx new file mode 100644 index 00000000..1b30c72f --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -0,0 +1,164 @@ +import React, {useState} from 'react'; +import { + Alert, + Image, + ImageBackground, + StatusBar, + StyleSheet, +} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import ImagePicker from 'react-native-image-crop-picker'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {useDispatch} from 'react-redux'; +import {TaggSquareButton} from '../../components'; +import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; +import {SP_HEIGHT, SP_WIDTH} from '../../constants'; +import {ERROR_UPLOAD} from '../../constants/strings'; +import {sendSuggestedPeoplePhoto} from '../../services'; +import {uploadedSuggestedPeoplePhoto} from '../../store/actions'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; + +const SuggestedPeopleUploadPictureScreen: React.FC = () => { + const [image, setImage] = useState<string | undefined>(undefined); + const [loading, setLoading] = useState(false); + const dispatch = useDispatch(); + + const openImagePicker = () => { + ImagePicker.openPicker({ + smartAlbums: [ + 'Favorites', + 'RecentlyAdded', + 'SelfPortraits', + 'Screenshots', + 'UserLibrary', + ], + width: SP_WIDTH, + height: SP_HEIGHT, + cropping: true, + cropperToolbarTitle: 'Select Photo', + mediaType: 'photo', + }) + .then((picture) => { + if ('path' in picture) { + setImage(picture.path); + } + }) + .catch((_) => {}); + }; + + const uploadImage = async () => { + setLoading(true); + if (image) { + const success = await sendSuggestedPeoplePhoto(image); + if (success) { + dispatch(uploadedSuggestedPeoplePhoto()); + } else { + Alert.alert(ERROR_UPLOAD); + } + } + setLoading(false); + }; + + return ( + <> + {loading && <TaggLoadingIndicator fullscreen />} + <StatusBar barStyle={'light-content'} /> + <SafeAreaView style={styles.container}> + <Text style={styles.title}>PHOTO</Text> + {image ? ( + <Text style={styles.body}>Tap again to choose another photo</Text> + ) : ( + <Text style={styles.body}> + Upload a photo, this is what other users will see + </Text> + )} + {image ? ( + <TouchableOpacity onPress={openImagePicker}> + <ImageBackground + source={{uri: image}} + style={[styles.imageContainer, styles.overlay]} + borderRadius={30}> + <Image + style={styles.overlay} + source={require('../../assets/images/suggested-people-preview-silhouette.png')} + /> + </ImageBackground> + </TouchableOpacity> + ) : ( + <TouchableOpacity onPress={openImagePicker}> + <ImageBackground + source={require('../../assets/images/suggested-people-preview-silhouette.png')} + style={[styles.imageContainer, styles.overlay]}> + <Image + style={styles.images} + source={require('../../assets/images/images.png')} + /> + <Text style={styles.body}>Upload Photo</Text> + </ImageBackground> + </TouchableOpacity> + )} + {image && ( + <TaggSquareButton + onPress={uploadImage} + title={'Done'} + buttonStyle={'normal'} + buttonColor={'purple'} + labelColor={'white'} + style={styles.buttonStyle} + labelStyle={styles.buttonLabel} + /> + )} + </SafeAreaView> + </> + ); +}; + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + backgroundColor: '#878787', + alignItems: 'center', + }, + title: { + marginTop: '5%', + fontSize: normalize(25), + lineHeight: normalize(30), + fontWeight: '600', + color: 'white', + }, + body: { + fontSize: normalize(15), + lineHeight: normalize(18), + textAlign: 'center', + fontWeight: '600', + color: 'white', + marginTop: '5%', + width: SCREEN_WIDTH * 0.7, + }, + buttonLabel: { + fontWeight: '600', + fontSize: normalize(15), + }, + buttonStyle: { + width: '40%', + }, + imageContainer: { + marginTop: '10%', + backgroundColor: 'black', + borderRadius: 30, + alignItems: 'center', + }, + overlay: { + height: SCREEN_HEIGHT * 0.6, + aspectRatio: SP_WIDTH / SP_HEIGHT, + }, + images: { + width: normalize(100), + height: normalize(100), + marginTop: '30%', + marginBottom: '10%', + }, +}); +export default SuggestedPeopleUploadPictureScreen; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx new file mode 100644 index 00000000..10f3b3a5 --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx @@ -0,0 +1,81 @@ +import {BlurView} from '@react-native-community/blur'; +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {Image, StatusBar, StyleSheet, TouchableOpacity} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import UpArrow from '../../assets/icons/up_arrow.svg'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; + +const SuggestedPeopleWelcomeScreen: React.FC = () => { + const navigation = useNavigation(); + return ( + <> + <StatusBar barStyle={'light-content'} /> + <Image + style={styles.backgroundImage} + source={ + isIPhoneX() + ? require('../../assets/images/suggested-people-preview-large.png') + : require('../../assets/images/suggested-people-preview-small.png') + } + resizeMode={'cover'} + /> + <BlurView blurType={'light'} blurAmount={1}> + <SafeAreaView style={styles.container}> + <Image + style={styles.logo} + source={require('../../assets/images/tagg-logo.png')} + /> + <Text style={styles.body}> + Welcome to the suggested people's page where you can discover new + people!{'\n\n'}Let's get you set up! + </Text> + </SafeAreaView> + </BlurView> + <TouchableOpacity + style={styles.nextButton} + onPress={() => navigation.push('UploadPicture')}> + <UpArrow color={'white'} /> + </TouchableOpacity> + </> + ); +}; + +const styles = StyleSheet.create({ + backgroundImage: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + position: 'absolute', + }, + container: { + width: '100%', + height: '100%', + backgroundColor: 'rgba(0,0,0,0.65)', + alignItems: 'center', + }, + logo: { + width: normalize(120), + height: normalize(120), + marginTop: '25%', + }, + body: { + fontSize: normalize(20), + lineHeight: normalize(25), + textAlign: 'center', + fontWeight: '700', + color: 'white', + marginTop: '5%', + width: SCREEN_WIDTH * 0.8, + }, + nextButton: { + position: 'absolute', + color: 'white', + transform: [{rotate: '90deg'}], + width: normalize(70), + aspectRatio: 0.86, + bottom: SCREEN_HEIGHT * 0.1, + right: '5%', + }, +}); +export default SuggestedPeopleWelcomeScreen; diff --git a/src/screens/suggestedPeopleOnboarding/index.ts b/src/screens/suggestedPeopleOnboarding/index.ts new file mode 100644 index 00000000..6bd9f1b2 --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/index.ts @@ -0,0 +1,2 @@ +export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen'; +export {default as SuggestedPeopleUploadPictureScreen} from './SuggestedPeopleUploadPictureScreen'; |