|
@@ -1,18 +1,14 @@
|
|
|
-import { FlatList, ScrollView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
|
|
|
-import React, { useEffect, useState } from 'react'
|
|
|
+import { ScrollView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
|
|
|
+import React, { useState } from 'react'
|
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
|
-import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
|
|
|
import colors from '../../constants/colors'
|
|
|
-import { Checkbox, IconButton, List, Modal, PaperProvider, Portal, TextInput, ToggleButton } from 'react-native-paper'
|
|
|
+import { List, PaperProvider, TextInput } from 'react-native-paper'
|
|
|
import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../constants/metrics'
|
|
|
import IonIcon from 'react-native-vector-icons/Ionicons'
|
|
|
import fonts from '../../constants/fonts'
|
|
|
-import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../constants/functions'
|
|
|
+import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../utils/functions'
|
|
|
import { getArticlesBySearch, getCategories, getMenus, getTrendingNews } from '../../api/data'
|
|
|
-import LoadingScreen from '../../components/organisms/Sections/LoadingScreen'
|
|
|
import { PAGINATE_BY } from '../../api/urls'
|
|
|
-import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant'
|
|
|
-import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
|
|
|
|
|
|
const SearchPage = props => {
|
|
|
|
|
@@ -21,23 +17,10 @@ const SearchPage = props => {
|
|
|
route
|
|
|
} = props
|
|
|
|
|
|
- const [isSearching, setSearching] = useState(false)
|
|
|
const [categories, setCategories] = useState([])
|
|
|
const [searchText, setSearchText] = useState("")
|
|
|
-
|
|
|
- const [suggestedNews, setSuggestedNews] = useState([])
|
|
|
-
|
|
|
- const [filtersData, setFiltersData] = useState({})
|
|
|
- const [currentFilter, setCurrentFilter] = useState("Category")
|
|
|
-
|
|
|
const [recentSearches, setRecentSearches] = useState([])
|
|
|
|
|
|
- const [pagesLoaded, setPagesLoaded] = useState(1)
|
|
|
- // * Filters Modal
|
|
|
- const [isFiltersVisible, setFiltersVisible] = useState(false);
|
|
|
- const showFilters = () => setFiltersVisible(true);
|
|
|
- const hideFilters = () => setFiltersVisible(false);
|
|
|
-
|
|
|
const styles = StyleSheet.create({
|
|
|
container: {
|
|
|
backgroundColor: colors().dominant,
|
|
@@ -50,7 +33,6 @@ const SearchPage = props => {
|
|
|
paddingVertical: verticalScale(16),
|
|
|
flexDirection: 'row',
|
|
|
alignItems: 'center',
|
|
|
- // gap: horizontalScale(16),
|
|
|
maxWidth: '100%'
|
|
|
},
|
|
|
categoryContainer: {
|
|
@@ -58,8 +40,6 @@ const SearchPage = props => {
|
|
|
flexDirection: 'row',
|
|
|
flexWrap: 'wrap',
|
|
|
gap: moderateScale(16),
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
category: {
|
|
|
height: 170,
|
|
@@ -88,7 +68,6 @@ const SearchPage = props => {
|
|
|
padding: moderateScale(16),
|
|
|
width: '100%',
|
|
|
height: '100%',
|
|
|
- // marginHorizontal: horizontalScale(32),
|
|
|
justifyContent: 'flex-start',
|
|
|
backgroundColor: colors().dominant,
|
|
|
},
|
|
@@ -163,86 +142,31 @@ const SearchPage = props => {
|
|
|
getCategories().then(res => setCategories(res.data.body.results)).catch(err => console.log(err))
|
|
|
}
|
|
|
|
|
|
- const fetchSuggestions = (search_text, page = 1, filters = "") => {
|
|
|
- getArticlesBySearch(search_text, page, filters)
|
|
|
- .then(res => setSuggestedNews(prev => [...prev, ...res.data.body.results]))
|
|
|
- .catch(err => console.log(err))
|
|
|
- }
|
|
|
-
|
|
|
- const fetchFilters = () => {
|
|
|
- getMenus()
|
|
|
- .then(res => {
|
|
|
- let filtersPayload = res.data.body.results
|
|
|
- //Reduce Submenus into a object
|
|
|
- setFiltersData(prev => ({ ...prev, "Category": filtersPayload.flatMap(item => item.heading.submenu.map(category => category.name)).reduce((current, value) => ({ ...current, [value]: false }), {}) }))
|
|
|
- setFiltersData(prev => ({ ...prev, "Source": filtersPayload.flatMap(item => item.heading.submenu.map(category => category.name)).reduce((current, value) => ({ ...current, [value]: false }), {}) }))
|
|
|
- setFiltersData(prev => ({ ...prev, "Hash Tags": filtersPayload.flatMap(item => item.heading.submenu.map(category => category.hash_tags.map(tag => tag.name))).reduce((current, value) => ({ ...current, [value]: false }), {}) }))
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
const getRecentSearches = () => {
|
|
|
getTrendingNews().then(res => setRecentSearches(res.data.body.results.slice(0, PAGINATE_BY))).catch(err => console.error(err))
|
|
|
}
|
|
|
|
|
|
useConstructor(() => {
|
|
|
fetchCategories()
|
|
|
- fetchFilters()
|
|
|
getRecentSearches()
|
|
|
})
|
|
|
|
|
|
const onChangeText = text => {
|
|
|
if (text.length <= 0) {
|
|
|
setSuggestedNews([])
|
|
|
- setSearching(false)
|
|
|
}
|
|
|
setSearchText(text)
|
|
|
-
|
|
|
}
|
|
|
|
|
|
const onSearch = () => {
|
|
|
navigation.push('SearchListPage', { query: searchText })
|
|
|
}
|
|
|
|
|
|
- const clearAllFilters = () => {
|
|
|
- setFiltersData(prev => ({ ...prev, "Category": Object.entries(filtersData['Category']).reduce((current, value) => ({ ...current, [value[0]]: false }), {}) }))
|
|
|
- setFiltersData(prev => ({ ...prev, "Source": Object.entries(filtersData['Source']).reduce((current, value) => ({ ...current, [value[0]]: false }), {}) }))
|
|
|
- setFiltersData(prev => ({ ...prev, "Hash Tags": Object.entries(filtersData['Hash Tags']).reduce((current, value) => ({ ...current, [value[0]]: false }), {}) }))
|
|
|
- }
|
|
|
-
|
|
|
- const applyFilters = () => {
|
|
|
- setSuggestedNews([])
|
|
|
- setSearching(true)
|
|
|
- hideFilters()
|
|
|
- setPagesLoaded(1)
|
|
|
- console.log(createFilters(filtersData))
|
|
|
- fetchSuggestions(searchText, 1, createFilters(filtersData))
|
|
|
- }
|
|
|
-
|
|
|
- const createFilters = (filterObject) => {
|
|
|
- let filterText = ""
|
|
|
- for (const obj of Object.entries(filterObject)) {
|
|
|
- for (const category of Object.entries(obj[1])) {
|
|
|
- if (category[1] === true) {
|
|
|
- filterText += `&${obj[0].toLowerCase()}=${category[0]}`
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return filterText
|
|
|
- }
|
|
|
-
|
|
|
- // useEffect(() => {
|
|
|
- // fetchSuggestions(searchText,pagesLoaded,createFilters(filtersData))
|
|
|
- // },[pagesLoaded])
|
|
|
-
|
|
|
-
|
|
|
return (
|
|
|
<PaperProvider>
|
|
|
<SafeAreaView style={styles.container}>
|
|
|
|
|
|
<ScrollView>
|
|
|
- {/* <NewscoutTitleHeader title={"Search"} /> */}
|
|
|
-
|
|
|
<View style={styles.inputTextContainer}>
|
|
|
<TextInput
|
|
|
returnKeyType='search'
|
|
@@ -260,14 +184,13 @@ const SearchPage = props => {
|
|
|
contentStyle={{
|
|
|
fontSize: moderateScale(16),
|
|
|
fontFamily: fonts.type.medium,
|
|
|
- // height: moderateScale(16),
|
|
|
}}
|
|
|
outlineStyle={{
|
|
|
borderColor: colors().dominant_variant,
|
|
|
borderRadius: moderateScale(8),
|
|
|
borderWidth: moderateScale(1),
|
|
|
}}
|
|
|
- // underlineStyle={{backgroundColor: colors().dominant}}
|
|
|
+ cursorColor={colors().primaryColor}
|
|
|
left={() => <Text>fdsfdss</Text>}
|
|
|
right={() => <TouchableOpacity onPress={() => navigateToListViewPage(navigation, 'search', searchText)}><IonIcon name="search" color={colors().grayShade_200} size={moderateScale(8)} /></TouchableOpacity>}
|
|
|
onChangeText={onChangeText}
|
|
@@ -306,9 +229,6 @@ const SearchPage = props => {
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</ScrollView>
|
|
|
</SafeAreaView>
|
|
|
</PaperProvider>
|