TMA-663-Search Integration

4 files changed, 70 insertions, 83 deletions

diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 025c8c3c..e888370e 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -14,7 +14,7 @@ interface ExploreSectionProps {
   users: ProfilePreviewType[];
 }
 const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
-  return users.length !== 0 ? (
+  return users && users.length !== 0 ? (
     <View style={styles.container}>
       <Text style={styles.header}>{title}</Text>
       <FlatList
diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index cdeed922..084c6afe 100644
--- a/src/components/search/SearchResultCell.tsx
+++ b/src/components/search/SearchResultCell.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { Image, StyleSheet, Text, View } from 'react-native';
-import { loadImageFromURL } from '../../services';
-import { ProfilePreviewType } from '../../types';
-import { normalize, SCREEN_WIDTH } from '../../utils';
-import { defaultUserProfile } from '../../utils/users';
+import React, {useEffect, useState} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {loadImageFromURL} from '../../services';
+import {ProfilePreviewType} from '../../types';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+import {defaultUserProfile} from '../../utils/users';
 
 interface SearchResults {
   profileData: ProfilePreviewType;
diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx
index c464e7b1..bf08e205 100644
--- a/src/components/search/SearchResultList.tsx
+++ b/src/components/search/SearchResultList.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
+  KeyboardAvoidingView,
   SectionList,
   StyleSheet,
   View
@@ -22,22 +23,29 @@ const sectionHeader: React.FC<Boolean> = (showBorder: Boolean) => {
 };
 
 const SearchResultList: React.FC<SearchResultsProps> = ({results}) => {
+  const [showSection, setShowSection] = useState(true);
   return (
-    <SectionList
-      contentContainerStyle={styles.container}
-      showsVerticalScrollIndicator={false}
-      sections={results}
-      keyExtractor={(item, index) => item + index}
-      renderItem={({item}) => <SearchResultsCell profileData={item} />}
-      renderSectionHeader={({section: {title}}) =>
-        sectionHeader(title !== 'categories')
-      }
-    />
+    <KeyboardAvoidingView style={styles.container} behavior="padding">
+      <SectionList
+        style={styles.container}
+        showsVerticalScrollIndicator={false}
+        sections={results}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({item}) => <SearchResultsCell profileData={item} />}
+        renderSectionHeader={({section: {title, data}}) => {
+          if (title === 'categories' && data.length === 0) {
+            setShowSection(false);
+          }
+          return sectionHeader(title !== 'categories' && showSection);
+        }}
+      />
+      <View style={{height: SCREEN_HEIGHT * 0.35}} />
+    </KeyboardAvoidingView>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {flex: 1, marginTop: SCREEN_HEIGHT * 0.02},
+  container: {marginTop: SCREEN_HEIGHT * 0.02},
   sectionHeaderStyle: {
     width: '100%',
     height: 0.5,
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 39b0425d..a66a2cbc 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -16,21 +16,15 @@ import {
   SearchBackground,
   SearchBar,
   SearchHeader,
-  SearchResults,
-  SearchResultsBackground,
   SearchResultList,
+  SearchResultsBackground,
   TabsGradient,
 } from '../../components';
-import {
-  SEARCH_ENDPOINT,
-  SEARCH_V2_ENDPOINT,
-  TAGG_LIGHT_BLUE,
-} from '../../constants';
+import {SEARCH_V2_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 MockResults from './mock';
 const NO_USER: UserType = {
   userId: '',
   username: '',
@@ -69,62 +63,45 @@ const SearchScreen: React.FC = () => {
       setResults([]);
       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,
-    //       },
-    //     });
-    //     const {status} = response;
-    //     if (status === 200) {
-    //       const searchResults = await response.json();
-    //       const sanitizedResult = [
-    //         {
-    //           title: 'categories',
-    //           data: searchResults.categories,
-    //         },
-    //         {
-    //           title: 'users',
-    //           data: searchResults.users,
-    //         },
-    //       ];
-    //       setResults(sanitizedResult);
-    //     } else {
-    //       const searchResults = MockResults();
-    //       const sanitizedResult = [
-    //         {
-    //           title: 'categories',
-    //           data: searchResults.categories,
-    //         },
-    //         {
-    //           title: 'users',
-    //           data: searchResults.users,
-    //         },
-    //       ];
-    //       setResults(sanitizedResult);
-    //     }
-    //     setResults([]);
-    //   } catch (error) {
-    //     console.log(error);
-    //     setResults([]);
-    //   }
-    // };
-    const searchResults = MockResults();
-    const sanitizedResult = [
-      {
-        title: 'categories',
-        data: searchResults.categories,
-      },
-      {
-        title: 'users',
-        data: searchResults.users,
-      },
-    ];
-    setResults(sanitizedResult);
-    // loadResults(query);
+    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,
+          },
+        });
+        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);
+      }
+      setResults([]);
+    };
+    loadResults(query);
   }, [query]);
 
   /**
@@ -200,6 +177,7 @@ const SearchScreen: React.FC = () => {
           {...{top, searching}}
         />
         <Explore />
+
         <SearchResultsBackground {...{top}}>
           {results && results.length === 0 ? (
             <RecentSearches
@@ -218,6 +196,7 @@ const SearchScreen: React.FC = () => {
           )}
         </SearchResultsBackground>
       </ScrollView>
+
       <TabsGradient />
     </SearchBackground>
   );