1 files changed, 58 insertions, 56 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index a66a2cbc..b6841480 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -3,10 +3,12 @@ import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {
   Keyboard,
+  KeyboardAvoidingView,
   RefreshControl,
   ScrollView,
   StatusBar,
   StyleSheet,
+  SafeAreaView,
 } from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
 import {useDispatch, useSelector} from 'react-redux';
@@ -20,11 +22,12 @@ import {
   SearchResultsBackground,
   TabsGradient,
 } from '../../components';
-import {SEARCH_V2_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
+import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, UserType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {loadSearchResults} from '../../services';
 const NO_USER: UserType = {
   userId: '',
   username: '',
@@ -38,14 +41,27 @@ const NO_USER: UserType = {
 const SearchScreen: React.FC = () => {
   const {recentSearches} = useSelector((state: RootState) => state.taggUsers);
   const [query, setQuery] = useState<string>('');
-  const [results, setResults] = useState(Array<any>());
+  const [results, setResults] = useState<Array<any> | undefined>(undefined);
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
     recentSearches ?? [],
   );
   const [searching, setSearching] = useState(false);
   const top = Animated.useValue(-SCREEN_HEIGHT);
   const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [keyboardVisible, setKeyboardVisible] = React.useState(
+    'keyboardVisible',
+  );
+  useEffect(() => {
+    const showKeyboard = () => setKeyboardVisible('keyboardVisibleTrue');
+    Keyboard.addListener('keyboardWillShow', showKeyboard);
+    return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
+  }, []);
 
+  useEffect(() => {
+    const hideKeyboard = () => setKeyboardVisible('keyboardVisibleFalse');
+    Keyboard.addListener('keyboardWillHide', hideKeyboard);
+    return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+  }, []);
   const dispatch = useDispatch();
 
   const onRefresh = useCallback(() => {
@@ -60,48 +76,31 @@ const SearchScreen: React.FC = () => {
 
   useEffect(() => {
     if (query.length < 3) {
-      setResults([]);
+      setResults(undefined);
       return;
     }
-    const loadResults = async (q: string) => {
-      try {
-        const token = await AsyncStorage.getItem('token');
-        const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, {
-          method: 'GET',
-          headers: {
-            Authorization: 'Token ' + token,
+    (async () => {
+      const searchResults = await loadSearchResults(
+        `${SEARCH_ENDPOINT}?query=${query}`,
+      );
+      if (query.length > 2) {
+        const categories = searchResults?.categories;
+        const users = searchResults?.users;
+        const sanitizedResult = [
+          {
+            title: 'categories',
+            data: categories,
           },
-        });
-        const {status} = response;
-        if (status === 200) {
-          const searchResults = await response.json();
-          const sanitizedResult = [
-            {
-              title: 'categories',
-              data: searchResults.categories,
-            },
-            {
-              title: 'users',
-              data: searchResults.users,
-            },
-          ];
-
-          if (
-            searchResults.categories.length !== 0 ||
-            searchResults.users.length !== 0
-          ) {
-            if (query.length > 3) {
-              setResults(sanitizedResult);
-              return;
-            }
-          }
-        }
-      } catch (error) {
-        console.log(error);
+          {
+            title: 'users',
+            data: users,
+          },
+        ];
+        setResults(sanitizedResult);
+      } else {
+        setResults(undefined);
       }
-      setResults([]);
-    };
-    loadResults(query);
+    })();
   }, [query]);
 
   /**
@@ -179,24 +178,27 @@ const SearchScreen: React.FC = () => {
         <Explore />
 
         <SearchResultsBackground {...{top}}>
-          {results && results.length === 0 ? (
-            <RecentSearches
-              sectionTitle="Recent"
-              sectionButtonTitle="Clear all"
-              onPress={clearRecentlySearched}
-              recents={recents}
-              screenType={ScreenType.Search}
-            />
-          ) : (
-            <SearchResultList
-              {...{results}}
-              previewType={'Search'}
-              screenType={ScreenType.Search}
-            />
-          )}
+          <KeyboardAvoidingView
+            behavior={'padding'}
+            keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+            {results === undefined && recents.length !== 0 ? (
+              <RecentSearches
+                sectionTitle="Recent"
+                sectionButtonTitle="Clear all"
+                onPress={clearRecentlySearched}
+                recents={recents}
+                screenType={ScreenType.Search}
+              />
+            ) : (
+              <SearchResultList
+                {...{results}}
+                previewType={'Search'}
+                screenType={ScreenType.Search}
+              />
+            )}
+          </KeyboardAvoidingView>
         </SearchResultsBackground>
       </ScrollView>
-
       <TabsGradient />
     </SearchBackground>
   );