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

1 files changed, 23 insertions, 7 deletions

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>
   );
 };