From 9830b6777d9c6ee3e853b7d963673cacb5ecfb72 Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Fri, 24 Mar 2023 08:48:46 +0100 Subject: [PATCH] Redux avec api --- iut-expo-starter/.expo/packager-info.json | 4 +-- iut-expo-starter/components/VilleCompopo.tsx | 14 ++++---- iut-expo-starter/redux/actions/getCityList.ts | 22 ------------ .../redux/actions/getWeatherList.ts | 34 +++++++++++++++++++ iut-expo-starter/redux/actions/setCityList.ts | 9 ----- iut-expo-starter/redux/actions/setWeather.ts | 10 ++++++ iut-expo-starter/redux/constants.ts | 2 ++ iut-expo-starter/redux/reducers/appReducer.ts | 12 +++---- iut-expo-starter/screens/CityDetails.tsx | 24 ++++++------- iut-expo-starter/screens/CityList.tsx | 17 +++++----- 10 files changed, 81 insertions(+), 67 deletions(-) delete mode 100644 iut-expo-starter/redux/actions/getCityList.ts create mode 100644 iut-expo-starter/redux/actions/getWeatherList.ts delete mode 100644 iut-expo-starter/redux/actions/setCityList.ts create mode 100644 iut-expo-starter/redux/actions/setWeather.ts diff --git a/iut-expo-starter/.expo/packager-info.json b/iut-expo-starter/.expo/packager-info.json index 36cff4cb..f76bd557 100644 --- a/iut-expo-starter/.expo/packager-info.json +++ b/iut-expo-starter/.expo/packager-info.json @@ -1,6 +1,6 @@ { - "expoServerPort": null, - "packagerPort": null, + "expoServerPort": 19000, + "packagerPort": 19000, "packagerPid": null, "expoServerNgrokUrl": null, "packagerNgrokUrl": null, diff --git a/iut-expo-starter/components/VilleCompopo.tsx b/iut-expo-starter/components/VilleCompopo.tsx index 3117b988..8b341d25 100644 --- a/iut-expo-starter/components/VilleCompopo.tsx +++ b/iut-expo-starter/components/VilleCompopo.tsx @@ -4,23 +4,23 @@ import { City, FAVORITE_CITY_DATA, getCurrentWeather, Weather } from "../data/st type VilleProps = { - city: City, + weather: Weather, fav: City } export function VilleCompopo(props: VilleProps){ -const weather = getCurrentWeather(props.city.name); - return ( + + return ( - {props.city.name} - {props.city.latitude} - {props.city.longitude} + {props.weather.city.name} + {props.weather.city.latitude} - {props.weather.city.longitude} - {weather?.temperature} + {props.weather.temperature} FAVORITE_CITY_DATA = this.city}*/> - + diff --git a/iut-expo-starter/redux/actions/getCityList.ts b/iut-expo-starter/redux/actions/getCityList.ts deleted file mode 100644 index cc35a335..00000000 --- a/iut-expo-starter/redux/actions/getCityList.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { City } from '../../data/stub'; -import {GET_CITIES} from '../constants'; -import { setCityList } from './setCityList'; - -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/actions/getWeatherList.ts b/iut-expo-starter/redux/actions/getWeatherList.ts new file mode 100644 index 00000000..416d3533 --- /dev/null +++ b/iut-expo-starter/redux/actions/getWeatherList.ts @@ -0,0 +1,34 @@ +import { City, Weather } from '../../data/stub'; +import {GET_CITIES} from '../constants'; +import { setWeather } from './setWeather'; + +export const getWeatherList = () => { + 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"])); + + const promises = cityList.map( (city) =>{ + return fetch('https://iut-weather-api.azurewebsites.net/weather/city/name/'+city.name); + }) + Promise.all(promises).then((values) => { + const prom = values.map(async resp => { + const weatherJson = await resp.json(); + return new Weather(weatherJson["at"], weatherJson["visibility"], weatherJson["weatherType"], weatherJson["weatherDescription"], weatherJson["temperature"], weatherJson["temperatureFeelsLike"], weatherJson["humidity"], weatherJson["windspeed"], weatherJson["pressure"], new City(weatherJson["city"]["name"], weatherJson["city"]["latitude"], weatherJson["city"]["longitude"])); + }); + Promise.all(prom).then((values) => { + dispatch(setWeather(values)); + }) + + }) + } 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/actions/setCityList.ts b/iut-expo-starter/redux/actions/setCityList.ts deleted file mode 100644 index df9dbd48..00000000 --- a/iut-expo-starter/redux/actions/setCityList.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { City } from '../../data/stub'; -import {FETCH_CITIES} from '../constants'; - -export const setCityList = (cityList: City[]) => { - return { - type: FETCH_CITIES, - payload: cityList, - }; -} \ No newline at end of file diff --git a/iut-expo-starter/redux/actions/setWeather.ts b/iut-expo-starter/redux/actions/setWeather.ts new file mode 100644 index 00000000..c06c42d0 --- /dev/null +++ b/iut-expo-starter/redux/actions/setWeather.ts @@ -0,0 +1,10 @@ +import { Weather } from "../../data/stub"; +import { FETCH_WEATHER } from "../constants"; + +export const setWeather = (weather: Weather[]) => { + console.log(weather) + return { + type: FETCH_WEATHER, + payload: weather, + }; + } \ No newline at end of file diff --git a/iut-expo-starter/redux/constants.ts b/iut-expo-starter/redux/constants.ts index 27ec6f2a..3604f43a 100644 --- a/iut-expo-starter/redux/constants.ts +++ b/iut-expo-starter/redux/constants.ts @@ -2,4 +2,6 @@ export const FETCH_CITIES = "FETCH_CITIES" export const ADD_FAVORITE_CITY = "ADD_FAVORITE_CITY" export const FETCH_FAVORITE_CITY = "FETCH_FAVORITE_CITY" export const GET_CITIES = "GET_CITIES" +export const GET_WEATHER = "GET_WEATHER" +export const FETCH_WEATHER = "FETCH_WEATHER" diff --git a/iut-expo-starter/redux/reducers/appReducer.ts b/iut-expo-starter/redux/reducers/appReducer.ts index 0226ff5a..14ed8c92 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_CITIES, FETCH_FAVORITE_CITY, GET_CITIES } from "../constants"; +import { ADD_FAVORITE_CITY, FETCH_FAVORITE_CITY, FETCH_WEATHER, GET_WEATHER } from "../constants"; const initialState = { - cityList: [], + weatherList : [], favoriteCity: null, } @@ -11,13 +11,13 @@ const appReducer = (state = initialState, action) => { case ADD_FAVORITE_CITY: // @ts-ignore return {...state, favoriteCity: state.favoriteCity = action.payload}; - case FETCH_CITIES: + case FETCH_WEATHER: // @ts-ignore - return {...state, cityList: action.payload}; + return {...state, weatherList: action.payload}; case FETCH_FAVORITE_CITY: return {...state, favoriteCity: state.favoriteCity} - case GET_CITIES: - return {...state, cityList: action.payload} + case GET_WEATHER: + return {...state, weatherList: state.weatherList} default: return state; } diff --git a/iut-expo-starter/screens/CityDetails.tsx b/iut-expo-starter/screens/CityDetails.tsx index 53b694ba..eb2a4ccf 100644 --- a/iut-expo-starter/screens/CityDetails.tsx +++ b/iut-expo-starter/screens/CityDetails.tsx @@ -8,27 +8,25 @@ export default function CityDetails({route}){ const insets = useSafeAreaInsets(); const statusBarHeight = insets.top; - const city = route.params.city; - const weather = getCurrentWeather(city.name) - - var meteo = getCurrentWeather(city.name); + const city = route.params.weather.city; + const weather =route.params.weather; return ( - + {city.name} {city.longitude} - {city.latitude} - + - {meteo?.weatherType} + {weather?.weatherType} - {meteo?.temperature}°C - Ressenti {meteo?.temperatureFeelsLike}°C + {weather?.temperature}°C + Ressenti {weather?.temperatureFeelsLike}°C @@ -37,14 +35,14 @@ export default function CityDetails({route}){ HUMIDITY - {meteo?.humidity}% + {weather?.humidity}% WIND SPEED - {meteo?.windSpeed} km/h + {weather?.windSpeed} km/h @@ -53,14 +51,14 @@ export default function CityDetails({route}){ PRESSURE - {meteo?.pressure} hPa + {weather?.pressure} hPa VISIBILITY - {meteo?.visibility} km + {weather?.visibility} km diff --git a/iut-expo-starter/screens/CityList.tsx b/iut-expo-starter/screens/CityList.tsx index 78200a76..eff36deb 100644 --- a/iut-expo-starter/screens/CityList.tsx +++ b/iut-expo-starter/screens/CityList.tsx @@ -5,32 +5,33 @@ 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"; +import { getWeatherList } from "../redux/actions/getWeatherList"; export default function CityList({navigation}){ - const cityList = useSelector(state => state.appReducer.cityList); + const weatherList = useSelector(state => state.appReducer.weatherList); + // 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()); + const loadWeather = async () => { + await dispatch(getWeatherList()); }; - loadCity(); - console.log(cityList) + loadWeather(); }, [dispatch]); + return ( item.name} - renderItem={({item}) => navigation.navigate("CityDetails", {"city": item})}>} + renderItem={({item}) => navigation.navigate("CityDetails", {"weather": item})}>} style={leStyle.container} />