getCityList marche

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 = () => {
+export const getCityList = () => {
-  return {
+  return async dispatch => {
-    type: GET_CITIES,
+
-  };
+    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/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;
     }

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 (
         <View style={{flex: 1, width: "100%", alignItems: "center"}}>

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 (
         <View style={{alignItems: "center"}}>