From 7596b69482914569cbb4bb5f287bbc0a72d74133 Mon Sep 17 00:00:00 2001
From: Justin Shillingford <jgs272@cornell.edu>
Date: Wed, 19 Aug 2020 13:27:22 -0400
Subject: [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
---
 src/screens/search/SearchScreen.tsx | 53 +++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

(limited to 'src/screens')

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;
-- 
cgit v1.2.3-70-g09d2