Flatlist for Filter Display

src/screens/Search/SearchPage.js

@@ -1,4 +1,4 @@
-import { ScrollView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
+import { FlatList, 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'
@@ -144,11 +144,12 @@ const SearchPage = props => {
     filterCheckboxes: {
       alignItems: 'flex-start'
     },
-    listItemText:{
+    listItemText: {
       fontFamily: fonts.type.medium,
-      fontSize: moderateScale(14)
+      fontSize: moderateScale(14),
+      color: colors().recessive
     },
-    listItem:{
+    listItem: {
       paddingVertical: verticalScale(0)
     }
   })
@@ -169,10 +170,10 @@ const SearchPage = props => {
       .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}),{})}))
-             
+        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 }), {}) }))
+
       })
   }
 
@@ -197,6 +198,7 @@ const SearchPage = props => {
     }
 
   }
+
   return (
     <PaperProvider>
       <SafeAreaView style={styles.container}>
@@ -206,6 +208,7 @@ const SearchPage = props => {
               <Text style={styles.filterHeading}>Filters</Text>
               <View style={styles.utilContainer}>
                 <ThemedTextButton theme={'primary-contained'} title={'Clear All'} buttonStyle={{ paddingVertical: verticalScale(6) }} />
+                
                 <IconButton
                   icon="close"
                   iconColor={colors().recessive}
@@ -249,28 +252,38 @@ const SearchPage = props => {
               </ScrollView>
             </View>
 
-            <ScrollView contentContainerStyle={styles.filterCheckboxes} showsVerticalScrollIndicator={false}>
-              {
-                // filtersData[currentFilter] 
-                Object.keys(filtersData).length <= 0 ? <LoadingScreen />
-                  : Object.entries(filtersData[currentFilter]).map(item => {
-                    return (<List.Item
-                      style={styles.listItem}
-                      titleStyle={styles.listItemText}
-                      title={item[0]}
-                      left={props => <Checkbox
-                        status={filtersData[currentFilter][item[0]] === true ? 'checked' : 'unchecked'}
-                        onPress={() =>
-                          setFiltersData({ ...filtersData, [currentFilter]: { ...filtersData[currentFilter], [item[0]]: !filtersData[currentFilter][item[0]] } })}
-                        // setSelectedTopics({...filtersData,[item.heading.name]: !selectedTopics[item.heading.name]})}
-                        color={colors().secondaryColor}
-                      />}
-
-                    />)
-                  }
-                  )
-              }
-            </ScrollView>
+            {
+              // filtersData[currentFilter] 
+              Object.keys(filtersData).length <= 0 ? <LoadingScreen />
+                :
+                <FlatList
+                  contentContainerStyle={styles.filterCheckboxes}
+                  showsVerticalScrollIndicator={false}
+                  data={Object.entries(filtersData[currentFilter])}
+                  renderItem={filter => <List.Item
+                    key={filter.item[0]}
+                    style={styles.listItem}
+                    titleStyle={styles.listItemText}
+                    title={filter.item[0]}
+                    left={props => <Checkbox
+                      status={filtersData[currentFilter][filter.item[0]] === true ? 'checked' : 'unchecked'}
+                      onPress={() =>{
+                        setFiltersData({ ...filtersData, [currentFilter]: { ...filtersData[currentFilter], [filter.item[0]]: !filtersData[currentFilter][filter.item[0]] } })
+                        console.log(filtersData[currentFilter][filter.item[0]])
+                      }}
+                      
+                      color={colors().secondaryColor}
+                    />}
+
+                  />}
+                // keyExtractor={item => item.index}
+                />}
+          <ThemedTextButton theme={'secondary-contained'} title={'Apply'} buttonStyle={{ paddingVertical: verticalScale(6),marginTop: verticalScale(8) }} />
+
+
+
+
+
           </Modal>
         </Portal>
         <ScrollView>