export const HomeHeader = () => {
const filters = useSelector(state => state.filterReducer.category)
const loading = useSelector(state => state.filterReducer.loading)
const [filterArr, setFilter] = useState(filters)
const dispatch = useDispatch()
useEffect(() => {
dispatch(loadingFilter())
setFilter(filters)
}, [ filters, loading])
const {container,createPostWrapper, createIcon,
createIconWrapper,filterWrapper} = styles
const handleFilter = (title) =>{
dispatch(toggleFilter(title))
console.log(filters)
}
if(loading){
return <View><Text>Loading...</Text></View>
}
return (
<View style={container}>
<View style={createPostWrapper}>
<CircleAvatar colorOfAvatar='#0067ff'>31</CircleAvatar>
<TouchableOpacity style={createIconWrapper} >
<Image style={createIcon} source={require('../../assets/create.png')}/>
</TouchableOpacity>
</View>
<View style={filterWrapper}>
{
filterArr.map((item, index) =>
<Filter
key={index}
selected={item.status}
handleFilter={handleFilter}
>
{item.title}
</Filter>
)
}
</View>
</View>
)
}