From 0ed9dae07b9bc38ee30d75e927ec15005542b906 Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Wed, 15 Mar 2023 11:07:33 +0100 Subject: [PATCH] getCityList marche --- iut-expo-starter/redux/actions/getCityList.ts | 22 +++++++++++++++---- iut-expo-starter/redux/reducers/appReducer.ts | 11 +++++----- iut-expo-starter/screens/CityList.tsx | 19 +++++++++++++--- iut-expo-starter/screens/Home.tsx | 1 - 4 files changed, 40 insertions(+), 13 deletions(-) diff --git a/iut-expo-starter/redux/actions/getCityList.ts b/iut-expo-starter/redux/actions/getCityList.ts index c266579e..cc35a335 100644 --- a/iut-expo-starter/redux/actions/getCityList.ts +++ b/iut-expo-starter/redux/actions/getCityList.ts @@ -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)) + } + } } \ No newline at end of file diff --git a/iut-expo-starter/redux/reducers/appReducer.ts b/iut-expo-starter/redux/reducers/appReducer.ts index 3c3caa15..a4640306 100644 --- a/iut-expo-starter/redux/reducers/appReducer.ts +++ b/iut-expo-starter/redux/reducers/appReducer.ts @@ -1,8 +1,8 @@ import { City } from "../../data/stub"; -import { ADD_FAVORITE_CITY, FETCH_CITY, FETCH_FAVORITE_CITY, GET_CITIES } from "../constants"; +import { ADD_FAVORITE_CITY, FETCH_CITIES, FETCH_FAVORITE_CITY, GET_CITIES } from "../constants"; const initialState = { - city: [], + cityList: [], favoriteCity: null, } @@ -11,13 +11,14 @@ const appReducer = (state = initialState, action) => { case ADD_FAVORITE_CITY: // @ts-ignore return {...state, favoriteCity: state.favoriteCity = action.payload}; - case FETCH_CITY: + case FETCH_CITIES: + console.log(action.payload) // @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; } diff --git a/iut-expo-starter/screens/CityList.tsx b/iut-expo-starter/screens/CityList.tsx index 3c17b892..78200a76 100644 --- a/iut-expo-starter/screens/CityList.tsx +++ b/iut-expo-starter/screens/CityList.tsx @@ -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 ( diff --git a/iut-expo-starter/screens/Home.tsx b/iut-expo-starter/screens/Home.tsx index a5bca7ca..229498f9 100644 --- a/iut-expo-starter/screens/Home.tsx +++ b/iut-expo-starter/screens/Home.tsx @@ -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 (