From 17fbfa29c1b78703b872221e3b590aca3ef5cf7e Mon Sep 17 00:00:00 2001
From: Husam Salhab <47015061+hsalhab@users.noreply.github.com>
Date: Mon, 26 Oct 2020 18:42:02 -0400
Subject: [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>
---
 src/components/profile/Content.tsx       | 30 +++++++++++++++++++++---------
 src/components/profile/FollowCount.tsx   |  3 ++-
 src/components/profile/Followers.tsx     | 10 +++++-----
 src/components/profile/ProfileHeader.tsx | 11 +++++++----
 4 files changed, 35 insertions(+), 19 deletions(-)

(limited to 'src/components')

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