corentin.richard
/
TP_ReactNative
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

avancé redux + ajout provider 🐛

Browse Source
pull/4/head
Pierre Ferreira 2 years ago
parent 0a37b6c59a
commit 3efb125b8d
7 changed files with 122 additions and 97 deletions
Show Stats Download Patch File Download Diff File

9
App.tsx
Unescape View File

@ -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>
<Navigation/>
</SafeAreaProvider>
<Provider store={store}>
<SafeAreaProvider>
<Navigation/>
</SafeAreaProvider>
</Provider>
);
}

75
redux/actions/actionSelection.tsx
Unescape View File

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

2
redux/actions/action_setCardsList.tsx
Unescape View File

@ -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 {

62
redux/actions/getAllCards.tsx
Unescape View File

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

2
redux/constants.tsx
Unescape View File

@ -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"

6
redux/reducers/appReducer.tsx
Unescape View File

@ -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"],
}

53
screens/ListScreen.tsx
Unescape View File

@ -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);
// // 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
// // 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]);
// 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={list}
{/* <FlatList data={nList}
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")}>
<Item title={item.name}/>
</TouchableHighlight>
} keyExtractor={(item: Card) => item.name}/> */}
// <TouchableHighlight onPress={() => navigation.navigate("HomeScreen")}>
// <Item title={item.name}/>
// </TouchableHighlight>
<Text>{item.name}</Text>
} keyExtractor={(item: Card) => item.name}/>
</View>

Write Preview
Loading…
Cancel
Save