From 32bf3bf2cfa2f4499711225b2f1da5f3ed274832 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 8 Mar 2021 05:49:55 -0500
Subject: Add categories to recently-searched results

---
 src/screens/search/SearchScreen.tsx | 49 +++++++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 10 deletions(-)

(limited to 'src/screens/search')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 223fc2b2..f9ad7711 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -17,7 +17,7 @@ import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
@@ -32,6 +32,9 @@ const SearchScreen: React.FC = () => {
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
     recentSearches ?? [],
   );
+  const [recentCategories, setRecentCategories] = useState<
+    CategoryPreviewType[]
+  >([]);
   const [searching, setSearching] = useState(false);
   const top = Animated.useValue(-SCREEN_HEIGHT);
   const [keyboardVisible, setKeyboardVisible] = React.useState(
@@ -50,7 +53,18 @@ const SearchScreen: React.FC = () => {
   }, []);
   const dispatch = useDispatch();
 
+  /*
+   * If user begins actively searching, refresh recently-searched list.
+   */
+  useEffect(() => {
+    if (searching) loadRecentSearches();
+  }, [searching]);
+
+  /*
+   * Main handler for changes in query.
+   */
   useEffect(() => {
+    if (!query.length) loadRecentSearches();
     if (query.length < 3) {
       setResults(undefined);
       return;
@@ -97,7 +111,7 @@ const SearchScreen: React.FC = () => {
     timing(top, topInConfig).start();
     setSearching(true);
   };
-  const handleBlur = () => {
+  const handleCancel = () => {
     setQuery('');
     Keyboard.dismiss();
     const topOutConfig = {
@@ -108,6 +122,7 @@ const SearchScreen: React.FC = () => {
     timing(top, topOutConfig).start();
     setSearching(false);
   };
+
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -116,17 +131,31 @@ const SearchScreen: React.FC = () => {
       console.log(e);
     }
   };
-  const clearRecentlySearched = async () => {
+  const loadRecentlySearchedCategories = async () => {
     try {
-      await AsyncStorage.removeItem('@recently_searched_users');
-      loadRecentlySearchedUsers();
+      const recentCategoriesJSON = await AsyncStorage.getItem(
+        '@recently_searched_categories',
+      );
+      setRecentCategories(
+        recentCategoriesJSON ? JSON.parse(recentCategoriesJSON) : [],
+      );
     } catch (e) {
       console.log(e);
     }
   };
-  const handleUpdate = async (val: string) => {
-    setQuery(val);
+  const loadRecentSearches = () => {
     loadRecentlySearchedUsers();
+    loadRecentlySearchedCategories();
+  };
+  const clearRecentlySearched = async () => {
+    try {
+      AsyncStorage.removeItem('@recently_searched_users');
+      AsyncStorage.removeItem('@recently_searched_categories');
+      loadRecentlySearchedUsers();
+      loadRecentlySearchedCategories();
+    } catch (e) {
+      console.log(e);
+    }
   };
 
   return (
@@ -141,8 +170,8 @@ const SearchScreen: React.FC = () => {
           showsVerticalScrollIndicator={false}>
           <SearchBar
             style={styles.searchBar}
-            onCancel={handleBlur}
-            onChangeText={handleUpdate}
+            onCancel={handleCancel}
+            onChangeText={setQuery}
             onBlur={Keyboard.dismiss}
             onFocus={handleFocus}
             value={query}
@@ -155,8 +184,8 @@ const SearchScreen: React.FC = () => {
                 sectionTitle="Recent"
                 sectionButtonTitle="Clear all"
                 onPress={clearRecentlySearched}
-                recents={recents}
                 screenType={ScreenType.Search}
+                {...{recents, recentCategories}}
               />
             ) : (
               <SearchResultList
-- 
cgit v1.2.3-70-g09d2


From 01800876e7441d0cc8e7ed77ac1ec9915c15a613 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 8 Mar 2021 05:54:45 -0500
Subject: Fix conditional for displaying categories

---
 src/screens/search/SearchScreen.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/screens/search')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index f9ad7711..39feee3b 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -179,7 +179,8 @@ const SearchScreen: React.FC = () => {
           />
           <SearchCategories />
           <SearchResultsBackground {...{top}}>
-            {results === undefined && recents.length !== 0 ? (
+            {results === undefined &&
+            recents.length + recentCategories.length !== 0 ? (
               <RecentSearches
                 sectionTitle="Recent"
                 sectionButtonTitle="Clear all"
-- 
cgit v1.2.3-70-g09d2


From a3b9a1e6cfa0ad5e0a8ce4378de905d312c7fee3 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 8 Mar 2021 06:39:28 -0500
Subject: Move setQuery('') to animation callback to hide re-render

---
 src/screens/search/SearchScreen.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/screens/search')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 39feee3b..835a5622 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -112,14 +112,13 @@ const SearchScreen: React.FC = () => {
     setSearching(true);
   };
   const handleCancel = () => {
-    setQuery('');
     Keyboard.dismiss();
     const topOutConfig = {
       duration: 180,
       toValue: -SCREEN_HEIGHT,
       easing: Easing.inOut(Easing.ease),
     };
-    timing(top, topOutConfig).start();
+    timing(top, topOutConfig).start(() => setQuery(''));
     setSearching(false);
   };
 
-- 
cgit v1.2.3-70-g09d2