[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, 26 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 62949746..621aae9a 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,34 +1,30 @@
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
 import {TAGG_DARK_BLUE} from '../../constants';
-import {AuthContext, ProfileContext} from '../../routes/';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import Avatar from './Avatar';
 import MoreInfoDrawer from './MoreInfoDrawer';
 import FollowCount from './FollowCount';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
+import {ScreenType} from '../../types';
 
 type ProfileHeaderProps = {
-  isProfileView: boolean;
-  numFollowing: number;
-  numFollowers: number;
+  userXId: string;
+  screenType: ScreenType;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({
-  isProfileView,
-  numFollowing,
-  numFollowers,
-}) => {
-  const {
-    profile: {name},
-  } = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
+  const {profile: {name = ''} = {}} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
   const [drawerVisible, setDrawerVisible] = useState(false);
 
   return (
     <View style={styles.container}>
-      {!isProfileView && (
+      {!userXId && (
         <>
           <TouchableOpacity
             style={styles.more}
@@ -37,29 +33,29 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
             }}>
             <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
           </TouchableOpacity>
-          <MoreInfoDrawer
-            isOpen={drawerVisible}
-            setIsOpen={setDrawerVisible}
-            isProfileView={isProfileView}
-          />
+          <MoreInfoDrawer isOpen={drawerVisible} setIsOpen={setDrawerVisible} />
         </>
       )}
       <View style={styles.row}>
-        <Avatar style={styles.avatar} isProfileView={isProfileView} />
+        <Avatar
+          style={styles.avatar}
+          userXId={userXId}
+          screenType={screenType}
+        />
         <View style={styles.header}>
           <Text style={styles.name}>{name}</Text>
           <View style={styles.row}>
             <FollowCount
               style={styles.follows}
               mode="followers"
-              count={numFollowers}
-              isProfileView={isProfileView}
+              screenType={screenType}
+              userXId={userXId}
             />
             <FollowCount
               style={styles.follows}
               mode="following"
-              count={numFollowing}
-              isProfileView={isProfileView}
+              screenType={screenType}
+              userXId={userXId}
             />
           </View>
         </View>