From d3a0f6713e4378adac0f21d4081a7fac1863a39a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 16:28:20 -0500 Subject: added new stack navigator, switch screen based on flag --- src/screens/index.ts | 1 + .../suggestedPeople/SuggestedPeopleScreen.tsx | 89 +++++++++++----------- .../SuggestedPeopleWelcomeScreen.tsx | 14 ++++ src/screens/suggestedPeopleOnboarding/index.ts | 1 + 4 files changed, 61 insertions(+), 44 deletions(-) create mode 100644 src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx create mode 100644 src/screens/suggestedPeopleOnboarding/index.ts (limited to 'src/screens') 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/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 4d0a9bd5..2df48d7d 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,15 +8,13 @@ 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 {useSelector} from 'react-redux'; +import {TabsGradient} from '../../components'; +import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; import {RootState} from '../../store/rootReducer'; -import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import {ScreenType} from '../../types'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** * Bare bones for suggested people consisting of: @@ -23,6 +22,12 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; */ const SuggestedPeopleScreen: React.FC = () => { + // const {onboarded_sugggested_people} = useSelector( + // (state: RootState) => state.user.profile, + // ); + + const onboarded_sugggested_people = false; + // Can be removed once firstname, username props are received const firstName = 'Sarah'; @@ -48,47 +53,43 @@ const SuggestedPeopleScreen: React.FC = () => { }, [sp_swipe_tutorial, navigation]), ); - return ( - <> - - - - - Suggested People - - {/* First row contaning name, username, add button (w/o functionality) */} - - - {firstName} - {username} - - console.log('Call add friend function')}> - - {'Add Friend'} - - + const mainContent = () => ( + + + + + Suggested People + + {/* Added first row contaning name, username, add button (w/o functionality) */} + + + {firstName} + {username} - {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */} - - {/* TODO: Add MutualFriends here */} + console.log('Call add friend function')}> + + {'Add Friend'} + + + {/* TODO: Add TaggsBar here */} + {/* TODO: Add MutualFriends here */} - - - + + + + ); + + return onboarded_sugggested_people ? ( + mainContent() + ) : ( + ); }; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx new file mode 100644 index 00000000..da6adc59 --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import {StyleSheet, Text} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; + +const SuggestedPeopleWelcomeScreen: React.FC = () => { + return ( + + Welcome! + + ); +}; + +const styles = StyleSheet.create({}); +export default SuggestedPeopleWelcomeScreen; diff --git a/src/screens/suggestedPeopleOnboarding/index.ts b/src/screens/suggestedPeopleOnboarding/index.ts new file mode 100644 index 00000000..6adbb75d --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/index.ts @@ -0,0 +1 @@ +export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen'; -- cgit v1.2.3-70-g09d2 From 3454ecb361c2196fb28d71f72ca2845cf0542ce7 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 18:31:42 -0500 Subject: welcome screen done, created base view for upload image --- .../images/suggested-people-preview-large.png | Bin 0 -> 1246502 bytes .../images/suggested-people-preview-small.png | Bin 0 -> 1110201 bytes src/assets/images/tagg-logo.png | Bin 0 -> 34714 bytes .../SuggestedPeopleOnboardingStackNavigator.tsx | 1 + .../SuggestedPeopleOnboardingStackScreen.tsx | 18 ++--- .../SuggestedPeopleUpdatePictureScreen.tsx | 37 ++++++++++ .../SuggestedPeopleWelcomeScreen.tsx | 77 +++++++++++++++++++-- src/screens/suggestedPeopleOnboarding/index.ts | 1 + 8 files changed, 121 insertions(+), 13 deletions(-) create mode 100644 src/assets/images/suggested-people-preview-large.png create mode 100644 src/assets/images/suggested-people-preview-small.png create mode 100644 src/assets/images/tagg-logo.png create mode 100644 src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx (limited to 'src/screens') diff --git a/src/assets/images/suggested-people-preview-large.png b/src/assets/images/suggested-people-preview-large.png new file mode 100644 index 00000000..b80eda27 Binary files /dev/null and b/src/assets/images/suggested-people-preview-large.png differ diff --git a/src/assets/images/suggested-people-preview-small.png b/src/assets/images/suggested-people-preview-small.png new file mode 100644 index 00000000..bb1aef89 Binary files /dev/null and b/src/assets/images/suggested-people-preview-small.png differ diff --git a/src/assets/images/tagg-logo.png b/src/assets/images/tagg-logo.png new file mode 100644 index 00000000..8d67f1f7 Binary files /dev/null and b/src/assets/images/tagg-logo.png differ diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx index 40df8e0f..e957e48c 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx @@ -2,6 +2,7 @@ import {createStackNavigator} from '@react-navigation/stack'; export type SuggestedPeopleOnboardingStackParams = { WelcomeScreen: undefined; + UploadPicture: undefined; }; export const SuggestedPeopleOnboardingStack = createStackNavigator(); diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx index 95070ed2..871bd7c8 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx @@ -1,13 +1,8 @@ -import {StackCardInterpolationProps} from '@react-navigation/stack'; import React from 'react'; import {SuggestedPeopleOnboardingStack} from '.'; import {SuggestedPeopleWelcomeScreen} from '../../screens'; - -const forFade = ({current}: StackCardInterpolationProps) => ({ - cardStyle: { - opacity: current.progress, - }, -}); +import SuggestedPeopleUploadPictureScreen from '../../screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen'; +import {headerBarOptions} from '../main'; const SuggestedPeopleOnboardingStackScreen: React.FC = () => { return ( @@ -18,7 +13,14 @@ const SuggestedPeopleOnboardingStackScreen: React.FC = () => { name="WelcomeScreen" component={SuggestedPeopleWelcomeScreen} options={{ - gestureEnabled: false, + ...headerBarOptions('white', ''), + }} + /> + diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx new file mode 100644 index 00000000..834fda9f --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import {StatusBar, StyleSheet} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {TaggSquareButton} from '../../components'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; + +const SuggestedPeopleUploadPictureScreen: React.FC = () => { + return ( + <> + + + FOoooooo + {/* {}} title={'done'} /> */} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + backgroundColor: '#878787', + alignItems: 'center', + }, + body: { + fontSize: normalize(20), + lineHeight: normalize(25), + textAlign: 'center', + fontWeight: '700', + color: 'white', + marginTop: '5%', + width: SCREEN_WIDTH * 0.8, + }, +}); +export default SuggestedPeopleUploadPictureScreen; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx index da6adc59..10f3b3a5 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx @@ -1,14 +1,81 @@ +import {BlurView} from '@react-native-community/blur'; +import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {StyleSheet, Text} from 'react-native'; +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 ( - - Welcome! - + <> + + + + + + + Welcome to the suggested people's page where you can discover new + people!{'\n\n'}Let's get you set up! + + + + navigation.push('UploadPicture')}> + + + ); }; -const styles = StyleSheet.create({}); +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 index 6adbb75d..2a349cf7 100644 --- a/src/screens/suggestedPeopleOnboarding/index.ts +++ b/src/screens/suggestedPeopleOnboarding/index.ts @@ -1 +1,2 @@ export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen'; +export {default as SuggestedPeopleUpdatePictureScreen} from './SuggestedPeopleUpdatePictureScreen'; -- cgit v1.2.3-70-g09d2 From 2e7f85d457922c3d448840d177c35f89be14de39 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 18:38:43 -0500 Subject: file naming fix --- .../SuggestedPeopleOnboardingStackScreen.tsx | 6 ++- .../SuggestedPeopleUpdatePictureScreen.tsx | 37 ------------------ .../SuggestedPeopleUploadPictureScreen.tsx | 44 ++++++++++++++++++++++ src/screens/suggestedPeopleOnboarding/index.ts | 2 +- 4 files changed, 49 insertions(+), 40 deletions(-) delete mode 100644 src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx create mode 100644 src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx (limited to 'src/screens') diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx index 871bd7c8..39b52c18 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx @@ -1,7 +1,9 @@ import React from 'react'; import {SuggestedPeopleOnboardingStack} from '.'; -import {SuggestedPeopleWelcomeScreen} from '../../screens'; -import SuggestedPeopleUploadPictureScreen from '../../screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen'; +import { + SuggestedPeopleWelcomeScreen, + SuggestedPeopleUploadPictureScreen, +} from '../../screens'; import {headerBarOptions} from '../main'; const SuggestedPeopleOnboardingStackScreen: React.FC = () => { diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx deleted file mode 100644 index 834fda9f..00000000 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import {StatusBar, StyleSheet} from 'react-native'; -import {Text} from 'react-native-animatable'; -import {SafeAreaView} from 'react-native-safe-area-context'; -import {TaggSquareButton} from '../../components'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; - -const SuggestedPeopleUploadPictureScreen: React.FC = () => { - return ( - <> - - - FOoooooo - {/* {}} title={'done'} /> */} - - - ); -}; - -const styles = StyleSheet.create({ - container: { - width: '100%', - height: '100%', - backgroundColor: '#878787', - alignItems: 'center', - }, - body: { - fontSize: normalize(20), - lineHeight: normalize(25), - textAlign: 'center', - fontWeight: '700', - color: 'white', - marginTop: '5%', - width: SCREEN_WIDTH * 0.8, - }, -}); -export default SuggestedPeopleUploadPictureScreen; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx new file mode 100644 index 00000000..3f31e130 --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import {StatusBar, StyleSheet} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {TaggSquareButton} from '../../components'; +import {normalize, SCREEN_WIDTH} from '../../utils'; + +const SuggestedPeopleUploadPictureScreen: React.FC = () => { + return ( + <> + + + {/* FOoooooo */} + {/* {}} + title={'done'} + buttonStyle={'normal'} + buttonColor={'purple'} + labelColor={'white'} + /> */} + barrr + + + ); +}; + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + backgroundColor: '#878787', + alignItems: 'center', + }, + body: { + fontSize: normalize(20), + lineHeight: normalize(25), + textAlign: 'center', + fontWeight: '700', + color: 'white', + marginTop: '5%', + width: SCREEN_WIDTH * 0.8, + }, +}); +export default SuggestedPeopleUploadPictureScreen; diff --git a/src/screens/suggestedPeopleOnboarding/index.ts b/src/screens/suggestedPeopleOnboarding/index.ts index 2a349cf7..6bd9f1b2 100644 --- a/src/screens/suggestedPeopleOnboarding/index.ts +++ b/src/screens/suggestedPeopleOnboarding/index.ts @@ -1,2 +1,2 @@ export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen'; -export {default as SuggestedPeopleUpdatePictureScreen} from './SuggestedPeopleUpdatePictureScreen'; +export {default as SuggestedPeopleUploadPictureScreen} from './SuggestedPeopleUploadPictureScreen'; -- cgit v1.2.3-70-g09d2 From a5f60d3455b056ca3eea4f7fa48e78a1b0a11f1d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 18:53:59 -0500 Subject: a bit more progress for image upload --- .../SuggestedPeopleUploadPictureScreen.tsx | 31 ++++++++++++++++------ 1 file changed, 23 insertions(+), 8 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 3f31e130..43619453 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -1,24 +1,26 @@ -import React from 'react'; +import React, {useState} from 'react'; import {StatusBar, StyleSheet} from 'react-native'; import {Text} from 'react-native-animatable'; import {SafeAreaView} from 'react-native-safe-area-context'; -import {TaggSquareButton} from '../../components'; import {normalize, SCREEN_WIDTH} from '../../utils'; const SuggestedPeopleUploadPictureScreen: React.FC = () => { + const [image, setImage] = useState(undefined); return ( <> - {/* FOoooooo */} + PICTURE + Adjust picture or go back to reupload {/* {}} - title={'done'} + title={'Done'} buttonStyle={'normal'} buttonColor={'purple'} labelColor={'white'} + style={styles.buttonStyle} + labelStyle={styles.buttonLabel} /> */} - barrr ); @@ -31,14 +33,27 @@ const styles = StyleSheet.create({ backgroundColor: '#878787', alignItems: 'center', }, + title: { + marginTop: '10%', + fontSize: normalize(25), + lineHeight: normalize(30), + fontWeight: '600', + color: 'white', + }, body: { - fontSize: normalize(20), - lineHeight: normalize(25), + fontSize: normalize(15), + lineHeight: normalize(18), textAlign: 'center', - fontWeight: '700', + fontWeight: '600', color: 'white', marginTop: '5%', + marginBottom: '10%', width: SCREEN_WIDTH * 0.8, }, + buttonLabel: { + fontWeight: '600', + fontSize: normalize(15), + }, + buttonStyle: {}, }); export default SuggestedPeopleUploadPictureScreen; -- cgit v1.2.3-70-g09d2 From 94d24edc7cafb12aadeae246eeb5b3132b1c2750 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 10 Feb 2021 15:36:12 -0500 Subject: upload photo done --- src/assets/images/images.png | Bin 0 -> 20323 bytes .../images/suggested-people-preview-silhouette.png | Bin 0 -> 6899 bytes src/constants/constants.ts | 3 + .../SuggestedPeopleOnboardingStackScreen.tsx | 6 +- .../suggestedPeople/SuggestedPeopleScreen.tsx | 8 +- .../SuggestedPeopleUploadPictureScreen.tsx | 124 ++++++++++++++++++--- src/store/actions/user.ts | 2 +- 7 files changed, 120 insertions(+), 23 deletions(-) create mode 100644 src/assets/images/images.png create mode 100644 src/assets/images/suggested-people-preview-silhouette.png (limited to 'src/screens') diff --git a/src/assets/images/images.png b/src/assets/images/images.png new file mode 100644 index 00000000..43f42556 Binary files /dev/null and b/src/assets/images/images.png differ diff --git a/src/assets/images/suggested-people-preview-silhouette.png b/src/assets/images/suggested-people-preview-silhouette.png new file mode 100644 index 00000000..7c496013 Binary files /dev/null and b/src/assets/images/suggested-people-preview-silhouette.png differ diff --git a/src/constants/constants.ts b/src/constants/constants.ts index f58aa686..0195a634 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -176,3 +176,6 @@ export const EXPLORE_SECTION_TITLES: ExploreSectionType[] = [ "Brown '22", "Brown '23", ]; + +export const SP_WIDTH = 375; +export const SP_HEIGHT = 812; diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx index 39b52c18..970982c4 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx @@ -4,13 +4,17 @@ import { SuggestedPeopleWelcomeScreen, SuggestedPeopleUploadPictureScreen, } from '../../screens'; +import {SCREEN_WIDTH} from '../../utils'; import {headerBarOptions} from '../main'; const SuggestedPeopleOnboardingStackScreen: React.FC = () => { return ( + screenOptions={{ + headerShown: false, + gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6}, + }}> { - // const {onboarded_sugggested_people} = useSelector( - // (state: RootState) => state.user.profile, - // ); - - const onboarded_sugggested_people = false; + const {onboarded_sugggested_people} = useSelector( + (state: RootState) => state.user.profile, + ); // Can be removed once firstname, username props are received const firstName = 'Sarah'; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 43619453..11ecf60f 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -1,26 +1,102 @@ import React, {useState} from 'react'; -import {StatusBar, StyleSheet} from 'react-native'; +import {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 {normalize, SCREEN_WIDTH} from '../../utils'; +import {useDispatch} from 'react-redux'; +import {TaggSquareButton} from '../../components'; +import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; +import {SP_HEIGHT, SP_WIDTH} from '../../constants'; +import {updateOnboardedSuggestedPeople} from '../../store/actions'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; const SuggestedPeopleUploadPictureScreen: React.FC = () => { - const [image, setImage] = useState(undefined); + const [image, setImage] = useState(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) { + console.log('image set '); + setImage(picture.path); + console.log(picture.path); + } + }) + .catch((_) => {}); + }; + + const uploadImage = () => { + // TODO: hit endpoint + setLoading(true); + setTimeout(() => { + setLoading(false); + dispatch( + updateOnboardedSuggestedPeople(true, () => { + console.log('updated'); + }), + ); + }, 1000); + }; + return ( <> + {loading && } PICTURE - Adjust picture or go back to reupload - {/* {}} - title={'Done'} - buttonStyle={'normal'} - buttonColor={'purple'} - labelColor={'white'} - style={styles.buttonStyle} - labelStyle={styles.buttonLabel} - /> */} + Tap again to select another one + {image ? ( + + + + + + ) : ( + + + + Upload Picture + + + )} + {image && ( + + )} ); @@ -34,7 +110,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, title: { - marginTop: '10%', + marginTop: '5%', fontSize: normalize(25), lineHeight: normalize(30), fontWeight: '600', @@ -47,13 +123,29 @@ const styles = StyleSheet.create({ fontWeight: '600', color: 'white', marginTop: '5%', - marginBottom: '10%', width: SCREEN_WIDTH * 0.8, }, buttonLabel: { fontWeight: '600', fontSize: normalize(15), }, - buttonStyle: {}, + 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%', + }, }); export default SuggestedPeopleUploadPictureScreen; diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index bfbe9c80..4229517d 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -94,7 +94,7 @@ export const updateProfileCompletionStage = ( // TODO: this should be called after a successful upload of a first SP image export const updateOnboardedSuggestedPeople = ( onboarded: boolean, - callback: () => {}, + callback: () => void, ): ThunkAction, RootState, unknown, Action> => async ( dispatch, ) => { -- cgit v1.2.3-70-g09d2 From 12c82e4b7095d088d12b8b96a5b99b161191228c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 10 Feb 2021 15:55:14 -0500 Subject: updated text --- .../SuggestedPeopleUploadPictureScreen.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 11ecf60f..aba4d4de 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -60,7 +60,13 @@ const SuggestedPeopleUploadPictureScreen: React.FC = () => { PICTURE - Tap again to select another one + {image ? ( + Tap again to choose another picture + ) : ( + + Upload a picture, this is what other users will see + + )} {image ? ( Date: Wed, 10 Feb 2021 16:05:09 -0500 Subject: picture -> photo --- .../SuggestedPeopleUploadPictureScreen.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index aba4d4de..186f115f 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -59,12 +59,12 @@ const SuggestedPeopleUploadPictureScreen: React.FC = () => { {loading && } - PICTURE + PHOTO {image ? ( - Tap again to choose another picture + Tap again to choose another photo ) : ( - Upload a picture, this is what other users will see + Upload a photo, this is what other users will see )} {image ? ( @@ -88,7 +88,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = () => { style={styles.images} source={require('../../assets/images/images.png')} /> - Upload Picture + Upload Photo )} -- cgit v1.2.3-70-g09d2 From 1028bfa49b7265564504892914aa1fd57d3dce58 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 11 Feb 2021 12:36:27 -0500 Subject: removed logs --- .../suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 186f115f..98986a70 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -33,9 +33,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = () => { }) .then((picture) => { if ('path' in picture) { - console.log('image set '); setImage(picture.path); - console.log(picture.path); } }) .catch((_) => {}); -- cgit v1.2.3-70-g09d2 From 35f32adf85bfb026d89c7aaa3ffe96d4c3425bc0 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 11 Feb 2021 17:05:15 -0500 Subject: fixed merge issues --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 52a3c74b..2a0394ae 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -25,6 +25,7 @@ const SuggestedPeopleScreen: React.FC = () => { const {onboarded_sugggested_people} = useSelector( (state: RootState) => state.user.profile, ); + const y = Animated.useValue(0); // Can be removed once firstname, username props are received const firstName = 'Sarah'; @@ -76,6 +77,13 @@ const SuggestedPeopleScreen: React.FC = () => { + + {/* TODO: Add MutualFriends here */} {/* TODO: Add TaggsBar here */} {/* TODO: Add MutualFriends here */} -- cgit v1.2.3-70-g09d2 From 3615d6da190a17cffc67311771d218825036bec5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 11 Feb 2021 17:52:18 -0500 Subject: fixed merge issues --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 2a0394ae..a6b75b70 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -8,9 +8,10 @@ import { View, } from 'react-native'; import {Image} from 'react-native-animatable'; +import Animated from 'react-native-reanimated'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useSelector} from 'react-redux'; -import {TabsGradient} from '../../components'; +import {TabsGradient, TaggsBar} from '../../components'; import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; @@ -33,7 +34,6 @@ const SuggestedPeopleScreen: React.FC = () => { // 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); -- cgit v1.2.3-70-g09d2 From dfff52bb9c7e8a284e465cd90a61ada94a8d6a4e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 12 Feb 2021 13:14:51 -0500 Subject: not show animated tutorial during onboarding --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index a6b75b70..a0c227d6 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -44,12 +44,12 @@ const SuggestedPeopleScreen: React.FC = () => { /* In user's store, check if profile.sp_swipe_tutorial === 0 * If, true show tutorial. */ - if (sp_swipe_tutorial === 0) { + if (sp_swipe_tutorial === 0 && onboarded_sugggested_people) { navigation.navigate('AnimatedTutorial'); } }; navigateToAnimatedTutorial(); - }, [sp_swipe_tutorial, navigation]), + }, [sp_swipe_tutorial, navigation, onboarded_sugggested_people]), ); const mainContent = () => ( -- cgit v1.2.3-70-g09d2 From 5cdde33f9c35c1d26f47d0a71ee75c635a94ee49 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 12 Feb 2021 19:31:32 -0500 Subject: now using suggested_people_linked, moved things around --- src/screens/suggestedPeople/AnimatedTutorial.tsx | 16 +++---- .../suggestedPeople/SuggestedPeopleScreen.tsx | 21 +++------ .../SuggestedPeopleUploadPictureScreen.tsx | 36 +++++++++------ src/services/SuggestedPeopleService.ts | 39 ++++++++++++++++ src/services/UserProfileService.ts | 47 ++++--------------- src/services/index.ts | 1 + src/store/actions/user.ts | 53 ++++++++++------------ src/store/initialStates.ts | 3 +- src/store/reducers/userReducer.ts | 11 ++--- src/types/types.ts | 3 +- 10 files changed, 114 insertions(+), 116 deletions(-) create mode 100644 src/services/SuggestedPeopleService.ts (limited to 'src/screens') 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 a0c227d6..49806544 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -23,7 +23,7 @@ import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; */ const SuggestedPeopleScreen: React.FC = () => { - const {onboarded_sugggested_people} = useSelector( + const {suggested_people_linked} = useSelector( (state: RootState) => state.user.profile, ); const y = Animated.useValue(0); @@ -34,22 +34,17 @@ const SuggestedPeopleScreen: React.FC = () => { // Adviced to maintain username as a variable here to append @ symbol for maintainability const username = '@' + 'sarahmiller'; const navigation = useNavigation(); - 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 && onboarded_sugggested_people) { + // if the user has finished the previous SP onboarding + if (suggested_people_linked === 1) { navigation.navigate('AnimatedTutorial'); } }; navigateToAnimatedTutorial(); - }, [sp_swipe_tutorial, navigation, onboarded_sugggested_people]), + }, [navigation, suggested_people_linked]), ); const mainContent = () => ( @@ -84,18 +79,16 @@ const SuggestedPeopleScreen: React.FC = () => { screenType={ScreenType.SuggestedPeople} /> {/* TODO: Add MutualFriends here */} - {/* TODO: Add TaggsBar here */} - {/* TODO: Add MutualFriends here */} ); - return onboarded_sugggested_people ? ( - mainContent() - ) : ( + return suggested_people_linked === 0 ? ( + ) : ( + mainContent() ); }; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 98986a70..a0ac27e6 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -1,19 +1,29 @@ import React, {useState} from 'react'; -import {Image, ImageBackground, StatusBar, StyleSheet} from 'react-native'; +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 {useDispatch, useSelector} from 'react-redux'; import {TaggSquareButton} from '../../components'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {SP_HEIGHT, SP_WIDTH} from '../../constants'; -import {updateOnboardedSuggestedPeople} from '../../store/actions'; +import {ERROR_UPLOAD} from '../../constants/strings'; +import {sendSuggestedPeoplePhoto} from '../../services'; +import {uploadedSuggestedPeoplePhoto} from '../../store/actions'; +import {RootState} from '../../store/rootReducer'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; const SuggestedPeopleUploadPictureScreen: React.FC = () => { const [image, setImage] = useState(undefined); const [loading, setLoading] = useState(false); + const {userId} = useSelector((state: RootState) => state.user.user); const dispatch = useDispatch(); const openImagePicker = () => { @@ -39,17 +49,17 @@ const SuggestedPeopleUploadPictureScreen: React.FC = () => { .catch((_) => {}); }; - const uploadImage = () => { - // TODO: hit endpoint + const uploadImage = async () => { setLoading(true); - setTimeout(() => { - setLoading(false); - dispatch( - updateOnboardedSuggestedPeople(true, () => { - console.log('updated'); - }), - ); - }, 1000); + if (image) { + const success = await sendSuggestedPeoplePhoto(userId, image); + if (success) { + dispatch(uploadedSuggestedPeoplePhoto()); + } else { + Alert.alert(ERROR_UPLOAD); + } + } + setLoading(false); }; return ( diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts new file mode 100644 index 00000000..4be8c3a5 --- /dev/null +++ b/src/services/SuggestedPeopleService.ts @@ -0,0 +1,39 @@ +import AsyncStorage from '@react-native-community/async-storage'; +import {EDIT_PROFILE_ENDPOINT} from '../constants'; + +export const sendSuggestedPeopleLinked = async ( + userId: string, + stage: number, +) => { + try { + const request = new FormData(); + request.append('suggested_people_linked', stage); + const endpoint = EDIT_PROFILE_ENDPOINT + `${userId}/`; + const token = await AsyncStorage.getItem('token'); + let response = await fetch(endpoint, { + method: 'PATCH', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: request, + }); + return response.status === 200; + } catch (error) { + console.log('Error updating animated tutorial close button press'); + return false; + } +}; + +export const sendSuggestedPeoplePhoto = async ( + useId: string, + photoUri: string, +) => { + try { + // TODO: hit endpoint here + return true; + } catch (error) { + console.log('Error uploading SP photo'); + return false; + } +}; diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts index ce9bdda5..fff35370 100644 --- a/src/services/UserProfileService.ts +++ b/src/services/UserProfileService.ts @@ -2,20 +2,18 @@ import AsyncStorage from '@react-native-community/async-storage'; import moment from 'moment'; import {Alert} from 'react-native'; import RNFetchBlob from 'rn-fetch-blob'; -import {SocialAccountType, UserType} from '../types'; import { - PROFILE_PHOTO_ENDPOINT, - HEADER_PHOTO_ENDPOINT, GET_FB_POSTS_ENDPOINT, GET_IG_POSTS_ENDPOINT, GET_TWITTER_POSTS_ENDPOINT, - PROFILE_INFO_ENDPOINT, + HEADER_PHOTO_ENDPOINT, PASSWORD_RESET_ENDPOINT, + PROFILE_INFO_ENDPOINT, + PROFILE_PHOTO_ENDPOINT, + PROFILE_PHOTO_THUMBNAIL_ENDPOINT, + SEND_OTP_ENDPOINT, TAGG_CUSTOMER_SUPPORT, VERIFY_OTP_ENDPOINT, - SEND_OTP_ENDPOINT, - PROFILE_PHOTO_THUMBNAIL_ENDPOINT, - EDIT_PROFILE_ENDPOINT, } from '../constants'; import { ERROR_DOUBLE_CHECK_CONNECTION, @@ -28,6 +26,7 @@ import { SUCCESS_PWD_RESET, SUCCESS_VERIFICATION_CODE_SENT, } from '../constants/strings'; +import {SocialAccountType} from '../types'; export const loadProfileInfo = async (token: string, userId: string) => { try { @@ -50,16 +49,11 @@ export const loadProfileInfo = async (token: string, userId: string) => { tiktok, university_class, profile_completion_stage, - sp_swipe_tutorial, - // onboarded_sugggested_people, + suggested_people_linked, friendship_status, friendship_requester_id, } = info; birthday = birthday && moment(birthday).format('YYYY-MM-DD'); - console.log( - 'Suggested People loaded from backend for logged in user: ', - sp_swipe_tutorial, - ); return { name, biography, @@ -70,8 +64,7 @@ export const loadProfileInfo = async (token: string, userId: string) => { tiktok, university_class, profile_completion_stage, - sp_swipe_tutorial, - onboarded_sugggested_people: false, + suggested_people_linked, friendship_status, friendship_requester_id, }; @@ -322,27 +315,3 @@ export const sendOtp = async (phone: string) => { return false; } }; - -export const editSPSwipeTutorial = async (user: UserType) => { - try { - const request = new FormData(); - request.append('sp_swipe_tutorial', 1); - const endpoint = EDIT_PROFILE_ENDPOINT + `${user.userId}/`; - const token = await AsyncStorage.getItem('token'); - let response = await fetch(endpoint, { - method: 'PATCH', - headers: { - 'Content-Type': 'multipart/form-data', - Authorization: 'Token ' + token, - }, - body: request, - }); - if (response.status === 200) { - return true; - } else { - return false; - } - } catch (error) { - console.log('Error updating animated tutorial close button press'); - } -}; diff --git a/src/services/index.ts b/src/services/index.ts index 9c168d4f..ef71233a 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -11,3 +11,4 @@ export * from './FCMService'; export * from './WaitlistUserService'; export * from './CommonService'; export * from './CommentService'; +export * from './SuggestedPeopleService'; diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 4229517d..ef134dc5 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -1,9 +1,9 @@ import {Action, ThunkAction} from '@reduxjs/toolkit'; import { - editSPSwipeTutorial, loadAvatar, loadCover, loadProfileInfo, + sendSuggestedPeopleLinked, } from '../../services'; import {UserType} from '../../types/types'; import {getTokenOrLogout} from '../../utils'; @@ -12,13 +12,12 @@ import { setIsOnboardedUser, setNewNotificationReceived, setNewVersionAvailable, - setOnboardedSuggestedPeople, setReplyPosted, + setSuggestedPeopleLinked, socialEdited, userDetailsFetched, userLoggedIn, } from '../reducers'; -import {spSwipeTutorialUpdated} from '../reducers/userReducer'; import {RootState} from '../rootReducer'; import {CommentThreadType} from './../../types/types'; @@ -91,24 +90,6 @@ export const updateProfileCompletionStage = ( } }; -// TODO: this should be called after a successful upload of a first SP image -export const updateOnboardedSuggestedPeople = ( - onboarded: boolean, - callback: () => void, -): ThunkAction, RootState, unknown, Action> => async ( - dispatch, -) => { - try { - dispatch({ - type: setOnboardedSuggestedPeople.type, - payload: {onboarded}, - }); - callback(); - } catch (error) { - console.log(error); - } -}; - export const updateIsOnboardedUser = ( isOnboardedUser: boolean, ): ThunkAction, RootState, unknown, Action> => async ( @@ -182,9 +163,24 @@ export const logout = (): ThunkAction< } }; -export const updateSPSwipeTutorial = ( - user: UserType, - data: number, +export const uploadedSuggestedPeoplePhoto = (): ThunkAction< + Promise, + RootState, + unknown, + Action +> => async (dispatch) => { + try { + dispatch({ + type: setSuggestedPeopleLinked.type, + payload: {stage: 1}, + }); + } catch (error) { + console.log(error); + } +}; + +export const suggestedPeopleAnimatedTutorialFinished = ( + userId: string, ): ThunkAction< Promise, RootState, @@ -192,12 +188,13 @@ export const updateSPSwipeTutorial = ( Action > => async (dispatch) => { try { - // update store first, assume success + // update store first, assume request is successful dispatch({ - type: spSwipeTutorialUpdated.type, - payload: {sp_swipe_tutorial: data}, + type: setSuggestedPeopleLinked.type, + payload: {stage: 2}, }); - return await editSPSwipeTutorial(user); + // need to tell the server that the stage is now 2 + return await sendSuggestedPeopleLinked(userId, 2); } catch (error) { console.log('Error while updating suggested people linked state: ', error); } diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 31b39e82..10fdad25 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -21,8 +21,7 @@ export const NO_PROFILE: ProfileType = { //Default to an invalid value and ignore it gracefully while showing tutorials / popups. profile_completion_stage: -1, - sp_swipe_tutorial: 0, - onboarded_sugggested_people: false, + suggested_people_linked: -1, snapchat: '', tiktok: '', friendship_status: 'no_record', diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index ea14c9ab..5203fa3c 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -46,12 +46,8 @@ const userDataSlice = createSlice({ state.profile.profile_completion_stage = action.payload.stage; }, - spSwipeTutorialUpdated: (state, action) => { - state.profile.sp_swipe_tutorial = action.payload.sp_swipe_tutorial; - }, - - setOnboardedSuggestedPeople: (state, action) => { - state.profile.onboarded_sugggested_people = action.payload.onboarded; + setSuggestedPeopleLinked: (state, action) => { + state.profile.suggested_people_linked = action.payload.stage; }, setIsOnboardedUser: (state, action) => { @@ -77,11 +73,10 @@ export const { userDetailsFetched, socialEdited, profileCompletionStageUpdated, - setOnboardedSuggestedPeople, + setSuggestedPeopleLinked, setIsOnboardedUser, setNewVersionAvailable, setNewNotificationReceived, setReplyPosted, - spSwipeTutorialUpdated, } = userDataSlice.actions; export const userDataReducer = userDataSlice.reducer; diff --git a/src/types/types.ts b/src/types/types.ts index 19eaa8f0..bfa45a25 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -23,8 +23,7 @@ export interface ProfileType { gender: string; university_class: number; profile_completion_stage: number; - sp_swipe_tutorial: number; - onboarded_sugggested_people: boolean; + suggested_people_linked: number; birthday: Date | undefined; snapchat: string; tiktok: string; -- cgit v1.2.3-70-g09d2 From ce89c28debb957e37eb30e2efec00abb268cdb4a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 15 Feb 2021 13:32:34 -0500 Subject: hitting endpoint --- src/constants/api.ts | 4 ++++ src/constants/strings.ts | 1 - .../SuggestedPeopleUploadPictureScreen.tsx | 2 +- src/services/SuggestedPeopleService.ts | 25 ++++++++++++++++------ 4 files changed, 23 insertions(+), 9 deletions(-) (limited to 'src/screens') diff --git a/src/constants/api.ts b/src/constants/api.ts index 165bd550..215dadc0 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -1,3 +1,4 @@ +/* eslint-disable */ // const BASE_URL: string = 'http://3.22.188.127/'; // prod server const BASE_URL: string = 'http://127.0.0.1:8000/'; // local server @@ -32,6 +33,9 @@ export const DISCOVER_ENDPOINT: string = API_URL + 'discover/'; export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/'; export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/'; +// Suggested People +export const SP_UPDATE_PICTURE: string = API_URL + 'suggested_people/update_picture/'; + // Register as FCM device export const FCM_ENDPOINT: string = API_URL + 'fcm/'; diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 9680320a..6cf5e7c2 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -1,4 +1,3 @@ - /* eslint-disable */ // Below is the regex to convert this into a csv for the Google Sheet // export const (.*) = .*?(['|"|`])(.*)\2; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index a0ac27e6..dd99cf83 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -52,7 +52,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = () => { const uploadImage = async () => { setLoading(true); if (image) { - const success = await sendSuggestedPeoplePhoto(userId, image); + const success = await sendSuggestedPeoplePhoto(image); if (success) { dispatch(uploadedSuggestedPeoplePhoto()); } else { diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index 4be8c3a5..7e43c3b6 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -1,5 +1,5 @@ import AsyncStorage from '@react-native-community/async-storage'; -import {EDIT_PROFILE_ENDPOINT} from '../constants'; +import {EDIT_PROFILE_ENDPOINT, SP_UPDATE_PICTURE} from '../constants'; export const sendSuggestedPeopleLinked = async ( userId: string, @@ -25,13 +25,24 @@ export const sendSuggestedPeopleLinked = async ( } }; -export const sendSuggestedPeoplePhoto = async ( - useId: string, - photoUri: string, -) => { +export const sendSuggestedPeoplePhoto = async (photoUri: string) => { try { - // TODO: hit endpoint here - return true; + const token = await AsyncStorage.getItem('token'); + const form = new FormData(); + form.append('suggested_people', { + uri: photoUri, + name: 'sp_photo.jpg', + type: 'image/jpg', + }); + const response = await fetch(SP_UPDATE_PICTURE, { + method: 'POST', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: form, + }); + return response.status === 201; } catch (error) { console.log('Error uploading SP photo'); return false; -- cgit v1.2.3-70-g09d2 From bf26387575deb421ef4fa974174e45a7b55e3831 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 16 Feb 2021 13:09:11 -0500 Subject: removed dead code --- .../suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index dd99cf83..82af9428 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -10,20 +10,18 @@ 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, useSelector} from 'react-redux'; +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 {RootState} from '../../store/rootReducer'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; const SuggestedPeopleUploadPictureScreen: React.FC = () => { const [image, setImage] = useState(undefined); const [loading, setLoading] = useState(false); - const {userId} = useSelector((state: RootState) => state.user.user); const dispatch = useDispatch(); const openImagePicker = () => { -- cgit v1.2.3-70-g09d2 From a9e0e7b0e97da72e58e2ed4f18d824e77daf181a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 16 Feb 2021 15:02:19 -0500 Subject: default value to prevent app crash when no internet --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 49806544..e56a6cca 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -25,7 +25,7 @@ import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; 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 -- cgit v1.2.3-70-g09d2 From 200cc2cc2c37d588bc37240161c3974f63ce02b4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 16 Feb 2021 19:15:49 -0500 Subject: slight layout change --- .../suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 82af9428..1b30c72f 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -135,7 +135,7 @@ const styles = StyleSheet.create({ fontWeight: '600', color: 'white', marginTop: '5%', - width: SCREEN_WIDTH * 0.8, + width: SCREEN_WIDTH * 0.7, }, buttonLabel: { fontWeight: '600', @@ -158,6 +158,7 @@ const styles = StyleSheet.create({ width: normalize(100), height: normalize(100), marginTop: '30%', + marginBottom: '10%', }, }); export default SuggestedPeopleUploadPictureScreen; -- cgit v1.2.3-70-g09d2 From ba20f71620f778f685e0bab455e9321b392019d5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 18 Feb 2021 14:09:18 -0500 Subject: fixed merge issue --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index ab4dda6a..d7037b14 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -75,7 +75,6 @@ const SuggestedPeopleScreen: React.FC = () => { {/* 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 */} - { profileBodyHeight={0} screenType={ScreenType.SuggestedPeople} /> + {/* TODO: Add MutualFriends here */} -- cgit v1.2.3-70-g09d2 From 04b998e6cca0d76c391b91403172c53f276db64a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 18 Feb 2021 14:12:33 -0500 Subject: removed outdated comments --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 5 ----- 1 file changed, 5 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index d7037b14..3437cd85 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -59,7 +59,6 @@ const SuggestedPeopleScreen: React.FC = () => { Suggested People - {/* Added first row contaning name, username, add button (w/o functionality) */} {firstName} @@ -72,9 +71,6 @@ const SuggestedPeopleScreen: React.FC = () => { {'Add Friend'} - {/* 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 - */} { screenType={ScreenType.SuggestedPeople} /> - {/* TODO: Add MutualFriends here */} -- cgit v1.2.3-70-g09d2