aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/profile/Content.tsx5
-rw-r--r--src/components/profile/FollowCount.tsx30
-rw-r--r--src/components/profile/Followers.tsx64
-rw-r--r--src/components/profile/ProfileHeader.tsx9
-rw-r--r--src/components/profile/index.ts1
-rw-r--r--src/routes/profile/Profile.tsx6
-rw-r--r--src/routes/profile/ProfileStack.tsx3
-rw-r--r--src/screens/onboarding/Login.tsx1
-rw-r--r--src/screens/profile/FollowersListScreen.tsx99
-rw-r--r--src/screens/profile/index.ts1
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:43:44 +0000