From 95bc850b9db986b9f462f19d7801218027307d58 Mon Sep 17 00:00:00 2001
From: ankit-thanekar007 <ankit.thanekar007@gmail.com>
Date: Wed, 3 Mar 2021 12:34:33 -0800
Subject: TMA-663-Search Integration

---
 src/components/search/ExploreSection.tsx   |  2 +-
 src/components/search/SearchResultCell.tsx | 12 +++++------
 src/components/search/SearchResultList.tsx | 32 +++++++++++++++++++-----------
 3 files changed, 27 insertions(+), 19 deletions(-)

(limited to 'src/components')

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,
-- 
cgit v1.2.3-70-g09d2