🚸 ajout du redux, manque la liaison avec l'API

App.tsx

@@ -18,25 +18,29 @@ import {
 
 import { Provider } from 'react-redux';
 
-// export default function App() {
-//     //safearea
-//     //mettre le navigateur ayant le princ
-//   return (
-//     <SafeAreaProvider>
-//       <Navigation/>
-//     </SafeAreaProvider>
-//   );
-// }
-
 export default function App() {
+    //safearea
+    //mettre le navigateur ayant le princ
   return (
-    <>
+    <SafeAreaProvider>
-      {/* Bind your application store to the Provider store */}
+      <Navigation/>
-      <Provider store={store}>
+    </SafeAreaProvider>
-        <SafeAreaProvider>
-          <Navigation/>
-        </SafeAreaProvider>
-      </Provider>
-    </>
   );
 }
+
+
+
+///décommenter quand API Fonctionnel///
+
+// export default function App() {
+//   return (
+//     <>
+//       {/* Bind your application store to the Provider store */}
+//       <Provider store={store}>
+//         <SafeAreaProvider>
+//           <Navigation/>
+//         </SafeAreaProvider>
+//       </Provider>
+//     </>
+//   );
+// }

components/mainComponent.tsx

@@ -2,6 +2,7 @@ import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View, Button } from 'react-native';
 import React, { useState } from "react";
 
+// @ts-ignore
 export default function Main(props : mainProps){
     const [count, setCount] = useState(0);
     return (

redux/actions/action_setFavList.tsx

@@ -0,0 +1,8 @@
+import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants';
+
+export const setFavList = (List: String[]) => {
+    return {
+        type: ADD_FAVORITE_DATA,
+        payload: List,
+    };
+}

redux/actions/action_setList.tsx

@@ -0,0 +1,15 @@
+import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants';
+
+export const setList = (List: String[]) => {
+    return {
+        type: FETCH_DATA,
+        payload: List,
+    };
+}
+
+// export const setFavList = (List: String[]) => {
+//     return {
+//         type: ADD_FAVORITE_DATA,
+//         payload: List,
+//     };
+// }

redux/constants.tsx

@@ -0,0 +1,5 @@
+
+
+export const FETCH_DATA = "FETCH_DATA"
+
+export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA"

redux/reducers/appReducer.tsx

@@ -0,0 +1,22 @@
+import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants'
+
+const initialState = {
+    cards: ["C_ace", "C_K", "C_Q", "C_J"],
+    favoriteCards: [ "C_ace", "C_K"],
+}
+
+
+// @ts-ignore
+export default appReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case ADD_FAVORITE_DATA:
+        // @ts-ignore
+            return {...state, favoriteCards: state.favoriteCards.push(action.payload)};
+        case FETCH_DATA:
+        // @ts-ignore
+            return {...state, cards: action.payload};
+        default:
+            return state;
+    }
+}
+

redux/store.tsx

@@ -8,6 +8,7 @@ const reducer = {
 
 // @ts-ignore
 const store = configureStore({
+    // @ts-ignore
     reducer,
 },);
 

screens/ListFav.tsx

@@ -1,10 +1,78 @@
-import { StyleSheet, Text, View, Button } from 'react-native';
+import { StyleSheet, Text, View, Button, FlatList } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import React, { useState } from "react";
 
+import {setFavList } from '../redux/actions/action_setFavList';
+
+//redux
+import {useDispatch, useSelector} from 'react-redux';
+import {useEffect} from 'react';
+
+
+export const Cardslist = [
+    {
+        id: '1',
+        title: "premier élément",
+    },
+    {
+        id: '2',
+        title: "second élément",
+    },
+    {
+        id: '3',
+        title: "élément",
+    },
+    {
+        id: '4',
+        title: "barman douteux",
+    },
+    {
+        id: '10',
+        title: "dernier élément",
+    }
+];
+
+
+
+//@ts-ignore
+const Item = ({title}) => (
+    <View style={styles.item}>
+        <Text style={styles.title}>{title}</Text>
+    </View>
+);
+
+
+
+//TODO
+// export const getFavList = () => {
+//   //In order to use await your callback must be asynchronous using async keyword.
+//     return async dispatch => {
+//         //Then perform your asynchronous operations.
+//         try {
+//             //Have it first fetch data from our starwars url.
+//             //const nounoursPromise = await fetch('https://iut-weather-api.azurewebsites.net/nounours');
+//             //Then use the json method to get json data from api/
+//             //const nounoursListJson = await nounoursPromise.json();
+//             //const nounoursList: Nounours[] = nounoursListJson.map(elt => new Nounours(elt["name"], elt["age"], elt["nbPoils"], elt["image"]));
+        
+//             dispatch(setFavList(Array{id,title}));
+//         } 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))
+//         }
+//     }
+// }
+
+
+
+
+
+
 
 export default function Main(){
     const [count, setCount] = useState(0);
+    
     return (
         <View style={styles.container}>
             <Text>Maman, J4AI UNE LISTE DE FAVORIS ! !</Text>
@@ -13,6 +81,10 @@ export default function Main(){
             <Button onPress={()=> setCount(count+1)} title="+1"/>
             <Button onPress={()=> setCount(count+2)} title="+2"/>
             <Button onPress={()=> setCount(count+10)} title="+10"/>
+
+            <FlatList data={Cardslist}         
+            renderItem={({item}) => <Item title={item.title} />}
+            keyExtractor={item => item.id}/>
         </View>
     );
 }
@@ -28,4 +100,13 @@ const styles = StyleSheet.create({
         borderWidth: 5,
         borderColor : "#cacaca",
     },
+    item: {
+        borderRadius : 15,
+        backgroundColor: '#efefef',
+        padding: 20,
+        margin : 10,
+    },
+    title: {
+        fontStyle: "italic",
+    }
 });