Mathilde JEAN 2 years ago
commit 53980a7bd3

@ -1,8 +1,22 @@
import { City } from '../../data/stub';
import {GET_CITIES} from '../constants';
import { setCityList } from './setCityList';
export const getCity = () => {
return {
type: GET_CITIES,
};
export const getCityList = () => {
return async dispatch => {
try {
const cityPromise = await fetch('https://iut-weather-api.azurewebsites.net/cities');
const cityListJson = await cityPromise.json();
const cityList: City[] = cityListJson.map((elt: { [x: string]: any; }) => new City(elt["name"], elt["latitude"], elt["longitude"]));
dispatch(setCityList(cityList));
} catch (error) {
console.log('Error---------', error);
//You can dispatch to another action if you want to display an error message in the application
//dispatch(fetchDataRejected(error))
}
}
}

@ -2,7 +2,7 @@ import { City } from "../../data/stub";
import { ADD_FAVORITE_CITY, FETCH_CITIES, FETCH_FAVORITE_CITY, GET_CITIES } from "../constants";
const initialState = {
city: [],
cityList: [],
favoriteCity: null,
}
@ -13,11 +13,11 @@ const appReducer = (state = initialState, action) => {
return {...state, favoriteCity: state.favoriteCity = action.payload};
case FETCH_CITIES:
// @ts-ignore
return {...state, city: action.payload};
return {...state, cityList: action.payload};
case FETCH_FAVORITE_CITY:
return {...state, favoriteCity: state.favoriteCity}
case GET_CITIES:
return {...state, city: state.city}
return {...state, cityList: action.payload}
default:
return state;
}

@ -3,13 +3,26 @@ 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 { useSelector } from "react-redux";
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.city);
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"}}>

@ -14,7 +14,6 @@ export default function Home(navigation){
const insets = useSafeAreaInsets();
const statusBarHeight = insets.top;
const favoriteCity: City | null = FAVORITE_CITY_DATA;
const cityList = useSelector(state => state.push());
return (
<View style={{alignItems: "center"}}>

Loading…
Cancel
Save