[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>

5 files changed, 98 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';