[TMA 27] Followers list (#69)

* "Followers list "

* Mended followers list

* fix export error

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

10 files changed, 208 insertions, 11 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 8a3c36ff..50e9d627 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -158,9 +158,8 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}
       stickyHeaderIndices={[2, 4]}>
-      <ProfileCutout>
-        <ProfileHeader {...{isProfileView}} />
-      </ProfileCutout>
+      <ProfileCutout/>
+      <ProfileHeader {...{isProfileView}} />
       <ProfileBody
         {...{
           onLayout,
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
index 72817e7a..a3f9f34d 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FollowCount.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import {View, Text, StyleSheet, ViewProps} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useNavigation} from '@react-navigation/native';
 
 interface FollowCountProps extends ViewProps {
   mode: 'followers' | 'following';
   count: number;
+  isProfileView: boolean;
 }
 
-const FollowCount: React.FC<FollowCountProps> = ({style, mode, count}) => {
+const FollowCount: React.FC<FollowCountProps> = ({
+  style,
+  mode,
+  count,
+  isProfileView,
+}) => {
   const displayed: string =
     count < 5e3
       ? `${count}`
@@ -15,13 +23,21 @@ const FollowCount: React.FC<FollowCountProps> = ({style, mode, count}) => {
       : count < 1e6
       ? `${(count / 1e3).toFixed(0)}k`
       : `${count / 1e6}m`;
+  const navigation = useNavigation();
   return (
-    <View style={[styles.container, style]}>
-      <Text style={styles.count}>{displayed}</Text>
-      <Text style={styles.label}>
-        {mode === 'followers' ? 'Followers' : 'Following'}
-      </Text>
-    </View>
+    <TouchableOpacity
+      onPress={() =>
+        navigation.navigate('FollowersListScreen', {
+          isProfileView: isProfileView,
+        })
+      }>
+      <View style={[styles.container, style]}>
+        <Text style={styles.count}>{displayed}</Text>
+        <Text style={styles.label}>
+          {mode === 'followers' ? 'Followers' : 'Following'}
+        </Text>
+      </View>
+    </TouchableOpacity>
   );
 };
 
diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Followers.tsx
new file mode 100644
index 00000000..e0fee303
--- /dev/null
+++ b/src/components/profile/Followers.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {View, StyleSheet, ViewProps, Text} from 'react-native';
+import {ProfilePreviewType} from '../../types';
+import {ProfilePreview} from '..';
+import {useNavigation} from '@react-navigation/native';
+import {Button} from 'react-native-elements';
+
+interface FollowersListProps {
+  followers: Array<ProfilePreviewType>;
+  sectionTitle: string;
+}
+
+const Followers: React.FC<FollowersListProps> = ({followers}) => {
+  const navigation = useNavigation();
+  return (
+    <>
+      <View style={styles.header}>
+        <Button
+          title="X"
+          buttonStyle={styles.button}
+          titleStyle={styles.buttonText}
+          onPress={() => {
+            navigation.goBack();
+          }}
+        />
+        <Text style={styles.title}>{'Followers'}</Text>
+      </View>
+      {followers.map((profilePreview) => (
+        <ProfilePreview
+          style={styles.follower}
+          key={profilePreview.id}
+          {...{profilePreview}}
+          isComment={false}
+        />
+      ))}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {flexDirection: 'row'},
+  follower: {
+    marginVertical: 10,
+  },
+  title: {
+    position: 'relative',
+    fontSize: 17,
+    fontWeight: 'bold',
+    paddingBottom: 10,
+    paddingTop: 10,
+    flexGrow: 1,
+    paddingLeft: '26%',
+  },
+  button: {
+    backgroundColor: 'transparent',
+  },
+  buttonText: {
+    color: 'black',
+    fontSize: 18,
+    fontWeight: '400',
+  },
+});
+
+export default Followers;
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 62c103fd..25789525 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -27,8 +27,14 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView}) => {
               style={styles.follows}
               mode="followers"
               count={318412}
+              isProfileView={isProfileView}
+            />
+            <FollowCount
+              style={styles.follows}
+              mode="following"
+              count={1036}
+              isProfileView={isProfileView}
             />
-            <FollowCount style={styles.follows} mode="following" count={1036} />
           </View>
         </View>
       </View>
@@ -41,6 +47,7 @@ const styles = StyleSheet.create({
     top: SCREEN_HEIGHT / 2.4,
     paddingHorizontal: SCREEN_WIDTH / 20,
     marginBottom: SCREEN_HEIGHT / 10,
+    position: 'absolute',
   },
   row: {
     flexDirection: 'row',
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index eb65d509..2e9c23ea 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -4,3 +4,4 @@ export {default as ProfileCutout} from './ProfileCutout';
 export {default as ProfileBody} from './ProfileBody';
 export {default as ProfileHeader} from './ProfileHeader';
 export {default as ProfilePreview} from '../profile/ProfilePreview';
+export {default as Followers} from '../profile/Followers';
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index 8ab8ecde..e0a34f5b 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -6,6 +6,7 @@ import {
   SearchScreen,
   ProfileScreen,
   MomentCommentsScreen,
+  FollowersListScreen,
 } from '../../screens';
 import {ProfileStack, ProfileStackParams} from './ProfileStack';
 import {RouteProp} from '@react-navigation/native';
@@ -102,6 +103,11 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         options={{headerShown: false}}
         initialParams={{isProfileView: isProfileView}}
       />
+      <ProfileStack.Screen
+        name="FollowersListScreen"
+        component={FollowersListScreen}
+        initialParams={{isProfileView: isProfileView}}
+      />
     </ProfileStack.Navigator>
   );
 };
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index 6d875e81..0cb20f75 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -26,6 +26,9 @@ export type ProfileStackParams = {
   ProfileView: {
     isProfileView: boolean;
   };
+  FollowersListScreen: {
+    isProfileView: boolean;
+  };
 };
 
 export const ProfileStack = createStackNavigator<ProfileStackParams>();
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index c9dcba41..8ff7ebc2 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -140,6 +140,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
             login(data.UserID, username);
           } catch (err) {
             setUser(NO_USER);
+            console.log(data);
             Alert.alert('Auth token storage failed', 'Please login again!');
           }
         } else if (statusCode === 401) {
diff --git a/src/screens/profile/FollowersListScreen.tsx b/src/screens/profile/FollowersListScreen.tsx
new file mode 100644
index 00000000..5150c77d
--- /dev/null
+++ b/src/screens/profile/FollowersListScreen.tsx
@@ -0,0 +1,99 @@
+import React, {useRef, useEffect, useState} from 'react';
+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 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';
+
+type FollowersListScreenRouteProp = RouteProp<
+  ProfileStackParams,
+  'FollowersListScreen'
+>;
+interface FollowersListScreenProps {
+  route: FollowersListScreenRouteProp;
+}
+
+const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => {
+  const {isProfileView} = route.params;
+  const {user} = isProfileView
+    ? React.useContext(ProfileContext)
+    : React.useContext(AuthContext);
+  const y = Animated.useValue(0);
+  const [followers, setFollowers] = 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);
+          return;
+        }
+        setFollowers([]);
+      } catch (error) {
+        console.log(error);
+        setFollowers([]);
+      }
+    };
+    loadResults(user.userId);
+  }, []);
+
+  return (
+    <CenteredView>
+      <View style={styles.modalView}>
+        <ScrollView
+          keyboardShouldPersistTaps={'always'}
+          stickyHeaderIndices={[4]}
+          contentContainerStyle={styles.contentContainer}
+          showsVerticalScrollIndicator={false}>
+          <Followers {...{followers}} sectionTitle="Followers" />
+        </ScrollView>
+        <TabsGradient />
+      </View>
+    </CenteredView>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingBottom: SCREEN_HEIGHT / 15,
+    paddingHorizontal: 15,
+    marginTop: '5%',
+  },
+  modalView: {
+    width: '85%',
+    height: '70%',
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOpacity: 30,
+    shadowOffset: {width: 0, height: 2},
+    shadowRadius: 5,
+    borderRadius: 8,
+    paddingBottom: 15,
+    paddingHorizontal: 20,
+    justifyContent: 'space-between',
+  },
+  modalScrollViewContent: {
+    justifyContent: 'center',
+  },
+  modalScrollView: {
+    marginBottom: 10,
+  },
+});
+
+export default FollowersListScreen;
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index 9dfbe409..a9f3511c 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -3,3 +3,4 @@ export {default as SocialMediaTaggs} from './SocialMediaTaggs';
 export {default as CaptionScreen} from './CaptionScreen';
 export {default as IndividualMoment} from './IndividualMoment';
 export {default as MomentCommentsScreen} from './MomentCommentsScreen';
+export {default as FollowersListScreen} from './FollowersListScreen';
\ No newline at end of file