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

💥 finissions du redux, lien avec l'api officielle, les items de la list sont cliquable et renvoie pour l'instant a listFav 👽

Browse Source
pull/4/head
Pierre Ferreira 2 years ago
parent feb86d0dbd
commit aa5cb23f4e
4 changed files with 155 additions and 126 deletions
Show Stats Download Patch File Download Diff File

216
models/Card.tsx
Unescape View File

@ -5,23 +5,23 @@ import {Classe} from "./Classe";
export class Card { export class Card {
constructor(id: number,name :string,set : CardSet,type : Type,clas : Classe,rarity : string,cost : number,attack : number, health : number, desc : string,flavor : string,artist : string,collectible : boolean,elite : boolean,race : string, img : string, imgGold : string, cropImg :string) { constructor(id: number,name :string, img : string, imgGold : string){//,set : CardSet,type : Type,clas : Classe,rarity : string,cost : number,attack : number, health : number, desc : string,flavor : string,artist : string,collectible : boolean,elite : boolean,race : string, cropImg :string) {
this._id=id this._id=id
this._name=name this._name=name
this._set=set //this._set=set
this._type=type // this._type=type
this._class=clas // this._class=clas
this._rarity=rarity // this._rarity=rarity
this._cost=cost // this._cost=cost
this._attack = attack // this._attack = attack
this._health = health // this._health = health
this._desc = desc // this._desc = desc
this._flavor = flavor // this._flavor = flavor
this._artist = artist // this._artist = artist
this._collectible = collectible // this._collectible = collectible
this._img = img this._img = img
this._imgGold = imgGold this._imgGold = imgGold
this._cropImg = cropImg // this._cropImg = cropImg
} }
@ -42,94 +42,94 @@ export class Card {
} }
private _set : CardSet; // private _set : CardSet;
get set(): CardSet{ // get set(): CardSet{
return this._set // return this._set
} // }
set set(value : CardSet){ // set set(value : CardSet){
this._set = value // this._set = value
} // }
private _type : Type; // private _type : Type;
get type():Type{ // get type():Type{
return this._type // return this._type
} // }
set type(value : Type){ // set type(value : Type){
this._type=value // this._type=value
} // }
private _class : Classe; // private _class : Classe;
get class():Classe{ // get class():Classe{
return this._class // return this._class
} // }
set class(value : Classe){ // set class(value : Classe){
this._class=value // this._class=value
} // }
private _rarity : string // private _rarity : string
get rarity(): string { // get rarity(): string {
return this._rarity; // return this._rarity;
} // }
set rarity(value: string) { // set rarity(value: string) {
this._rarity = value ; // this._rarity = value ;
} // }
private _cost : number // private _cost : number
get cost(): number { // get cost(): number {
return this._cost; // return this._cost;
} // }
set cost(value: number) { // set cost(value: number) {
this._cost = value ; // this._cost = value ;
} // }
private _attack : number // private _attack : number
get attack(): number { // get attack(): number {
return this._attack; // return this._attack;
} // }
set attack(value: number) { // set attack(value: number) {
this._attack = value ; // this._attack = value ;
} // }
private _health : number // private _health : number
get health(): number { // get health(): number {
return this._health; // return this._health;
} // }
set health(value: number) { // set health(value: number) {
this._health = value ; // this._health = value ;
} // }
private _desc : string // private _desc : string
get desc(): string { // get desc(): string {
return this._desc; // return this._desc;
} // }
set desc(value: string) { // set desc(value: string) {
this._desc = value ; // this._desc = value ;
} // }
private _flavor : string // private _flavor : string
get flavor(): string { // get flavor(): string {
return this._flavor; // return this._flavor;
} // }
set flavor(value: string) { // set flavor(value: string) {
this._flavor = value ; // this._flavor = value ;
} // }
private _artist : string // private _artist : string
get artist(): string { // get artist(): string {
return this._artist; // return this._artist;
} // }
set artist(value: string) { // set artist(value: string) {
this._artist = value ; // this._artist = value ;
} // }
private _collectible : boolean // private _collectible : boolean
get collectible(): boolean { // get collectible(): boolean {
return this._collectible; // return this._collectible;
} // }
set collectible(value: boolean ){ // set collectible(value: boolean ){
this._collectible = value; // this._collectible = value;
} // }
private _img : string private _img : string
@ -147,12 +147,12 @@ export class Card {
set imgGold(value: string) { set imgGold(value: string) {
this._imgGold = value ; this._imgGold = value ;
} }
private _cropImg : string // private _cropImg : string
get cropImg(): string { // get cropImg(): string {
return this._cropImg; // return this._cropImg;
} // }
set cropImg(value: string) { // set cropImg(value: string) {
this._cropImg = value; // this._cropImg = value;
} // }
} }

28
redux/actions/actionSelection.tsx
Unescape View File

@ -47,22 +47,32 @@ export const getAllCards = () => {
const options = { const options = {
method: 'GET', method: 'GET',
headers: { headers: {
'X-RapidAPI-Key': '7f2463868fmsh25504614975f2f4p1328d1jsne514834ad08c', 'content-length':'9505',
'X-RapidAPI-Host': 'omgvamp-hearthstone-v1.p.rapidapi.com' 'content-type':'application/json; charset=utf-8',
'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"'
} }
}; };
const CardsPromise = await fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards', options); const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
console.log("FETCH") //console.log("FETCH")
console.log(CardsPromise) //console.log(CardsPromise)
//Then use the json method to get json data from api/ //Then use the json method to get json data from api/
const CardsListJson = await CardsPromise.json(); const CardsListJson = await CardsPromise.json();
console.log(CardsListJson)
//console.log(CardsListJson['cards'])
//@ts-ignore //@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"])); const CardsList: Card[] = CardsListJson['cards'].map(elt => new Card(elt["id"] ? elt["id"] : 1,
console.log("TOTO") elt["name"] ? elt["name"] : "",
console.log(CardsList) elt["image"] ? elt["image"] : "",
elt["imageGold"] ? elt["imageGold"] : "",
)); //, 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"]
//elt["cardId"] == null ? elt["cardId"] : ""
//console.log("TOTO")
//console.log(CardsList)
//call the action //call the action
dispatch(setCardsList(CardsList)); dispatch(setCardsList(CardsList));

3
redux/store.tsx
Unescape View File

@ -10,6 +10,9 @@ const reducer = {
const store = configureStore({ const store = configureStore({
// @ts-ignore // @ts-ignore
reducer, reducer,
// @ts-ignore
middleware: (getDefaultMiddleware) => getDefaultMiddleware({serializableCheck : false}), //desactive le check de la serialization (primitif)
},); },);
export default store; export default store;

34
screens/ListScreen.tsx
Unescape View File

@ -17,9 +17,15 @@ import { Image } from 'react-native';
import { ImageURISource } from 'react-native'; import { ImageURISource } from 'react-native';
//@ts-ignore //@ts-ignore
const Item = ({title}) => ( const Item = ({url}) => (
<View style={styles.item}> // <View style={styles.item}>
<Text style={styles.title}>{title}</Text> // <Text style={styles.title}>{title}</Text>
// </View>
<View>
<Image
source={{uri:url}}
style={{flex:1, minHeight:250, minWidth:180}}/>
</View> </View>
); );
@ -63,14 +69,24 @@ export default function ListScreen({navigation}){
renderItem={({item}) => <Item title={item.name} />} renderItem={({item}) => <Item title={item.name} />}
keyExtractor={item => item.id}/> */} keyExtractor={item => item.id}/> */}
<FlatList data={nList} renderItem={({item}) => <FlatList
numColumns={2}
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("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant
// <TouchableHighlight onPress={() => navigation.navigate("HomeScreen")}> <TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
// <Item title={item.name}/> <Item url={item.img}/>
// </TouchableHighlight> </TouchableHighlight>
<Text>{item.name}</Text>
} keyExtractor={(item: Card) => item.name}/> // //<Text>{item.name}</Text>
// // <View>
// // <Image
// // source={{uri:item.img}}
// // style={{flex:1, minHeight:250, minWidth:180}}/>
// // </View>
} keyExtractor={(item: Card) => item.id.toString()}/>
</View> </View>

Write Preview
Loading…
Cancel
Save