From 02773c8dd69f2d13ed4b1e0c783dc3a5e472b456 Mon Sep 17 00:00:00 2001
From: gulsen <gulsensabak02@gmail.com>
Date: Fri, 13 Dec 2024 23:35:15 +0300
Subject: [PATCH] imp: Followers screen

---
 .../app/(tabs)/account/followers.jsx          |   6 +
 mobile/tradeverse/config/screen-paths.js      |   3 +-
 .../screens/account-root/profile-config.js    |   3 +-
 mobile/tradeverse/screens/followers/index.jsx | 109 ++++++++++++++++++
 4 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 mobile/tradeverse/app/(tabs)/account/followers.jsx
 create mode 100644 mobile/tradeverse/screens/followers/index.jsx

diff --git a/mobile/tradeverse/app/(tabs)/account/followers.jsx b/mobile/tradeverse/app/(tabs)/account/followers.jsx
new file mode 100644
index 00000000..41066e63
--- /dev/null
+++ b/mobile/tradeverse/app/(tabs)/account/followers.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import FollowersScreen from '../../../screens/followers'
+
+export default function Followers() {
+  return <FollowersScreen />
+}
diff --git a/mobile/tradeverse/config/screen-paths.js b/mobile/tradeverse/config/screen-paths.js
index 2e4a7a34..a15b7bf7 100644
--- a/mobile/tradeverse/config/screen-paths.js
+++ b/mobile/tradeverse/config/screen-paths.js
@@ -44,7 +44,8 @@ const paths = {
     PORTFOLIO: `${roots.ACCOUNT}/portfolio`,
     FOLLOWED_TOPICS: `${roots.ACCOUNT}/followed-topics`,
     FOLLOWED_USERS: `${roots.ACCOUNT}/followed-users`,
-    MY_POSTS: `${roots.ACCOUNT}/my-posts`
+    MY_POSTS: `${roots.ACCOUNT}/my-posts`,
+    FOLLOWERS: `${roots.ACCOUNT}/followers`
   },
 }
 export default paths
diff --git a/mobile/tradeverse/screens/account-root/profile-config.js b/mobile/tradeverse/screens/account-root/profile-config.js
index 4a786fe5..803bd047 100644
--- a/mobile/tradeverse/screens/account-root/profile-config.js
+++ b/mobile/tradeverse/screens/account-root/profile-config.js
@@ -57,8 +57,7 @@ const ProfileConfig = {
           value: 'my_followers',
           title: 'Followers',
           icon: <IconUserDown {...defaultIconProps} />,
-          href: '#',
-          disabled: true,
+          href: paths.ACCOUNT.FOLLOWERS,
         },
         {
           value: 'my_following',
diff --git a/mobile/tradeverse/screens/followers/index.jsx b/mobile/tradeverse/screens/followers/index.jsx
new file mode 100644
index 00000000..9cc7b1a8
--- /dev/null
+++ b/mobile/tradeverse/screens/followers/index.jsx
@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import GlobalScreen from '../../components/ui/global-screen';
+import FullScrollView from '../../components/ui/full-scroll-view';
+import { Stack } from 'expo-router';
+import api from '../../services/_axios';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const FollowersScreen = () => {
+    const [followers, setFollowers] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchFollowers = async () => {
+            try {
+                const token = await AsyncStorage.getItem('authToken');
+                const response = await api.get('/api/follow/get-followers', {
+                    headers: { Authorization: `Bearer ${token}` },
+                });
+                setFollowers(response.data.followers || []);
+            } catch (error) {
+                console.error('Error fetching followers:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchFollowers();
+    }, []);
+
+    return (
+        <GlobalScreen>
+            <FullScrollView>
+                <Stack.Screen
+                    options={{
+                        headerBackTitleVisible: false,
+                        headerTitle: 'Followers',
+                    }}
+                />
+                {loading ? (
+                    <Text style={styles.loadingText}>Loading followers...</Text>
+                ) : (
+                    <View style={styles.container}>
+                        <Text style={styles.countText}>
+                            Followers Count: {followers.length}
+                        </Text>
+                        {followers.map((follower, index) => (
+                            <View key={index} style={styles.followerItem}>
+                                <Image
+                                    source={{ uri: follower.userPhoto }}
+                                    style={styles.userPhoto}
+                                />
+                                <View style={styles.textContainer}>
+                                    <Text style={styles.username}>
+                                        {follower.username}
+                                    </Text>
+                                    <Text style={styles.name}>
+                                        {follower.name}
+                                    </Text>
+                                </View>
+                            </View>
+                        ))}
+                    </View>
+                )}
+            </FullScrollView>
+        </GlobalScreen>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 16,
+    },
+    countText: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 16,
+        textAlign: 'center'
+    },
+    loadingText: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginTop: 20,
+    },
+    followerItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    userPhoto: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        marginRight: 12,
+    },
+    textContainer: {
+        flex: 1,
+    },
+    username: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    name: {
+        fontSize: 14,
+        color: '#555',
+    },
+});
+
+export default FollowersScreen;