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

3 files changed, 101 insertions, 0 deletions

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