You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
47 lines
1.6 KiB
import { View, Text, StyleSheet, TouchableHighlight } from "react-native"
|
|
import { FlatList } from "react-native-gesture-handler"
|
|
import { CITIES_DATA, City, getCurrentWeather, FAVORITE_CITY_DATA } from "../data/stub"
|
|
import { VilleCompopo } from "../components/VilleCompopo";
|
|
import { TopBar } from "../components/TopBar";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { useEffect } from "react";
|
|
import { getCityList } from "../redux/actions/getCityList";
|
|
|
|
|
|
export default function CityList({navigation}){
|
|
|
|
const cityList = useSelector(state => state.appReducer.cityList);
|
|
// Create a const that will hold the react-redux events dispatcher
|
|
const dispatch = useDispatch();
|
|
|
|
// Let's define a hook that will be used to update the rendered state after the return will be called
|
|
// You cannot perform side-effects outside of a useEffect hook
|
|
useEffect(() => {
|
|
const loadCity = async () => {
|
|
await dispatch(getCityList());
|
|
};
|
|
loadCity();
|
|
console.log(cityList)
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<View style={{flex: 1, width: "100%", alignItems: "center"}}>
|
|
<TopBar/>
|
|
<FlatList
|
|
data={cityList}
|
|
keyExtractor={item =>item.name}
|
|
renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("CityDetails", {"city": item})}><VilleCompopo city={item} fav={FAVORITE_CITY_DATA}/></TouchableHighlight>}
|
|
style={leStyle.container}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
|
|
const leStyle = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignContent: 'center',
|
|
width: '100%'
|
|
},
|
|
}); |