[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, 32 insertions, 5 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 535b964c..b11f6a1a 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -13,21 +13,27 @@ import {
   TabsGradient,
 } from '../../components';
 import {SEARCH_ENDPOINT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {AuthContext} from '../../routes/authentication';
-import {ProfilePreviewType, UserType} from '../../types';
+import {ProfilePreviewType, ScreenType, UserType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 const NO_USER: UserType = {
   userId: '',
   username: '',
 };
 
+import {RootState} from '../../store/rootReducer';
+import {useSelector, useDispatch} from 'react-redux';
+import {resetScreenType} from '../../store/actions';
+import {useFocusEffect} from '@react-navigation/native';
+
 /**
  * Search Screen for user recommendations and a search
  * tool to allow user to find other users
  */
 
 const SearchScreen: React.FC = () => {
-  const {recentSearches, taggUsers} = React.useContext(AuthContext);
+  const {recentSearches, taggUsers} = useSelector(
+    (state: RootState) => state.taggUsers,
+  );
   const [query, setQuery] = useState<string>('');
   const [results, setResults] = useState<Array<ProfilePreviewType>>([]);
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
@@ -36,6 +42,7 @@ const SearchScreen: React.FC = () => {
   const [searching, setSearching] = useState(false);
   const top = Animated.useValue(-SCREEN_HEIGHT);
   const [user, setUser] = useState<UserType>(NO_USER);
+
   useEffect(() => {
     if (query.length < 3) {
       setResults([]);
@@ -69,6 +76,17 @@ const SearchScreen: React.FC = () => {
     loadResults(query);
   }, [query]);
 
+  const dispatch = useDispatch();
+
+  /**
+   * Code under useFocusEffect gets executed every time the screen comes under focus / is being viewed by the user.
+   * This is done to reset the users stored in our store for the Search screen.
+   * Read more here : https://reactnavigation.org/docs/function-after-focusing-screen/
+   */
+  useFocusEffect(() => {
+    dispatch(resetScreenType(ScreenType.Search));
+  });
+
   const handleFocus = () => {
     const topInConfig = {
       duration: 180,
@@ -130,7 +148,11 @@ const SearchScreen: React.FC = () => {
         />
         {/* Removed for Alpha for now */}
         {/* <Explore /> */}
-        <DiscoverUsers sectionTitle="Discover Users" users={taggUsers} />
+        <DiscoverUsers
+          sectionTitle="Discover Users"
+          users={taggUsers}
+          screenType={ScreenType.Search}
+        />
         <SearchResultsBackground {...{top}}>
           {results.length === 0 && recents.length !== 0 ? (
             <RecentSearches
@@ -138,9 +160,14 @@ const SearchScreen: React.FC = () => {
               sectionButtonTitle="Clear all"
               onPress={clearRecentlySearched}
               recents={recents}
+              screenType={ScreenType.Search}
             />
           ) : (
-            <SearchResults {...{results}} previewType={'Search'} />
+            <SearchResults
+              {...{results}}
+              previewType={'Search'}
+              screenType={ScreenType.Search}
+            />
           )}
         </SearchResultsBackground>
       </ScrollView>