[TMA-13] List of following (#72)

* move async-storage

* removed lock files

* added lock files to gitignore

* added the wrong file to gitignore

* added following list

* added numFollowers; removed redundant code

* removed followercount stuff for now

* Fixed follower count

* Made come more changes

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

9 files changed, 81 insertions, 36 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 50e9d627..8d69b3b0 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -11,7 +11,11 @@ import {Moment} from '../moments';
 import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
-import {loadFollowers, followOrUnfollowUser} from '../../services';
+import {
+  loadFollowers,
+  loadFollowing,
+  followOrUnfollowUser,
+} from '../../services';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -33,6 +37,9 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   const [followers, setFollowers] = React.useState<Array<ProfilePreviewType>>(
     [],
   );
+  const [following, setFollowing] = React.useState<Array<ProfilePreviewType>>(
+    [],
+  );
   const {user: loggedInUser} = React.useContext(AuthContext);
 
   /**
@@ -110,6 +117,11 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
         token,
       );
 
+      const listFollowing: ProfilePreviewType[] = await loadFollowing(
+        userId,
+        token,
+      );
+
       /**
        * Check if the logged in user actually follows the user being viewed.
        */
@@ -121,14 +133,10 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
         setFollowed(isActuallyFollowed);
       }
       setFollowers(listFollowers);
+      setFollowing(listFollowing);
     };
 
-    /**
-     * Update the followed value if and only if a profile is being viewed and you are loading a profile afresh that is not your own profile.
-     */
-    if (isProfileView && !isOwnProfile) {
-      updateFollowedValue();
-    }
+    updateFollowedValue();
   }, []);
 
   /**
@@ -158,8 +166,12 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}
       stickyHeaderIndices={[2, 4]}>
-      <ProfileCutout/>
-      <ProfileHeader {...{isProfileView}} />
+      <ProfileCutout />
+      <ProfileHeader
+        isProfileView={isProfileView}
+        numFollowing={following.length}
+        numFollowers={followers.length}
+      />
       <ProfileBody
         {...{
           onLayout,
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
index a3f9f34d..9cace17d 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FollowCount.tsx
@@ -15,6 +15,7 @@ const FollowCount: React.FC<FollowCountProps> = ({
   count,
   isProfileView,
 }) => {
+  const navigation = useNavigation();
   const displayed: string =
     count < 5e3
       ? `${count}`
@@ -23,12 +24,12 @@ const FollowCount: React.FC<FollowCountProps> = ({
       : count < 1e6
       ? `${(count / 1e3).toFixed(0)}k`
       : `${count / 1e6}m`;
-  const navigation = useNavigation();
   return (
     <TouchableOpacity
       onPress={() =>
         navigation.navigate('FollowersListScreen', {
           isProfileView: isProfileView,
+          isFollowers: mode === 'followers',
         })
       }>
       <View style={[styles.container, style]}>
diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Followers.tsx
index e0fee303..bee02e07 100644
--- a/src/components/profile/Followers.tsx
+++ b/src/components/profile/Followers.tsx
@@ -6,11 +6,11 @@ import {useNavigation} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
 
 interface FollowersListProps {
-  followers: Array<ProfilePreviewType>;
+  result: Array<ProfilePreviewType>;
   sectionTitle: string;
 }
 
-const Followers: React.FC<FollowersListProps> = ({followers}) => {
+const Followers: React.FC<FollowersListProps> = ({result, sectionTitle}) => {
   const navigation = useNavigation();
   return (
     <>
@@ -23,14 +23,14 @@ const Followers: React.FC<FollowersListProps> = ({followers}) => {
             navigation.goBack();
           }}
         />
-        <Text style={styles.title}>{'Followers'}</Text>
+        <Text style={styles.title}>{sectionTitle}</Text>
       </View>
-      {followers.map((profilePreview) => (
+      {result.map((profilePreview) => (
         <ProfilePreview
           style={styles.follower}
           key={profilePreview.id}
           {...{profilePreview}}
-          isComment={false}
+          isComment={true}
         />
       ))}
     </>
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 25789525..f3ef5dfa 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -5,12 +5,15 @@ import FollowCount from './FollowCount';
 import {View, Text, StyleSheet} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {AuthContext, ProfileContext} from '../../routes/';
+import { ProfilePreviewType } from 'src/types';
 
 type ProfileHeaderProps = {
-  isProfileView: boolean;
+  isProfileView: boolean,
+  numFollowing: number,
+  numFollowers: number;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView}) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView, numFollowing, numFollowers}) => {
   const {
     profile: {name},
   } = isProfileView
@@ -26,13 +29,13 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView}) => {
             <FollowCount
               style={styles.follows}
               mode="followers"
-              count={318412}
+              count={numFollowers}
               isProfileView={isProfileView}
             />
             <FollowCount
               style={styles.follows}
               mode="following"
-              count={1036}
+              count={numFollowing}
               isProfileView={isProfileView}
             />
           </View>
diff --git a/src/constants/api.ts b/src/constants/api.ts
index ce9b24f4..4effc1d3 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -20,6 +20,7 @@ export const COMMENTS_ENDPOINT: string = API_URL + 'comments/';
 export const FOLLOW_USER_ENDPOINT: string = API_URL + 'follow/';
 export const UNFOLLOW_USER_ENDPOINT: string = API_URL + 'unfollow/';
 export const FOLLOWERS_ENDPOINT: string = API_URL + 'followers/';
+export const FOLLOWING_ENDPOINT: string = API_URL + 'following/';
 
 // Register Social Link (Non-integrated)
 export const LINK_SNAPCHAT_ENDPOINT: string = API_URL + 'link-sc/';
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index 0cb20f75..d85f003e 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -27,7 +27,8 @@ export type ProfileStackParams = {
     isProfileView: boolean;
   };
   FollowersListScreen: {
-    isProfileView: boolean;
+    isProfileView: boolean,
+    isFollowers: boolean;
   };
 };
 
diff --git a/src/routes/viewProfile/ProfileProvider.tsx b/src/routes/viewProfile/ProfileProvider.tsx
index c4942ea0..0600b65b 100644
--- a/src/routes/viewProfile/ProfileProvider.tsx
+++ b/src/routes/viewProfile/ProfileProvider.tsx
@@ -116,6 +116,9 @@ const ProfileProvider: React.FC = ({children}) => {
         updateMoments: (value) => {
           setNewMomentsAvailable(value);
         },
+        socialsNeedUpdate: (socials: string[]) => {
+          setSocialsNeedUpdate(socials);
+        },
       }}>
       {children}
     </ProfileContext.Provider>
diff --git a/src/screens/profile/FollowersListScreen.tsx b/src/screens/profile/FollowersListScreen.tsx
index 5150c77d..21778929 100644
--- a/src/screens/profile/FollowersListScreen.tsx
+++ b/src/screens/profile/FollowersListScreen.tsx
@@ -3,13 +3,14 @@ import {RouteProp} from '@react-navigation/native';
 import {TabsGradient, Followers, CenteredView} from '../../components';
 import Animated from 'react-native-reanimated';
 import {AuthContext, ProfileContext} from '../../routes/';
-import {FOLLOWERS_ENDPOINT} from '../../constants';
+import {FOLLOWERS_ENDPOINT, FOLLOWING_ENDPOINT} from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
 import {ProfilePreviewType} from '../../types';
 import {ScrollView} from 'react-native-gesture-handler';
 import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils';
 import {StyleSheet, View} from 'react-native';
 import {ProfileStackParams} from '../../routes';
+import { loadFollowers, loadFollowing } from '../../services/UserFollowServices';
 
 type FollowersListScreenRouteProp = RouteProp<
   ProfileStackParams,
@@ -20,37 +21,39 @@ interface FollowersListScreenProps {
 }
 
 const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => {
-  const {isProfileView} = route.params;
+  const {isProfileView, isFollowers} = route.params;
   const {user} = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
   const y = Animated.useValue(0);
-  const [followers, setFollowers] = useState<Array<ProfilePreviewType>>([]);
+  const [result, setResult] = useState<Array<ProfilePreviewType>>([]);
   const top = Animated.useValue(-SCREEN_HEIGHT);
 
   useEffect(() => {
     const loadResults = async (q: string) => {
       try {
         const token = await AsyncStorage.getItem('token');
-        const response = await fetch(`${FOLLOWERS_ENDPOINT}?user_id=${q}`, {
-          method: 'GET',
-          headers: {
-            Authorization: 'Token ' + token,
-          },
-        });
-        const status = response.status;
-        if (status === 200) {
-          let followersResults = await response.json();
-          setFollowers(followersResults);
+
+        if (!token) {
           return;
         }
-        setFollowers([]);
+        
+        const result: ProfilePreviewType[] = isFollowers ? await loadFollowers(
+          user.userId,
+          token,
+        ) : await loadFollowing(
+          user.userId,
+          token,
+        );
+        setResult(result);
+
       } catch (error) {
         console.log(error);
-        setFollowers([]);
+        setResult([]);
       }
     };
     loadResults(user.userId);
+ 
   }, []);
 
   return (
@@ -61,7 +64,7 @@ const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => {
           stickyHeaderIndices={[4]}
           contentContainerStyle={styles.contentContainer}
           showsVerticalScrollIndicator={false}>
-          <Followers {...{followers}} sectionTitle="Followers" />
+          <Followers {...{result}} sectionTitle={isFollowers ? "Followers" : "Following"} />
         </ScrollView>
         <TabsGradient />
       </View>
diff --git a/src/services/UserFollowServices.ts b/src/services/UserFollowServices.ts
index bfd8058a..508c1387 100644
--- a/src/services/UserFollowServices.ts
+++ b/src/services/UserFollowServices.ts
@@ -5,6 +5,7 @@ import {
   FOLLOWERS_ENDPOINT,
   FOLLOW_USER_ENDPOINT,
   UNFOLLOW_USER_ENDPOINT,
+  FOLLOWING_ENDPOINT,
 } from '../constants';
 
 import {ProfilePreviewType} from 'src/types';
@@ -29,6 +30,26 @@ export const loadFollowers = async (userId: string, token: string) => {
   return [];
 };
 
+export const loadFollowing = async (userId: string, token: string) => {
+  try {
+    const response = await fetch(FOLLOWING_ENDPOINT + `?user_id=${userId}`, {
+      method: 'GET',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+    });
+    if (response.status === 200) {
+      const body = await response.json();
+      return body;
+    } else {
+      throw new Error(await response.json());
+    }
+  } catch (error) {
+    console.log(error);
+  }
+  return [];
+};
+
 export const followOrUnfollowUser = async (
   follower: string,
   followed: string,