From 94d24edc7cafb12aadeae246eeb5b3132b1c2750 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 10 Feb 2021 15:36:12 -0500
Subject: upload photo done

---
 .../suggestedPeople/SuggestedPeopleScreen.tsx      |   8 +-
 .../SuggestedPeopleUploadPictureScreen.tsx         | 124 ++++++++++++++++++---
 2 files changed, 111 insertions(+), 21 deletions(-)

(limited to 'src/screens')

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;
-- 
cgit v1.2.3-70-g09d2