From 3efb125b8d0cee6be1f3245441d599df27154b89 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 8 Mar 2023 10:20:46 +0100 Subject: [PATCH] =?UTF-8?q?avanc=C3=A9=20redux=20+=20ajout=20provider=20:b?= =?UTF-8?q?ug:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.tsx | 9 ++-- redux/actions/actionSelection.tsx | 75 +++++++++++++++++++++++++++ redux/actions/action_setCardsList.tsx | 2 +- redux/actions/getAllCards.tsx | 62 ---------------------- redux/constants.tsx | 4 +- redux/reducers/appReducer.tsx | 6 ++- screens/ListScreen.tsx | 61 ++++++++++++---------- 7 files changed, 122 insertions(+), 97 deletions(-) create mode 100644 redux/actions/actionSelection.tsx delete mode 100644 redux/actions/getAllCards.tsx diff --git a/App.tsx b/App.tsx index 2fb9515..6898f32 100644 --- a/App.tsx +++ b/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 ( - - - + + + + + ); } diff --git a/redux/actions/actionSelection.tsx b/redux/actions/actionSelection.tsx new file mode 100644 index 0000000..2d049e5 --- /dev/null +++ b/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)) + } + } +} \ No newline at end of file diff --git a/redux/actions/action_setCardsList.tsx b/redux/actions/action_setCardsList.tsx index 1dd8200..708b5dd 100644 --- a/redux/actions/action_setCardsList.tsx +++ b/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 { diff --git a/redux/actions/getAllCards.tsx b/redux/actions/getAllCards.tsx deleted file mode 100644 index 0a977e5..0000000 --- a/redux/actions/getAllCards.tsx +++ /dev/null @@ -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)) - } - } -} \ No newline at end of file diff --git a/redux/constants.tsx b/redux/constants.tsx index ef14783..ff6ccf4 100644 --- a/redux/constants.tsx +++ b/redux/constants.tsx @@ -2,4 +2,6 @@ export const FETCH_DATA = "FETCH_DATA" -export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA" \ No newline at end of file +export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA" + +export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD" \ No newline at end of file diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 9da1fae..0af429d 100644 --- a/redux/reducers/appReducer.tsx +++ b/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"], - favoriteCards: [ "C_ace", "C_K"], + cards: [], + favoriteCards: [], + // cards: ["C_ace", "C_K", "C_Q", "C_J"], + // favoriteCards: [ "C_ace", "C_K"], } diff --git a/screens/ListScreen.tsx b/screens/ListScreen.tsx index c4018b7..e5a3dc9 100644 --- a/screens/ListScreen.tsx +++ b/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 - - // const nList = useSelector(state => state.cards); - // // 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 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') + //@ts-ignore + const nList = useSelector(state => state.appReducer.cards); + // 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(() => { + console.log("USEEFFECT") + const loadCards = async () => { + //@ts-ignore + await dispatch(getAllCards()); + }; + loadCards(); + }, [dispatch]); + + + + //* 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 ( - {} - } - keyExtractor={item => item.id}/> + keyExtractor={item => item.id}/> */} - {/* + // navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant - navigation.navigate("HomeScreen")}> - - - } keyExtractor={(item: Card) => item.name}/> */} + // navigation.navigate("HomeScreen")}> + // + // + {item.name} + } keyExtractor={(item: Card) => item.name}/>