Fetches Suggestions based on Search Query

src/screens/Search/SearchPage.js

@@ -1,4 +1,4 @@
-import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import React, { useState } from 'react'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
@@ -7,29 +7,32 @@ import { TextInput } from 'react-native-paper'
 import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
 import IonIcon from 'react-native-vector-icons/Ionicons'
 import fonts from '../../constants/fonts'
-import { TouchableOpacity } from 'react-native-gesture-handler'
-import { navigateToListViewPage, useConstructor } from '../../constants/functions'
-import { getCategories } from '../../api/data'
+import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../constants/functions'
+import { getArticlesBySearch, getCategories } from '../../api/data'
+import LoadingScreen from '../../components/organisms/Sections/LoadingScreen'
+import { PAGINATE_BY } from '../../api/urls'
+import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant'
 
 
 const SearchPage = props => {
 
   const [isSearching, setSearching] = useState(false)
-  const [categories,setCategories] = useState([])
-
+  const [categories, setCategories] = useState([])
+  const [searchText, setSearchText] = useState("")
+  const [suggestedNews, setSuggestedNews] = useState([])
 
   const {
     navigation,
     route
   } = props
 
-  
+
 
   const styles = StyleSheet.create({
     container: {
       backgroundColor: colors().dominant,
       minHeight: '100%',
-      height:'100vh'
+      maxHeight: 'auto'
     },
     inputTextContainer: {
       backgroundColor: colors().dominant,
@@ -41,7 +44,7 @@ const SearchPage = props => {
       flexDirection: 'row',
       flexWrap: 'wrap',
       gap: moderateScale(16),
-     
+
 
     },
     category: {
@@ -67,10 +70,32 @@ const SearchPage = props => {
     getCategories().then(res => setCategories(res.data.body.results)).catch(err => console.log(err))
   }
 
+  const fetchSuggestions = (search_text) => {
+    getArticlesBySearch(search_text)
+      .then(res => setSuggestedNews(res.data.body.results.slice(0, PAGINATE_BY)))
+      .catch(err => console.log(err))
+  }
+
   useConstructor(() => {
     fetchCategories()
   })
 
+  const onChangeText = (text) => {
+    if (text.length > 0) {
+      console.warn(text)
+      setSearching(true)
+      setSearchText(text)
+      setSuggestedNews([])
+      fetchSuggestions(text)
+
+    } else {
+      console.warn(text)
+      setSearching(false)
+      setSearchText(text)
+      setSuggestedNews([])
+    }
+
+  }
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView>
@@ -97,15 +122,16 @@ const SearchPage = props => {
               borderWidth: moderateScale(1)
             }}
             // underlineStyle={{backgroundColor: colors().dominant}}
-            left={() => <IonIcon name={'search-outline'} color={colors().primaryColor} size={moderateScale(8)} />}
-
+            left={() => <Text>fdsfdss</Text>}
+            right={() => <TouchableOpacity onPress={() => navigateToListViewPage(navigation,'search',searchText)}><IonIcon name="search" color={colors().grayShade_400} size={moderateScale(8)} /></TouchableOpacity>}
+            onChangeText={onChangeText}
           />
         </View>
         {
           isSearching === false ?
             <View style={styles.categoryContainer}>
               {categories.map((item) =>
-                <TouchableOpacity onPress={() => navigateToListViewPage(navigation,"category",item.heading.name)}>
+                <TouchableOpacity onPress={() => navigateToListViewPage(navigation, "category", item.heading.name)}>
                   <View style={styles.category}>
                     <Text style={styles.categoryText}>{item.heading.name}</Text>
                   </View>
@@ -113,7 +139,19 @@ const SearchPage = props => {
 
               )}
             </View>
-            : <></>
+            : suggestedNews.length <= 0 ?
+              <View style={{ alignItems: 'center', justifyContent: 'center', }}><LoadingScreen containerHeight={600} /></View> : <View style={styles.categoryContainer}>
+                {suggestedNews.map((item) =>
+                  <HorizontalNewsCardVariant
+                    onPress={() => navigateToArticle(navigation, item.id, item.slug)}
+                    timestamp={item.published_on}
+                    headline={item.title}
+                    image={{ uri: item.cover_image }}
+                    category={item.category}
+                    tagline={item.id}
+                  />
+                )}
+              </View>
         }
       </ScrollView>
     </SafeAreaView>