[HOT FIX] Refactor to make things clean and make the app work (#82)

* Refactored

* Final refactor with an issue

* It works

* Whoops

3 files changed, 12 insertions, 36 deletions

diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index bbabbb56..0d379a1a 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -20,7 +20,6 @@ import {
   BirthDatePicker,
 } from '../../components';
 import {OnboardingStackParams} from '../../routes/onboarding';
-import {AuthContext} from '../../routes/authentication';
 import ImagePicker from 'react-native-image-crop-picker';
 import {
   EDIT_PROFILE_ENDPOINT,
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
index e0db0755..a901d477 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/RegistrationOne.tsx
@@ -145,7 +145,7 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
           <Text style={styles.formHeader}>ENTER PHONE NUMBER</Text>
         </View>
         <TaggInput
-          maxLength = {12} // currently only support US phone numbers
+          maxLength={12} // currently only support US phone numbers
           accessibilityHint="Enter your phone number."
           accessibilityLabel="Phone number input field."
           placeholder="Phone Number"
@@ -154,7 +154,7 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
           autoCapitalize="none"
           returnKeyType="next"
           keyboardType="phone-pad"
-          onChangeText={handlePhoneUpdate}  
+          onChangeText={handlePhoneUpdate}
           blurOnSubmit={false}
           ref={phoneRef}
           valid={form.isValidPhone}
@@ -210,4 +210,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default RegistrationOne;
\ No newline at end of file
+export default RegistrationOne;
diff --git a/src/screens/profile/FollowersListScreen.tsx b/src/screens/profile/FollowersListScreen.tsx
index 21778929..4d14ef67 100644
--- a/src/screens/profile/FollowersListScreen.tsx
+++ b/src/screens/profile/FollowersListScreen.tsx
@@ -1,16 +1,13 @@
-import React, {useRef, useEffect, useState} from 'react';
+import React, {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, FOLLOWING_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 {SCREEN_HEIGHT} from '../../utils';
 import {StyleSheet, View} from 'react-native';
 import {ProfileStackParams} from '../../routes';
-import { loadFollowers, loadFollowing } from '../../services/UserFollowServices';
 
 type FollowersListScreenRouteProp = RouteProp<
   ProfileStackParams,
@@ -22,7 +19,7 @@ interface FollowersListScreenProps {
 
 const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => {
   const {isProfileView, isFollowers} = route.params;
-  const {user} = isProfileView
+  const {user, followers, following} = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
   const y = Animated.useValue(0);
@@ -30,31 +27,8 @@ const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => {
   const top = Animated.useValue(-SCREEN_HEIGHT);
 
   useEffect(() => {
-    const loadResults = async (q: string) => {
-      try {
-        const token = await AsyncStorage.getItem('token');
-
-        if (!token) {
-          return;
-        }
-        
-        const result: ProfilePreviewType[] = isFollowers ? await loadFollowers(
-          user.userId,
-          token,
-        ) : await loadFollowing(
-          user.userId,
-          token,
-        );
-        setResult(result);
-
-      } catch (error) {
-        console.log(error);
-        setResult([]);
-      }
-    };
-    loadResults(user.userId);
- 
-  }, []);
+    setResult(isFollowers ? followers : following);
+  }, [followers, following]);
 
   return (
     <CenteredView>
@@ -64,7 +38,10 @@ const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => {
           stickyHeaderIndices={[4]}
           contentContainerStyle={styles.contentContainer}
           showsVerticalScrollIndicator={false}>
-          <Followers {...{result}} sectionTitle={isFollowers ? "Followers" : "Following"} />
+          <Followers
+            {...{result}}
+            sectionTitle={isFollowers ? 'Followers' : 'Following'}
+          />
         </ScrollView>
         <TabsGradient />
       </View>