From ad903c76c1b5114ef7818e5cf72f21c9a33f5a6e Mon Sep 17 00:00:00 2001
From: gulsen <gulsensabak02@gmail.com>
Date: Fri, 13 Dec 2024 23:58:04 +0300
Subject: [PATCH] imp: Followings Screen

---
 .../app/(tabs)/account/followings.jsx         |   6 +
 mobile/tradeverse/config/screen-paths.js      |   3 +-
 .../screens/account-root/profile-config.js    |   2 +-
 mobile/tradeverse/screens/following/index.jsx | 141 ++++++++++++++++++
 mobile/tradeverse/services/_axios.js          |   2 +-
 5 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 mobile/tradeverse/app/(tabs)/account/followings.jsx
 create mode 100644 mobile/tradeverse/screens/following/index.jsx

diff --git a/mobile/tradeverse/app/(tabs)/account/followings.jsx b/mobile/tradeverse/app/(tabs)/account/followings.jsx
new file mode 100644
index 00000000..68cf67de
--- /dev/null
+++ b/mobile/tradeverse/app/(tabs)/account/followings.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import FollowingScreen from '../../../screens/following'
+
+export default function Followings() {
+  return <FollowingScreen />
+}
diff --git a/mobile/tradeverse/config/screen-paths.js b/mobile/tradeverse/config/screen-paths.js
index a15b7bf7..bd023edd 100644
--- a/mobile/tradeverse/config/screen-paths.js
+++ b/mobile/tradeverse/config/screen-paths.js
@@ -45,7 +45,8 @@ const paths = {
     FOLLOWED_TOPICS: `${roots.ACCOUNT}/followed-topics`,
     FOLLOWED_USERS: `${roots.ACCOUNT}/followed-users`,
     MY_POSTS: `${roots.ACCOUNT}/my-posts`,
-    FOLLOWERS: `${roots.ACCOUNT}/followers`
+    FOLLOWERS: `${roots.ACCOUNT}/followers`,
+    FOLLOWINGS: `${roots.ACCOUNT}/followings`
   },
 }
 export default paths
diff --git a/mobile/tradeverse/screens/account-root/profile-config.js b/mobile/tradeverse/screens/account-root/profile-config.js
index 803bd047..cbee2461 100644
--- a/mobile/tradeverse/screens/account-root/profile-config.js
+++ b/mobile/tradeverse/screens/account-root/profile-config.js
@@ -63,7 +63,7 @@ const ProfileConfig = {
           value: 'my_following',
           title: 'Followings',
           icon: <IconUserUp {...defaultIconProps} />,
-          href: paths.ACCOUNT.FOLLOWED_USERS,
+          href: paths.ACCOUNT.FOLLOWINGS,
         },
       ],
     },
diff --git a/mobile/tradeverse/screens/following/index.jsx b/mobile/tradeverse/screens/following/index.jsx
new file mode 100644
index 00000000..12e1450d
--- /dev/null
+++ b/mobile/tradeverse/screens/following/index.jsx
@@ -0,0 +1,141 @@
+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 FollowingScreen = () => {
+    const [followings, setFollowings] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+
+    const mockData = [
+        {
+            username: 'gulsen',
+            name: 'Gulsen',
+            userPhoto: null,
+        },
+    ];
+
+    useEffect(() => {
+        const fetchFollowings = async () => {
+            try {
+                const token = await AsyncStorage.getItem('authToken');
+                const response = await api.get('/api/follow/get-followings', {
+                    headers: { Authorization: `Bearer ${token}` },
+                });
+                setFollowings(response.data.followings || mockData);
+            } catch (error) {
+                console.error('Error fetching followings:', error);
+                setFollowings(mockData);
+                setError(true);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchFollowings();
+    }, []);
+
+    if (loading) {
+        return (
+            <GlobalScreen>
+                <Text style={styles.loadingText}>Loading following...</Text>
+            </GlobalScreen>
+        );
+    }
+
+    if (error && followings.length === 0) {
+        return (
+            <GlobalScreen>
+                <Text style={styles.errorText}>Failed to load followings.</Text>
+            </GlobalScreen>
+        );
+    }
+
+    return (
+        <GlobalScreen>
+            <FullScrollView>
+                <Stack.Screen
+                    options={{
+                        headerBackTitleVisible: false,
+                        headerTitle: 'Following',
+                    }}
+                />
+                <View style={styles.container}>
+                    <Text style={styles.countText}>
+                        Following Count: {followings.length}
+                    </Text>
+                    {followings.map((following, index) => (
+                        <View key={index} style={styles.followingItem}>
+                            <Image
+                                source={{
+                                    uri: following.userPhoto || 'https://via.placeholder.com/50',
+                                }}
+                                style={styles.userPhoto}
+                            />
+                            <View style={styles.textContainer}>
+                                <Text style={styles.username}>
+                                    {following.username}
+                                </Text>
+                                <Text style={styles.name}>
+                                    {following.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,
+    },
+    errorText: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginTop: 20,
+        color: 'red',
+    },
+    followingItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    userPhoto: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        marginRight: 12,
+        backgroundColor: '#ddd', // Placeholder color for fallback
+    },
+    textContainer: {
+        flex: 1,
+    },
+    username: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    name: {
+        fontSize: 14,
+        color: '#555',
+    },
+});
+
+export default FollowingScreen;
diff --git a/mobile/tradeverse/services/_axios.js b/mobile/tradeverse/services/_axios.js
index 717b21a7..52f2a373 100644
--- a/mobile/tradeverse/services/_axios.js
+++ b/mobile/tradeverse/services/_axios.js
@@ -37,7 +37,7 @@ api.interceptors.request.use(
 api.interceptors.response.use(
   (response) => {
     console.log('<-- RESPONSE')
-    if (response) console.log('Data: ', response.data)
+    if (response) console.log('Data: lıne 40 ', response.data)
     console.log('---------------------------------')
     return response
   },