From 5db2a2b38225a143e23ab635dbecadfb424a4546 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 16:27:34 -0500 Subject: added onboarded flag to store --- src/services/UserProfileService.ts | 2 ++ src/store/actions/user.ts | 19 +++++++++++++++++++ src/store/initialStates.ts | 1 + src/store/reducers/userReducer.ts | 5 +++++ src/types/types.ts | 1 + 5 files changed, 28 insertions(+) (limited to 'src') diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts index 3bca66f3..ce9bdda5 100644 --- a/src/services/UserProfileService.ts +++ b/src/services/UserProfileService.ts @@ -51,6 +51,7 @@ export const loadProfileInfo = async (token: string, userId: string) => { university_class, profile_completion_stage, sp_swipe_tutorial, + // onboarded_sugggested_people, friendship_status, friendship_requester_id, } = info; @@ -70,6 +71,7 @@ export const loadProfileInfo = async (token: string, userId: string) => { university_class, profile_completion_stage, sp_swipe_tutorial, + onboarded_sugggested_people: false, friendship_status, friendship_requester_id, }; diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 990f9260..bfbe9c80 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -12,6 +12,7 @@ import { setIsOnboardedUser, setNewNotificationReceived, setNewVersionAvailable, + setOnboardedSuggestedPeople, setReplyPosted, socialEdited, userDetailsFetched, @@ -90,6 +91,24 @@ export const updateProfileCompletionStage = ( } }; +// TODO: this should be called after a successful upload of a first SP image +export const updateOnboardedSuggestedPeople = ( + onboarded: boolean, + callback: () => {}, +): 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 ( diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 93b1bc6e..31b39e82 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -22,6 +22,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, snapchat: '', tiktok: '', friendship_status: 'no_record', diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index 773977db..ea14c9ab 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -50,6 +50,10 @@ const userDataSlice = createSlice({ state.profile.sp_swipe_tutorial = action.payload.sp_swipe_tutorial; }, + setOnboardedSuggestedPeople: (state, action) => { + state.profile.onboarded_sugggested_people = action.payload.onboarded; + }, + setIsOnboardedUser: (state, action) => { state.isOnboardedUser = action.payload.isOnboardedUser; }, @@ -73,6 +77,7 @@ export const { userDetailsFetched, socialEdited, profileCompletionStageUpdated, + setOnboardedSuggestedPeople, setIsOnboardedUser, setNewVersionAvailable, setNewNotificationReceived, diff --git a/src/types/types.ts b/src/types/types.ts index fe16fb8e..19eaa8f0 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -24,6 +24,7 @@ export interface ProfileType { university_class: number; profile_completion_stage: number; sp_swipe_tutorial: number; + onboarded_sugggested_people: boolean; birthday: Date | undefined; snapchat: string; tiktok: string; -- cgit v1.2.3-70-g09d2 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 + src/screens/index.ts | 1 + .../suggestedPeople/SuggestedPeopleScreen.tsx | 89 +++++++++++----------- .../SuggestedPeopleWelcomeScreen.tsx | 14 ++++ src/screens/suggestedPeopleOnboarding/index.ts | 1 + 7 files changed, 98 insertions(+), 44 deletions(-) create mode 100644 src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx create mode 100644 src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx create mode 100644 src/routes/suggestedPeopleOnboarding/index.ts create mode 100644 src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx create mode 100644 src/screens/suggestedPeopleOnboarding/index.ts (limited to 'src') 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'; 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') 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') 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') 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') 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') 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') 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') 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 de4328dfd5d91cc1b0157e748975d8bc079491f0 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 11 Feb 2021 14:08:05 -0500 Subject: massive friends button cleanup --- src/components/common/FriendsButton.tsx | 148 +++++++++++++++++++------------- src/components/profile/ProfileBody.tsx | 100 ++++----------------- 2 files changed, 102 insertions(+), 146 deletions(-) (limited to 'src') diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx index 243a551d..a1e107c5 100644 --- a/src/components/common/FriendsButton.tsx +++ b/src/components/common/FriendsButton.tsx @@ -1,18 +1,34 @@ -import React from 'react'; -import {StyleSheet} from 'react-native'; -import {Button} from 'react-native-elements'; -import {ScreenType} from '../../types'; +import React, {Fragment} from 'react'; +import { + StyleProp, + StyleSheet, + Text, + TextStyle, + View, + ViewStyle, +} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {useDispatch, useSelector, useStore} from 'react-redux'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import {handleFriendUnfriend, SCREEN_WIDTH} from '../../utils'; import {NO_PROFILE, NO_USER} from '../../store/initialStates'; -import {useDispatch, useSelector, useStore} from 'react-redux'; import {RootState} from '../../store/rootReducer'; +import {ScreenType} from '../../types'; +import {handleFriendUnfriend, normalize, SCREEN_WIDTH} from '../../utils'; -interface ProfileBodyProps { +interface FriendsButtonProps { userXId: string | undefined; screenType: ScreenType; + friendship_requester_id: string; + onAcceptRequest: () => void; + onRejectRequest: () => void; } -const FriendsButton: React.FC = ({userXId, screenType}) => { +const FriendsButton: React.FC = ({ + userXId, + screenType, + friendship_requester_id, + onAcceptRequest, + onRejectRequest, +}) => { const dispatch = useDispatch(); const {user = NO_USER, profile = NO_PROFILE} = userXId @@ -24,35 +40,29 @@ const FriendsButton: React.FC = ({userXId, screenType}) => { ); const state = useStore().getState(); - const {friendship_status} = profile; - return ( - <> - {friendship_status === 'no_record' && ( -