Refactored Search Page

src/screens/Search/SearchPage.js

@@ -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 '../../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>