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 --- .../SuggestedPeopleOnboardingStackNavigator.tsx | 7 ++++++ .../SuggestedPeopleOnboardingStackScreen.tsx | 28 ++++++++++++++++++++++ src/routes/suggestedPeopleOnboarding/index.ts | 2 ++ 3 files changed, 37 insertions(+) create mode 100644 src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx create mode 100644 src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx create mode 100644 src/routes/suggestedPeopleOnboarding/index.ts (limited to 'src/routes') diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx new file mode 100644 index 00000000..40df8e0f --- /dev/null +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx @@ -0,0 +1,7 @@ +import {createStackNavigator} from '@react-navigation/stack'; + +export type SuggestedPeopleOnboardingStackParams = { + WelcomeScreen: undefined; +}; + +export const SuggestedPeopleOnboardingStack = createStackNavigator(); diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx new file mode 100644 index 00000000..95070ed2 --- /dev/null +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx @@ -0,0 +1,28 @@ +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, + }, +}); + +const SuggestedPeopleOnboardingStackScreen: React.FC = () => { + return ( + + + + ); +}; + +export default SuggestedPeopleOnboardingStackScreen; diff --git a/src/routes/suggestedPeopleOnboarding/index.ts b/src/routes/suggestedPeopleOnboarding/index.ts new file mode 100644 index 00000000..df711493 --- /dev/null +++ b/src/routes/suggestedPeopleOnboarding/index.ts @@ -0,0 +1,2 @@ +export * from './SuggestedPeopleOnboardingStackNavigator'; +export * from './SuggestedPeopleOnboardingStackScreen'; -- 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/routes') 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/routes') 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 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/routes') 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