[TMA - 398 AND TMA-430] Replace Providers with Redux Store (#125)

* First

* WIP

* Thunk

* Some more comments

* sc

* recent searches and follounfollow

* Edit profile dummy

* Block / unblock and some cleanup

* Replace auth provider

* Sc

* Delete AP  after rebase

* Discover users

* Cleanup

* More cleanup

* Replace profile provider

* Fixed build failure

* Fixed a bug reported

* Prevent app crash when backend server is down

1 files changed, 22 insertions, 12 deletions

diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
index 3e270428..a23a3533 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FollowCount.tsx
@@ -1,24 +1,33 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {View, Text, StyleSheet, ViewProps} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useNavigation} from '@react-navigation/native';
-import {AuthContext, ProfileContext} from '../../routes';
+import {RootState} from '../../store/rootReducer';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates';
 
 interface FollowCountProps extends ViewProps {
   mode: 'followers' | 'following';
-  count: number;
-  isProfileView: boolean;
+  userXId: string;
+  screenType: ScreenType;
 }
 
 const FollowCount: React.FC<FollowCountProps> = ({
   style,
   mode,
-  count,
-  isProfileView,
+  userXId,
+  screenType,
 }) => {
-  const {followers, following} = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+  const {
+    followers = EMPTY_PROFILE_PREVIEW_LIST,
+    following = EMPTY_PROFILE_PREVIEW_LIST,
+  } = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.follow);
+
+  const isFollowers = mode === 'followers';
+  const count = isFollowers ? followers.length : following.length;
 
   const navigation = useNavigation();
   const displayed: string =
@@ -33,14 +42,15 @@ const FollowCount: React.FC<FollowCountProps> = ({
     <TouchableOpacity
       onPress={() =>
         navigation.push('FollowersListScreen', {
-          isFollowers: mode === 'followers',
-          list: mode === 'followers' ? followers : following,
+          isFollowers,
+          userXId,
+          screenType,
         })
       }>
       <View style={[styles.container, style]}>
         <Text style={styles.count}>{displayed}</Text>
         <Text style={styles.label}>
-          {mode === 'followers' ? 'Followers' : 'Following'}
+          {isFollowers ? 'Followers' : 'Following'}
         </Text>
       </View>
     </TouchableOpacity>