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