From 8183ce18a4b8fedb02c5af59f3021cc4d75f29f7 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Sun, 7 Mar 2021 23:45:57 -0500
Subject: Update and prune style rules

---
 src/screens/search/SearchScreen.tsx | 131 ++++++++++++++++++------------------
 1 file changed, 64 insertions(+), 67 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 223fc2b2..2c580c5b 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Keyboard, ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {Keyboard, ScrollView, StatusBar, StyleSheet} from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
@@ -88,26 +88,6 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
-  const handleFocus = () => {
-    const topInConfig = {
-      duration: 180,
-      toValue: 0,
-      easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
-    };
-    timing(top, topInConfig).start();
-    setSearching(true);
-  };
-  const handleBlur = () => {
-    setQuery('');
-    Keyboard.dismiss();
-    const topOutConfig = {
-      duration: 180,
-      toValue: -SCREEN_HEIGHT,
-      easing: Easing.inOut(Easing.ease),
-    };
-    timing(top, topOutConfig).start();
-    setSearching(false);
-  };
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -129,55 +109,75 @@ const SearchScreen: React.FC = () => {
     loadRecentlySearchedUsers();
   };
 
+  const topInConfig = {
+    duration: 180,
+    toValue: 0,
+    easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
+  };
+  const topOutConfig = {
+    duration: 180,
+    toValue: -SCREEN_HEIGHT,
+    easing: Easing.inOut(Easing.ease),
+  };
+  const handleFocus = () => {
+    timing(top, topInConfig).start();
+    setSearching(true);
+  };
+  const handleBlur = () => {
+    Keyboard.dismiss();
+  };
+  const handleCancel = () => {
+    handleBlur();
+    timing(top, topOutConfig).start(() => setQuery(''));
+    setSearching(false);
+  };
+
   return (
-    <View style={styles.mainContainer}>
-      <SafeAreaView>
-        <StatusBar barStyle="dark-content" />
-        <ScrollView
-          scrollEnabled={!searching}
-          keyboardShouldPersistTaps={'always'}
-          stickyHeaderIndices={[4]}
-          contentContainerStyle={styles.contentContainer}
-          showsVerticalScrollIndicator={false}>
-          <SearchBar
-            style={styles.searchBar}
-            onCancel={handleBlur}
-            onChangeText={handleUpdate}
-            onBlur={Keyboard.dismiss}
-            onFocus={handleFocus}
-            value={query}
-            {...{top, searching}}
-          />
-          <SearchCategories />
-          <SearchResultsBackground {...{top}}>
-            {results === undefined && recents.length !== 0 ? (
-              <RecentSearches
-                sectionTitle="Recent"
-                sectionButtonTitle="Clear all"
-                onPress={clearRecentlySearched}
-                recents={recents}
-                screenType={ScreenType.Search}
-              />
-            ) : (
-              <SearchResultList
-                {...{results}}
-                keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
-                previewType={'Search'}
-                screenType={ScreenType.Search}
-              />
-            )}
-          </SearchResultsBackground>
-        </ScrollView>
-        <TabsGradient />
-      </SafeAreaView>
-    </View>
+    <SafeAreaView style={styles.screenContainer}>
+      <StatusBar barStyle="dark-content" />
+      <SearchBar
+        onCancel={handleCancel}
+        onChangeText={handleUpdate}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={query}
+        {...{top, searching}}
+      />
+      <ScrollView
+        scrollEnabled={!searching}
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}>
+        <SearchCategories />
+        <SearchResultsBackground {...{top}}>
+          {results === undefined && recents.length !== 0 ? (
+            <RecentSearches
+              sectionTitle="Recent"
+              sectionButtonTitle="Clear all"
+              onPress={clearRecentlySearched}
+              recents={recents}
+              screenType={ScreenType.Search}
+            />
+          ) : (
+            <SearchResultList
+              {...{results}}
+              keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
+              previewType={'Search'}
+              screenType={ScreenType.Search}
+            />
+          )}
+        </SearchResultsBackground>
+      </ScrollView>
+      <TabsGradient />
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  mainContainer: {
+  screenContainer: {
+    paddingTop: 10,
     backgroundColor: '#fff',
-    height: SCREEN_HEIGHT,
   },
   contentContainer: {
     height: SCREEN_HEIGHT * 0.9,
@@ -185,9 +185,6 @@ const styles = StyleSheet.create({
     paddingBottom: SCREEN_HEIGHT / 3,
     paddingHorizontal: '3%',
   },
-  searchBar: {
-    paddingLeft: '3%',
-  },
   header: {
     marginVertical: 20,
     zIndex: 1,
-- 
cgit v1.2.3-70-g09d2


From 5ca6ad3110ed086bec82b30090fb2f508f083025 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 8 Mar 2021 00:01:27 -0500
Subject: Increase paddingTop to lower search bar

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

(limited to 'src/screens')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 2c580c5b..61dea11e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -176,7 +176,7 @@ const SearchScreen: React.FC = () => {
 
 const styles = StyleSheet.create({
   screenContainer: {
-    paddingTop: 10,
+    paddingTop: 15,
     backgroundColor: '#fff',
   },
   contentContainer: {
-- 
cgit v1.2.3-70-g09d2


From f712d3f5fad5cfbf523d99fd42f472f4f1b62686 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 8 Mar 2021 20:12:56 -0500
Subject: Fix query clearing delay

---
 src/screens/search/SearchScreen.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 61dea11e..df3c1d67 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -51,6 +51,7 @@ const SearchScreen: React.FC = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    if (!searching) return;
     if (query.length < 3) {
       setResults(undefined);
       return;
@@ -88,6 +89,17 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
+  // when searching state changes, run animation and reset query accordingly
+  useEffect(() => {
+    if (searching) {
+      timing(top, topInConfig).start(() => setResults(undefined));
+    } else {
+      setQuery('');
+      handleBlur();
+      timing(top, topOutConfig).start();
+    }
+  }, [searching]);
+
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -120,15 +132,12 @@ const SearchScreen: React.FC = () => {
     easing: Easing.inOut(Easing.ease),
   };
   const handleFocus = () => {
-    timing(top, topInConfig).start();
     setSearching(true);
   };
   const handleBlur = () => {
     Keyboard.dismiss();
   };
   const handleCancel = () => {
-    handleBlur();
-    timing(top, topOutConfig).start(() => setQuery(''));
     setSearching(false);
   };
 
@@ -141,7 +150,7 @@ const SearchScreen: React.FC = () => {
         onBlur={handleBlur}
         onFocus={handleFocus}
         value={query}
-        {...{top, searching}}
+        {...{top}}
       />
       <ScrollView
         scrollEnabled={!searching}
-- 
cgit v1.2.3-70-g09d2


From 4a2f66366e6cb6802494711f157d509d083c7a1a Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Sun, 7 Mar 2021 23:45:57 -0500
Subject: Update and prune style rules

---
 src/components/search/SearchResultsBackground.tsx |  13 ++-
 src/screens/search/SearchScreen.tsx               | 132 +++++++++++-----------
 2 files changed, 71 insertions(+), 74 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index 25dcf781..7c1244fe 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import Animated, {interpolate} from 'react-native-reanimated';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 interface SearchResultsBackgroundProps {
   top: Animated.Value<number>;
@@ -21,7 +21,8 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
   return (
     <Animated.View
       style={[styles.container, {opacity: opacityBackground, top}]}>
-      <Animated.View style={{opacity: opacityContent}}>
+      <Animated.View
+        style={[styles.contentContainer, {opacity: opacityContent}]}>
         {children}
       </Animated.View>
     </Animated.View>
@@ -29,14 +30,14 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
     position: 'absolute',
     backgroundColor: 'white',
-    paddingTop: 60,
-    paddingBottom: 10,
-    zIndex: 0,
+  },
+  contentContainer: {
+    flex: 1,
+    paddingBottom: SCREEN_HEIGHT / 15,
   },
 });
 export default SearchResultsBackground;
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 835a5622..dae1b174 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Keyboard, ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {Keyboard, ScrollView, StatusBar, StyleSheet} from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
@@ -102,26 +102,6 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
-  const handleFocus = () => {
-    const topInConfig = {
-      duration: 180,
-      toValue: 0,
-      easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
-    };
-    timing(top, topInConfig).start();
-    setSearching(true);
-  };
-  const handleCancel = () => {
-    Keyboard.dismiss();
-    const topOutConfig = {
-      duration: 180,
-      toValue: -SCREEN_HEIGHT,
-      easing: Easing.inOut(Easing.ease),
-    };
-    timing(top, topOutConfig).start(() => setQuery(''));
-    setSearching(false);
-  };
-
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -157,56 +137,75 @@ const SearchScreen: React.FC = () => {
     }
   };
 
+  const topInConfig = {
+    duration: 180,
+    toValue: 0,
+    easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
+  };
+  const topOutConfig = {
+    duration: 180,
+    toValue: -SCREEN_HEIGHT,
+    easing: Easing.inOut(Easing.ease),
+  };
+  const handleFocus = () => {
+    timing(top, topInConfig).start();
+    setSearching(true);
+  };
+  const handleBlur = () => {
+    Keyboard.dismiss();
+  };
+  const handleCancel = () => {
+    handleBlur();
+    timing(top, topOutConfig).start(() => setQuery(''));
+    setSearching(false);
+  };
+
   return (
-    <View style={styles.mainContainer}>
-      <SafeAreaView>
-        <StatusBar barStyle="dark-content" />
-        <ScrollView
-          scrollEnabled={!searching}
-          keyboardShouldPersistTaps={'always'}
-          stickyHeaderIndices={[4]}
-          contentContainerStyle={styles.contentContainer}
-          showsVerticalScrollIndicator={false}>
-          <SearchBar
-            style={styles.searchBar}
-            onCancel={handleCancel}
-            onChangeText={setQuery}
-            onBlur={Keyboard.dismiss}
-            onFocus={handleFocus}
-            value={query}
-            {...{top, searching}}
-          />
-          <SearchCategories />
-          <SearchResultsBackground {...{top}}>
-            {results === undefined &&
-            recents.length + recentCategories.length !== 0 ? (
-              <RecentSearches
-                sectionTitle="Recent"
-                sectionButtonTitle="Clear all"
-                onPress={clearRecentlySearched}
-                screenType={ScreenType.Search}
-                {...{recents, recentCategories}}
-              />
-            ) : (
-              <SearchResultList
-                {...{results}}
-                keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
-                previewType={'Search'}
-                screenType={ScreenType.Search}
-              />
-            )}
-          </SearchResultsBackground>
-        </ScrollView>
-        <TabsGradient />
-      </SafeAreaView>
-    </View>
+    <SafeAreaView style={styles.screenContainer}>
+      <StatusBar barStyle="dark-content" />
+      <SearchBar
+        onCancel={handleCancel}
+        onChangeText={setQuery}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={query}
+        {...{top}}
+      />
+      <ScrollView
+        scrollEnabled={!searching}
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}>
+        <SearchCategories />
+        <SearchResultsBackground {...{top}}>
+          {results === undefined &&
+          recents.length + recentCategories.length !== 0 ? (
+            <RecentSearches
+              sectionTitle="Recent"
+              onPress={clearRecentlySearched}
+              screenType={ScreenType.Search}
+              {...{recents, recentCategories}}
+            />
+          ) : (
+            <SearchResultList
+              {...{results}}
+              keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
+              previewType={'Search'}
+              screenType={ScreenType.Search}
+            />
+          )}
+        </SearchResultsBackground>
+      </ScrollView>
+      <TabsGradient />
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  mainContainer: {
+  screenContainer: {
+    paddingTop: 10,
     backgroundColor: '#fff',
-    height: SCREEN_HEIGHT,
   },
   contentContainer: {
     height: SCREEN_HEIGHT * 0.9,
@@ -214,9 +213,6 @@ const styles = StyleSheet.create({
     paddingBottom: SCREEN_HEIGHT / 3,
     paddingHorizontal: '3%',
   },
-  searchBar: {
-    paddingLeft: '3%',
-  },
   header: {
     marginVertical: 20,
     zIndex: 1,
-- 
cgit v1.2.3-70-g09d2


From da87ce9d43e1d5c93e9c3cbd7f1e90aa195fb023 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 8 Mar 2021 00:01:27 -0500
Subject: Increase paddingTop to lower search bar

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

(limited to 'src/screens')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index dae1b174..34d98977 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -204,7 +204,7 @@ const SearchScreen: React.FC = () => {
 
 const styles = StyleSheet.create({
   screenContainer: {
-    paddingTop: 10,
+    paddingTop: 15,
     backgroundColor: '#fff',
   },
   contentContainer: {
-- 
cgit v1.2.3-70-g09d2


From fe8220212c64c5d60b43785f4e669642c8761631 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 8 Mar 2021 20:12:56 -0500
Subject: Fix query clearing delay

---
 src/screens/search/SearchScreen.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 34d98977..4e6ce6a4 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -64,6 +64,7 @@ const SearchScreen: React.FC = () => {
    * Main handler for changes in query.
    */
   useEffect(() => {
+    if (!searching) return;
     if (!query.length) loadRecentSearches();
     if (query.length < 3) {
       setResults(undefined);
@@ -102,6 +103,17 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
+  // when searching state changes, run animation and reset query accordingly
+  useEffect(() => {
+    if (searching) {
+      timing(top, topInConfig).start(() => setResults(undefined));
+    } else {
+      setQuery('');
+      handleBlur();
+      timing(top, topOutConfig).start();
+    }
+  }, [searching]);
+
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -148,15 +160,12 @@ const SearchScreen: React.FC = () => {
     easing: Easing.inOut(Easing.ease),
   };
   const handleFocus = () => {
-    timing(top, topInConfig).start();
     setSearching(true);
   };
   const handleBlur = () => {
     Keyboard.dismiss();
   };
   const handleCancel = () => {
-    handleBlur();
-    timing(top, topOutConfig).start(() => setQuery(''));
     setSearching(false);
   };
 
-- 
cgit v1.2.3-70-g09d2