Merge pull request #256 from shravyaramesh/profile-preview

Sp profile preview

3 files changed, 64 insertions, 9 deletions

diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 641677e3..05ee18bb 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -153,6 +153,7 @@ const styles = StyleSheet.create({
     marginBottom: 25,
   },
   container: {
+    backgroundColor: 'white',
     shadowColor: '#000',
     shadowRadius: 10,
     shadowOffset: {width: 0, height: 2},
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 89528a92..195604a3 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {
@@ -10,6 +11,7 @@ import {
   View,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TabsGradient, TaggsBar} from '../../components';
@@ -24,7 +26,13 @@ import {
   ScreenType,
   SuggestedPeopleDataType,
 } from '../../types';
-import {fetchUserX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  fetchUserX,
+  getUserAsProfilePreviewType,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 import {userXInStore} from './../../utils/';
 
 /**
@@ -41,6 +49,9 @@ const SuggestedPeopleScreen: React.FC = () => {
   const {suggested_people_linked} = useSelector(
     (state: RootState) => state.user.profile,
   ) ?? {suggested_people_linked: -1};
+  const {userId: loggedInUserId} = useSelector(
+    (state: RootState) => state.user.user,
+  );
   const [people, setPeople] = useState<SuggestedPeopleDataType[]>([]);
   const [page, setPage] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
@@ -52,16 +63,48 @@ const SuggestedPeopleScreen: React.FC = () => {
     loadMore(false);
   }, [page]);
 
-  const loadMore = (resetData: boolean) => {
+  useFocusEffect(() => {
+    const appendSelf = async () => {
+      AsyncStorage.getItem('suggested_people_url').then((image) => {
+        console.log('image path: ', image);
+        const self = {
+          user: getUserAsProfilePreviewType(
+            state.user.user,
+            state.user.profile,
+          ),
+          mutual_friends: [],
+          badges: [],
+          social_links: [],
+          suggested_people_url: image ? image : '',
+        };
+        people.unshift(self);
+        setPeople(people);
+      });
+    };
+    if (suggested_people_linked < 2) {
+      if (people.length > 1 && people[0].user.id !== loggedInUserId) {
+        appendSelf();
+      }
+    }
+  });
+
+  const loadMore = async (resetData: boolean) => {
     const loadNextPage = async () =>
-      await getSuggestedPeople(SP_PAGE_SIZE, page * SP_PAGE_SIZE);
+      await getSuggestedPeople(
+        SP_PAGE_SIZE,
+        resetData ? 0 : page * SP_PAGE_SIZE,
+      );
+
     loadNextPage().then((newUsers) => {
+      loadUserDataToStore(newUsers.map((ppl) => ppl.user));
+      let newPeople = [];
       if (resetData) {
-        setPeople([]);
+        newPeople = newUsers;
         setPage(0);
+      } else {
+        newPeople = people.concat(newUsers);
       }
-      loadUserDataToStore(newUsers.map((ppl) => ppl.user));
-      setPeople(people.concat(newUsers));
+      setPeople(newPeople);
     });
   };
 
@@ -132,10 +175,17 @@ const SuggestedPeopleScreen: React.FC = () => {
           <View style={styles.body}>
             <View style={styles.marginManager}>
               <View style={styles.addUserContainer}>
-                <View style={styles.nameInfoContainer}>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('Profile', {
+                      userXId: data.user.id,
+                      screenType,
+                    });
+                  }}
+                  style={styles.nameInfoContainer}>
                   <Text style={styles.firstName}>{data.user.first_name}</Text>
                   <Text style={styles.username}>@{data.user.username}</Text>
-                </View>
+                </TouchableOpacity>
                 {/* TODO: Finish me ?! */}
                 {/* <TouchableOpacity
                 activeOpacity={0.5}
@@ -149,7 +199,9 @@ const SuggestedPeopleScreen: React.FC = () => {
             </View>
             <TaggsBar
               y={y}
-              userXId={data.user.id}
+              userXId={
+                data.user.id === loggedInUserId ? undefined : data.user.id
+              }
               profileBodyHeight={0}
               screenType={screenType}
               whiteRing={true}
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index b49761a0..5b678969 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -1,5 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
 import {
   Alert,
   Image,
@@ -76,6 +77,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
       const success = await sendSuggestedPeoplePhoto(image);
       if (success) {
         dispatch(uploadedSuggestedPeoplePhoto());
+        await AsyncStorage.setItem('suggested_people_url', image);
       } else {
         Alert.alert(ERROR_UPLOAD);
       }