check if onboarded, added header, loads current sp image

10 files changed, 99 insertions, 29 deletions

diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index f9cd81a7..90f5da48 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -1,11 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Alert, Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {useSelector} from 'react-redux';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
 import PersonOutline from '../../assets/ionicons/person-outline.svg';
-import SuggestedOutline from '../../assets/ionicons/suggested-outline.svg';
 import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants';
+import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {GenericMoreInfoDrawer} from '../common';
@@ -26,6 +26,9 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
     user: {userId, username},
   } = useSelector((state: RootState) => state.user);
   const isOwnProfile = !userXId || userXName === username;
+  const {suggested_people_linked} = useSelector(
+    (state: RootState) => state.user.profile,
+  );
 
   const goToEditProfile = () => {
     navigation.push('EditProfile', {
@@ -36,8 +39,12 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
   };
 
   const goToUpdateSPProfile = () => {
-    navigation.push('UpdateSPPicture');
-    setIsOpen(false);
+    if (suggested_people_linked === 0) {
+      Alert.alert(ERROR_ATTEMPT_EDIT_SP);
+    } else {
+      navigation.push('UpdateSPPicture');
+      setIsOpen(false);
+    }
   };
 
   const onBlockUnblock = () => {
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 215dadc0..6e2b28ec 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -35,6 +35,7 @@ export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
 
 // Suggested People
 export const SP_UPDATE_PICTURE: string = API_URL + 'suggested_people/update_picture/';
+export const SP_BASE_ENDPOINT: string = API_URL + 'suggested_people/';
 
 // 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 0965bad0..5ae19e9c 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -4,6 +4,7 @@
 // replace with: $1\t$3
 export const ADD_COMMENT_TEXT = (username?: string) => username ? `Reply to ${username}` : 'Add a comment...'
 export const COMING_SOON_MSG = 'Creating more fun things for you, surprises coming soon 😉';
+export const ERROR_ATTEMPT_EDIT_SP = 'Can\'t let you do that yet! Please onboard Suggested People first!';
 export const ERROR_AUTHENTICATION = 'An error occurred during authentication. Please login again!';
 export const ERROR_CATEGORY_CREATION = 'There was a problem creating your categories. Please refresh and try again.';
 export const ERROR_CATEGORY_UPDATE = 'There was a problem updating your categories. Please refresh and try again';
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 8811de3e..aec860f2 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -227,6 +227,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         name="UpdateSPPicture"
         component={SuggestedPeopleUploadPictureScreen}
         initialParams={{goTo: 'Profile'}}
+        options={{
+          ...headerBarOptions('white', ''),
+        }}
       />
     </MainStack.Navigator>
   );
diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx
index d827829c..bf34ba6e 100644
--- a/src/screens/suggestedPeople/AnimatedTutorial.tsx
+++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx
@@ -15,13 +15,7 @@ const AnimatedTutorial: React.FC = () => {
   const {user} = useSelector((state: RootState) => state.user);
 
   const handleCloseAnimationTutorial = async () => {
-    const suggested_people_linked = 2;
-    dispatch(
-      suggestedPeopleAnimatedTutorialFinished(
-        user.userId,
-        suggested_people_linked,
-      ),
-    );
+    dispatch(suggestedPeopleAnimatedTutorialFinished(user.userId));
     navigation.pop();
   };
   return (
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index f16146ad..b49761a0 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -1,5 +1,5 @@
-import { useNavigation } from '@react-navigation/native';
-import React, {useState} from 'react';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -11,13 +11,17 @@ 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 {ERROR_UPLOAD} from '../../constants/strings';
-import {sendSuggestedPeoplePhoto} from '../../services';
+import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
+import {
+  getSuggestedPeopleProfile,
+  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 = ({route}) => {
@@ -26,6 +30,22 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
   const navigation = useNavigation();
+  const {userId: loggedInUserId} = useSelector(
+    (state: RootState) => state.user.user,
+  );
+
+  useEffect(() => {
+    const loadData = async () => {
+      const response = await getSuggestedPeopleProfile(loggedInUserId);
+      if (response) {
+        setImage(response.suggested_people_url);
+      }
+    };
+    // if we're in edit SP, attempt to load current sp image
+    if (goTo === 'Profile') {
+      loadData();
+    }
+  }, []);
 
   const openImagePicker = () => {
     ImagePicker.openPicker({
@@ -55,8 +75,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
     if (image) {
       const success = await sendSuggestedPeoplePhoto(image);
       if (success) {
-        const suggested_people_linked = 1;
-        dispatch(uploadedSuggestedPeoplePhoto(suggested_people_linked));
+        dispatch(uploadedSuggestedPeoplePhoto());
       } else {
         Alert.alert(ERROR_UPLOAD);
       }
@@ -66,6 +85,9 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
     // Navigated back to Profile if user is editing their Suggested People Picture
     if (goTo === 'Profile') {
       navigation.goBack();
+      setTimeout(() => {
+        Alert.alert(SUCCESS_PIC_UPLOAD);
+      }, 500);
     }
   };
 
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index 5dbf1963..525c68b1 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -1,5 +1,10 @@
 import AsyncStorage from '@react-native-community/async-storage';
-import {EDIT_PROFILE_ENDPOINT, SP_UPDATE_PICTURE} from '../constants';
+import {
+  EDIT_PROFILE_ENDPOINT,
+  SP_BASE_ENDPOINT,
+  SP_UPDATE_PICTURE,
+} from '../constants';
+import {SuggestedPeopleDataType} from '../types';
 
 export const sendSuggestedPeopleLinked = async (
   userId: string,
@@ -48,3 +53,24 @@ export const sendSuggestedPeoplePhoto = async (photoUri: string) => {
     return false;
   }
 };
+
+export const getSuggestedPeopleProfile = async (userId: string) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const response = await fetch(SP_BASE_ENDPOINT + userId + '/', {
+      method: 'GET',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+    });
+    if (response.status === 200) {
+      const data: SuggestedPeopleDataType = await response.json();
+      return data;
+    } else {
+      return undefined;
+    }
+  } catch (error) {
+    console.log('Error retrieving SP info');
+    return undefined;
+  }
+};
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 30dfe8ba..3511dcf3 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -163,15 +163,16 @@ export const logout = (): ThunkAction<
   }
 };
 
-export const uploadedSuggestedPeoplePhoto = (
-  suggested_people_linked: number,
-): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
-  dispatch,
-) => {
+export const uploadedSuggestedPeoplePhoto = (): ThunkAction<
+  Promise<void>,
+  RootState,
+  unknown,
+  Action<string>
+> => async (dispatch) => {
   try {
     dispatch({
       type: setSuggestedPeopleLinked.type,
-      payload: suggested_people_linked,
+      payload: {suggested_people_linked: 1},
     });
   } catch (error) {
     console.log(error);
@@ -180,7 +181,6 @@ export const uploadedSuggestedPeoplePhoto = (
 
 export const suggestedPeopleAnimatedTutorialFinished = (
   userId: string,
-  suggested_people_linked: number,
 ): ThunkAction<
   Promise<boolean | undefined>,
   RootState,
@@ -191,10 +191,10 @@ export const suggestedPeopleAnimatedTutorialFinished = (
     // update store first, assume request is successful
     dispatch({
       type: setSuggestedPeopleLinked.type,
-      payload: {stage: 2},
+      payload: {suggested_people_linked: 2},
     });
     // need to tell the server that the stage is now 2
-    return await sendSuggestedPeopleLinked(userId, suggested_people_linked);
+    return await sendSuggestedPeopleLinked(userId, 2);
   } catch (error) {
     console.log('Error while updating suggested people linked state: ', error);
   }
diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts
index 5653d26d..ea9294ec 100644
--- a/src/store/reducers/userReducer.ts
+++ b/src/store/reducers/userReducer.ts
@@ -47,7 +47,8 @@ const userDataSlice = createSlice({
     },
 
     setSuggestedPeopleLinked: (state, action) => {
-      state.profile.suggested_people_linked = action.payload.suggested_people_linked;
+      state.profile.suggested_people_linked =
+        action.payload.suggested_people_linked;
     },
 
     setIsOnboardedUser: (state, action) => {
diff --git a/src/types/types.ts b/src/types/types.ts
index 3c17cfa4..8e9e8a60 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -222,3 +222,18 @@ export type TypeOfNotification =
   | 'MOM_3+'
   // notification_object is MomentType
   | 'MOM_FRIEND';
+
+export type UniversityBadge = {
+  id: string;
+  name: string;
+  university: string;
+  category: string;
+};
+
+export type SuggestedPeopleDataType = {
+  user: ProfilePreviewType;
+  mutual_friends: ProfilePreviewType[];
+  badges: UniversityBadge[];
+  social_links: string[];
+  suggested_people_url: string;
+};