1 files changed, 51 insertions, 2 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 94b9ab41..d85c0a90 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -8,11 +8,14 @@ import {
   SearchResultsBackground,
   SearchResults,
   TabsGradient,
+  RecentSearches,
 } from '../../components';
 import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
 import Animated, {Easing, timing} from 'react-native-reanimated';
+import AsyncStorage from '@react-native-community/async-storage';
 import {ProfilePreviewType} from '../../types';
 import {SEARCH_ENDPOINT} from '../../constants';
+import {AuthContext} from '../../routes/authentication';
 const {Value} = Animated;
 
 /**
@@ -22,8 +25,12 @@ const {Value} = Animated;
 const top: Animated.Value<number> = new Value(-SCREEN_HEIGHT);
 
 const SearchScreen: React.FC = () => {
+  const {recentSearches} = React.useContext(AuthContext);
   const [query, setQuery] = useState<string>('');
   const [results, setResults] = useState<Array<ProfilePreviewType>>([]);
+  const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
+    recentSearches,
+  );
   useEffect(() => {
     if (query.length < 3) {
       setResults([]);
@@ -66,6 +73,26 @@ const SearchScreen: React.FC = () => {
     };
     timing(top, topOutConfig).start();
   };
+  const loadRecentlySearchedUsers = async () => {
+    try {
+      const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
+      asyncCache != null ? setRecents(JSON.parse(asyncCache)) : setRecents([]);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const clearRecentlySearched = async () => {
+    try {
+      await AsyncStorage.removeItem('@recently_searched_users');
+      loadRecentlySearchedUsers();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const handleUpdate = async (val: string) => {
+    setQuery(val);
+    loadRecentlySearchedUsers();
+  };
 
   return (
     <SearchBackground>
@@ -79,7 +106,7 @@ const SearchScreen: React.FC = () => {
         <SearchBar
           style={styles.searchBar}
           onCancel={handleBlur}
-          onChangeText={setQuery}
+          onChangeText={handleUpdate}
           onBlur={Keyboard.dismiss}
           onFocus={handleFocus}
           value={query}
@@ -87,7 +114,16 @@ const SearchScreen: React.FC = () => {
         />
         <Explore />
         <SearchResultsBackground {...{top}}>
-          <SearchResults {...{results}} />
+          {results.length === 0 && recents.length !== 0 ? (
+            <RecentSearches
+              sectionTitle="Recent"
+              sectionButtonTitle="Clear all"
+              onPress={clearRecentlySearched}
+              recents={recents}
+            />
+          ) : (
+            <SearchResults {...{results}} />
+          )}
         </SearchResultsBackground>
       </ScrollView>
       <TabsGradient />
@@ -108,5 +144,18 @@ const styles = StyleSheet.create({
     marginVertical: 20,
     zIndex: 1,
   },
+  recentsHeaderContainer: {
+    flexDirection: 'row',
+  },
+  recentsHeader: {
+    fontSize: 17,
+    fontWeight: 'bold',
+    flexGrow: 1,
+  },
+  clear: {
+    fontSize: 17,
+    fontWeight: 'bold',
+    color: '#698DD3',
+  },
 });
 export default SearchScreen;