[TMA-161] Recently Searched Users (#34)

* Basic AsyncStorage code

* Basic implementation complete

Need to fix re-rendering bug

* Removed errant comment

* Fixed bug for rerendering upon addition to recents

Need to fix bug for rerendering upon clearing

* Fixed rerendering bug for clear

* Only present recents header if users in recents

* Lint cleaning

* Basic AsyncStorage code

* Basic implementation complete

Need to fix re-rendering bug

* Removed errant comment

* Fixed bug for rerendering upon addition to recents

Need to fix bug for rerendering upon clearing

* Fixed rerendering bug for clear

* Only present recents header if users in recents

* Lint cleaning

* Added comments for a function

* Updated conditional presentation to use ternary

* Created component for List Section Headers

* Lint cleaning

* Converted component to be for Recent Searches

As opposed to just the list header

1 files changed, 24 insertions, 1 deletions

diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
index e52d56bc..589cb051 100644
--- a/src/routes/authentication/AuthProvider.tsx
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -1,7 +1,13 @@
 import React, {useEffect} from 'react';
 import {createContext, useState} from 'react';
 import RNFetchBlob from 'rn-fetch-blob';
-import {UserType, ProfileType, InstagramPostType} from '../../types';
+import AsyncStorage from '@react-native-community/async-storage';
+import {
+  UserType,
+  ProfileType,
+  InstagramPostType,
+  ProfilePreviewType,
+} from '../../types';
 import {
   PROFILE_INFO_ENDPOINT,
   AVATAR_PHOTO_ENDPOINT,
@@ -17,6 +23,7 @@ interface AuthContextProps {
   avatar: string | null;
   cover: string | null;
   instaPosts: Array<InstagramPostType>;
+  recentSearches: Array<ProfilePreviewType>;
 }
 const NO_USER: UserType = {
   userId: '',
@@ -35,6 +42,7 @@ export const AuthContext = createContext<AuthContextProps>({
   avatar: null,
   cover: null,
   instaPosts: [],
+  recentSearches: [],
 });
 
 /**
@@ -46,6 +54,9 @@ const AuthProvider: React.FC = ({children}) => {
   const [avatar, setAvatar] = useState<string | null>(null);
   const [cover, setCover] = useState<string | null>(null);
   const [instaPosts, setInstaPosts] = useState<Array<InstagramPostType>>([]);
+  const [recentSearches, setRecentSearches] = useState<
+    Array<ProfilePreviewType>
+  >([]);
 
   const {userId} = user;
   useEffect(() => {
@@ -115,10 +126,21 @@ const AuthProvider: React.FC = ({children}) => {
         console.log(error);
       }
     };
+    const loadRecentlySearchedUsers = async () => {
+      try {
+        const asyncCache = await AsyncStorage.getItem(
+          '@recently_searched_users',
+        );
+        asyncCache != null ? setRecentSearches(JSON.parse(asyncCache)) : null;
+      } catch (e) {
+        console.log(e);
+      }
+    };
     loadProfileInfo();
     loadAvatar();
     loadCover();
     loadInstaPosts();
+    loadRecentlySearchedUsers();
   }, [userId]);
 
   return (
@@ -135,6 +157,7 @@ const AuthProvider: React.FC = ({children}) => {
         logout: () => {
           setUser(NO_USER);
         },
+        recentSearches,
       }}>
       {children}
     </AuthContext.Provider>