upload photo done

7 files changed, 120 insertions, 23 deletions

diff --git a/src/assets/images/images.png b/src/assets/images/images.png
new file mode 100644
index 00000000..43f42556
--- /dev/null
+++ b/src/assets/images/images.png
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
--- /dev/null
+++ b/src/assets/images/suggested-people-preview-silhouette.png
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 (
     <SuggestedPeopleOnboardingStack.Navigator
       initialRouteName="WelcomeScreen"
-      screenOptions={{headerShown: false}}>
+      screenOptions={{
+        headerShown: false,
+        gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
+      }}>
       <SuggestedPeopleOnboardingStack.Screen
         name="WelcomeScreen"
         component={SuggestedPeopleWelcomeScreen}
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 2df48d7d..52a3c74b 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -22,11 +22,9 @@ import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
  */
 
 const SuggestedPeopleScreen: React.FC = () => {
-  // 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<string | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  const openImagePicker = () => {
+    ImagePicker.openPicker({
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
+      width: SP_WIDTH,
+      height: SP_HEIGHT,
+      cropping: true,
+      cropperToolbarTitle: 'Select Photo',
+      mediaType: 'photo',
+    })
+      .then((picture) => {
+        if ('path' in picture) {
+          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 && <TaggLoadingIndicator fullscreen />}
       <StatusBar barStyle={'light-content'} />
       <SafeAreaView style={styles.container}>
         <Text style={styles.title}>PICTURE</Text>
-        <Text style={styles.body}>Adjust picture or go back to reupload</Text>
-        {/* <TaggSquareButton
-          onPress={() => {}}
-          title={'Done'}
-          buttonStyle={'normal'}
-          buttonColor={'purple'}
-          labelColor={'white'}
-          style={styles.buttonStyle}
-          labelStyle={styles.buttonLabel}
-        /> */}
+        <Text style={styles.body}>Tap again to select another one</Text>
+        {image ? (
+          <TouchableOpacity onPress={openImagePicker}>
+            <ImageBackground
+              source={{uri: image}}
+              style={[styles.imageContainer, styles.overlay]}
+              borderRadius={30}>
+              <Image
+                style={styles.overlay}
+                source={require('../../assets/images/suggested-people-preview-silhouette.png')}
+              />
+            </ImageBackground>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity onPress={openImagePicker}>
+            <ImageBackground
+              source={require('../../assets/images/suggested-people-preview-silhouette.png')}
+              style={[styles.imageContainer, styles.overlay]}>
+              <Image
+                style={styles.images}
+                source={require('../../assets/images/images.png')}
+              />
+              <Text style={styles.body}>Upload Picture</Text>
+            </ImageBackground>
+          </TouchableOpacity>
+        )}
+        {image && (
+          <TaggSquareButton
+            onPress={uploadImage}
+            title={'Done'}
+            buttonStyle={'normal'}
+            buttonColor={'purple'}
+            labelColor={'white'}
+            style={styles.buttonStyle}
+            labelStyle={styles.buttonLabel}
+          />
+        )}
       </SafeAreaView>
     </>
   );
@@ -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<Promise<void>, RootState, unknown, Action<string>> => async (
   dispatch,
 ) => {