Redux avec api

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,

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 (
       <View style={styles.container}>
         <View style={{flex: 1, flexDirection: "row"}}>
           <View style={styles.bothtext}>
-            <Text style={styles.title}>{props.city.name}</Text>
-            <Text>{props.city.latitude} - {props.city.longitude}</Text>
+            <Text style={styles.title}>{props.weather.city.name}</Text>
+            <Text>{props.weather.city.latitude} - {props.weather.city.longitude}</Text>
           </View>
-            <Text style={styles.temperature}>{weather?.temperature}</Text>
+            <Text style={styles.temperature}>{props.weather.temperature}</Text>
         <TouchableHighlight /*onPress={() => FAVORITE_CITY_DATA = this.city}*/>
-              <Image source={props.city.longitude===FAVORITE_CITY_DATA.longitude && props.city.latitude===FAVORITE_CITY_DATA.latitude ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/>
+              <Image source={props.weather.city.longitude===FAVORITE_CITY_DATA.longitude && props.weather.city.latitude===FAVORITE_CITY_DATA.latitude ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/>
         </TouchableHighlight>
         </View>
       </View>

iut-expo-starter/redux/actions/getCityList.ts

@@ -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))
-    }
-  }
-}

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))
+    }
+  }
+}

iut-expo-starter/redux/actions/setCityList.ts

@@ -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,
-  };
-}

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,
+    };
+  }

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"
 

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;
     }

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 (
-        <View style={{alignItems: "center", backgroundColor: "darksalmon"}}>
+        <View style={{alignItems: "center", backgroundColor: "darksalmon", height: "100%"}}>
             <TopBar/>
             <Text style={styles.name}>{city.name}</Text>
             <View style={styles.place}>
                 <Text style={styles.petitText}>{city.longitude} - {city.latitude}</Text>
             </View>
             <TouchableHighlight>
-              <Image style={styles.image} source={ meteo?.weatherType=="Nuageux" ? require('../assets/Nuageux.png') : require('../assets/Nuageux.png')}/>
+              <Image style={styles.image} source={ weather?.weatherType=="Nuageux" ? require('../assets/Nuageux.png') : require('../assets/Nuageux.png')}/>
             </TouchableHighlight>
-            <Text style={styles.weatherType}>{meteo?.weatherType}</Text>
+            <Text style={styles.weatherType}>{weather?.weatherType}</Text>
             <View style={styles.supertruc}>
                 <Image style={styles.petitImage} source={require('../assets/temperature.png')}/>
                 <View style={styles.supertrucencore}>
-                    <Text style={styles.temperature}>{meteo?.temperature}°C</Text>
-                    <Text style={styles.petitTemp}>Ressenti {meteo?.temperatureFeelsLike}°C</Text>
+                    <Text style={styles.temperature}>{weather?.temperature}°C</Text>
+                    <Text style={styles.petitTemp}>Ressenti {weather?.temperatureFeelsLike}°C</Text>
                 </View>
             </View>
             <View style={styles.boxes}>
@@ -37,14 +35,14 @@ export default function CityDetails({route}){
                     <Image style={styles.imageHumidity} source={require('../assets/humidity.png')}/>
                     <Text style={styles.text}>HUMIDITY</Text>
                 </View>
-                <Text style={styles.humidityText}>{meteo?.humidity}%</Text>
+                <Text style={styles.humidityText}>{weather?.humidity}%</Text>
                 </View>
                 <View style={styles.rightBox}>
                     <View style={styles.imageEtTexte}>
                         <Image style={styles.imageHumidity} source={require('../assets/wind.png')}/>
                         <Text style={styles.text}>WIND SPEED</Text>
                     </View>
-                    <Text style={styles.humidityText}>{meteo?.windSpeed} km/h</Text>
+                    <Text style={styles.humidityText}>{weather?.windSpeed} km/h</Text>
                 </View>
             </View>
             <View style={styles.boxes}>
@@ -53,14 +51,14 @@ export default function CityDetails({route}){
                     <Image style={styles.imageHumidity} source={require('../assets/pressure.png')}/>
                     <Text style={styles.text}>PRESSURE</Text>
                 </View>
-                <Text style={styles.humidityText}>{meteo?.pressure} hPa</Text>
+                <Text style={styles.humidityText}>{weather?.pressure} hPa</Text>
                 </View>
                 <View style={styles.rightBox}>
                     <View style={styles.imageEtTexte}>
                         <Image style={styles.imageHumidity} source={require('../assets/visibility.png')}/>
                         <Text style={styles.text}>VISIBILITY</Text>
                     </View>
-                    <Text style={styles.humidityText}>{meteo?.visibility} km</Text>
+                    <Text style={styles.humidityText}>{weather?.visibility} km</Text>
                 </View>
             </View>
         </View>

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 (
         <View style={{flex: 1, width: "100%", alignItems: "center"}}>
             <TopBar/>
             <FlatList
-            data={cityList}
+            data={weatherList}
             keyExtractor={item =>item.name}
-            renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("CityDetails", {"city": item})}><VilleCompopo city={item} fav={FAVORITE_CITY_DATA}/></TouchableHighlight>}
+            renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("CityDetails", {"weather": item})}><VilleCompopo weather={item} fav={FAVORITE_CITY_DATA}/></TouchableHighlight>}
             style={leStyle.container} 
             />
         </View>