avancé redux + ajout provider 🐛

App.tsx

@@ -7,6 +7,7 @@ import StackNavigation from './navigation/StackNavigation';
 
 import { createStackNavigator } from '@react-navigation/stack';
 
+import store from './redux/store';
 // Import your application store
 //import store from "./redux/store";
 
@@ -22,9 +23,11 @@ export default function App() {
     //safearea
     //mettre le navigateur ayant le princ
   return (
-    <SafeAreaProvider>
+    <Provider store={store}>
-      <Navigation/>
+      <SafeAreaProvider>
-    </SafeAreaProvider>
+        <Navigation/>
+      </SafeAreaProvider>
+    </Provider>
   );
 }
 

redux/actions/actionSelection.tsx

@@ -0,0 +1,75 @@
+import { setCardsList } from "./action_setCardsList";
+
+import { Card } from "../../models/Card";
+
+//! se fichier devra possiblement changer de dossier !!!
+
+//! classe pour tester
+// export class Card {
+//   cardId : String
+//   name : String
+//   manaCost : number
+//   attack : number
+//   health : number
+//   desc : String
+
+//   // constructor() {
+//   //   this.cardId = "cardId";
+//   //   this.name = "name";
+//   //   this.manaCost = 0;
+//   //   this.attack = 0;
+//   //   this.health = 0;
+//   //   this.desc = "desc";
+//   // }
+
+//   constructor(cardId : String, name : String, manaCost : number, attack : number, health : number, desc : String){
+//     this.cardId = cardId;
+//     this.name = name;
+//     this.manaCost = manaCost;
+//     this.attack = attack;
+//     this.health = health;
+//     this.desc = desc;
+//   }
+
+
+// }
+
+
+//Define your action creators that will be responsible for asynchronous operations
+export const getAllCards = () => {
+  //In order to use await your callback must be asynchronous using async keyword.
+  console.log("getallcard")
+  //@ts-ignore
+  return async dispatch => {  
+    //Then perform your asynchronous operations.
+    try {
+      //Have it first fetch data from our starwars url.
+      const options = {
+        method: 'GET',
+        headers: {
+          'X-RapidAPI-Key': '7f2463868fmsh25504614975f2f4p1328d1jsne514834ad08c',
+          'X-RapidAPI-Host': 'omgvamp-hearthstone-v1.p.rapidapi.com'
+        }
+      };
+      const CardsPromise = await fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards', options);
+      console.log("FETCH")
+      console.log(CardsPromise)
+
+      //Then use the json method to get json data from api/
+      const CardsListJson = await CardsPromise.json();
+      console.log(CardsListJson)
+
+      //@ts-ignore
+      const CardsList: Card[] = CardsListJson.map(elt => new Card(elt["cardId"], elt["name"], elt["cardSet"], elt["type"], elt["faction"], elt["rarity"], elt["cost"], elt["attack"], elt["health"],elt["text"], elt["flavor"], elt["artist"], elt["collectible"], elt["elite"], elt["race"], elt["img"], elt["imgGold"]));
+      console.log("TOTO")
+      console.log(CardsList)
+      //call the action 
+      dispatch(setCardsList(CardsList));
+      
+    } 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))
+    }
+  }
+}

redux/actions/action_setCardsList.tsx

@@ -1,7 +1,7 @@
 import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants';
 
 //? Changer cette importe quand la classe sera definit dans un fichier correctement.
-import {Card} from './getAllCards'
+import {Card} from '../../models/Card'
 
 export const setCardsList = (List: Card[]) => {
     return {

redux/actions/getAllCards.tsx

@@ -1,62 +0,0 @@
-import { setCardsList } from "./action_setCardsList";
-
-//! se fichier devra possiblement changer de dossier !!!
-
-//! classe pour tester
-export class Card {
-  cardId : String
-  name : String
-  manaCost : number
-  attack : number
-  health : number
-  desc : String
-
-  // constructor() {
-  //   this.cardId = "cardId";
-  //   this.name = "name";
-  //   this.manaCost = 0;
-  //   this.attack = 0;
-  //   this.health = 0;
-  //   this.desc = "desc";
-  // }
-
-  constructor(cardId : String, name : String, manaCost : number, attack : number, health : number, desc : String){
-    this.cardId = cardId;
-    this.name = name;
-    this.manaCost = manaCost;
-    this.attack = attack;
-    this.health = health;
-    this.desc = desc;
-  }
-
-
-}
-
-
-//Define your action creators that will be responsible for asynchronous operations
-export const getAllCards = () => {
-  //In order to use await your callback must be asynchronous using async keyword.
-
-  //@ts-ignore
-  return async dispatch => {
-    //Then perform your asynchronous operations.
-    try {
-      //Have it first fetch data from our starwars url.
-      const CardsPromise = await fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards');
-      
-      //Then use the json method to get json data from api/
-      const CardsListJson = await CardsPromise.json();
-      
-      //@ts-ignore
-      const CardsList: Card[] = CardsListJson.map(elt => new Card(elt["cardId"], elt["name"], elt["manaCost"], elt["attack"], elt["health"],elt["desc"]));
-      
-      //call the action 
-      dispatch(setCardsList(CardsList));
-      
-    } 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))
-    }
-  }
-}

redux/constants.tsx

@@ -3,3 +3,5 @@
 export const FETCH_DATA = "FETCH_DATA"
 
 export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA"
+
+export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD"

redux/reducers/appReducer.tsx

@@ -1,8 +1,10 @@
 import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants'
 
 const initialState = {
-    cards: ["C_ace", "C_K", "C_Q", "C_J"],
+    cards: [],
-    favoriteCards: [ "C_ace", "C_K"],
+    favoriteCards: [],
+    // cards: ["C_ace", "C_K", "C_Q", "C_J"],
+    // favoriteCards: [ "C_ace", "C_K"],
 }
 
 

screens/ListScreen.tsx

@@ -9,7 +9,7 @@ import { ThunkAction } from 'redux-thunk';
 
 
 //? possiblement à supprimer
-import { Card, getAllCards } from "../redux/actions/getAllCards"
+import { getAllCards } from "../redux/actions/actionSelection"
 
 import { StubLib } from '../data/stub';
 import { Card } from '../models/Card';
@@ -29,41 +29,46 @@ export default function ListScreen({navigation}){
 
     //  // Initialize the binding content with the application initial state
 
-    // //@ts-ignore
+    //@ts-ignore
+    const nList = useSelector(state => state.appReducer.cards);
+    // Create a const that will hold the react-redux events dispatcher
+    const dispatch = useDispatch();
     
-    // const nList = useSelector(state => state.cards);
+    // Let's define a hook that will be used to update the rendered state after the return will be called
-    // // Create a const that will hold the react-redux events dispatcher
+    // You cannot perform side-effects outside of a useEffect hook
-    // const dispatch = useDispatch();
 
-    // // Let's define a hook that will be used to update the rendered state after the return will be called
+    useEffect(() => {
-    // // You cannot perform side-effects outside of a useEffect hook
+        console.log("USEEFFECT")
+        const loadCards = async () => {
+            //@ts-ignore
+            await dispatch(getAllCards());
+        };
+        loadCards();
+    }, [dispatch]);
 
-    // useEffect(() => {
-    //     const loadCards = async () => {
-    //         await dispatch(getAllCards());
-    //     };
-    //     loadCards();
-    // }, [dispatch]);
 
-    const {getCards} = new StubLib();
-    const list: Card[] = getCards();
-    const req =  fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
 
+    //* Stub
+    // const {getCards} = new StubLib();
+    // const list: Card[] = getCards();
+    // const req =  fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
+
+    //https://us.api.blizzard.com/hearthstone/cards/678?locale=en_US
 
     return (
         <View style={styles.container}>
-            <Text>{}</Text>
+            {/* <FlatList data={nList}         
-            <FlatList data={list}         
             renderItem={({item}) => <Item title={item.name} />}
-            keyExtractor={item => item.id}/>
+            keyExtractor={item => item.id}/> */}
 
-            {/* <FlatList data={nList} renderItem={({item}) =>
+            <FlatList data={nList} renderItem={({item}) =>
                     
                     //<TouchableHighlight onPress={() => navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant
-                    <TouchableHighlight onPress={() => navigation.navigate("HomeScreen")}>
+                    // <TouchableHighlight onPress={() => navigation.navigate("HomeScreen")}>
-                        <Item title={item.name}/>
+                    //     <Item title={item.name}/>
-                    </TouchableHighlight>
+                    // </TouchableHighlight>
-                } keyExtractor={(item: Card) => item.name}/> */}
+                    <Text>{item.name}</Text>
+                } keyExtractor={(item: Card) => item.name}/>
         </View>