diff --git a/App.tsx b/App.tsx index 2cb14a7..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"; @@ -18,25 +19,31 @@ import { import { Provider } from 'react-redux'; - export default function App() { - //safearea - //mettre le navigateur ayant le princ - return ( - - - - ); - } +export default function App() { + //safearea + //mettre le navigateur ayant le princ + return ( + + + + + + ); +} + + + +///décommenter quand API Fonctionnel/// // export default function App() { // return ( // <> // {/* Bind your application store to the Provider store */} -// {/* */} +// // // // -// {/* */} +// // // ); // } diff --git a/models/Card.tsx b/models/Card.tsx index c63b13c..d85f1f0 100644 --- a/models/Card.tsx +++ b/models/Card.tsx @@ -5,23 +5,23 @@ import {Classe} from "./Classe"; 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._name=name - this._set=set - this._type=type - this._class=clas - this._rarity=rarity - this._cost=cost - this._attack = attack - this._health = health - this._desc = desc - this._flavor = flavor - this._artist = artist - this._collectible = collectible + //this._set=set + // this._type=type + // this._class=clas + // this._rarity=rarity + // this._cost=cost + // this._attack = attack + // this._health = health + // this._desc = desc + // this._flavor = flavor + // this._artist = artist + // this._collectible = collectible this._img = img this._imgGold = imgGold - this._cropImg = cropImg + // this._cropImg = cropImg } @@ -42,94 +42,94 @@ export class Card { } - private _set : CardSet; - get set(): CardSet{ - return this._set - } - - set set(value : CardSet){ - this._set = value - } - - private _type : Type; - get type():Type{ - return this._type - } - set type(value : Type){ - this._type=value - } - - private _class : Classe; - - get class():Classe{ - return this._class - } - set class(value : Classe){ - this._class=value - } - private _rarity : string - - get rarity(): string { - return this._rarity; - } - - set rarity(value: string) { - this._rarity = value ; - } - private _cost : number - - get cost(): number { - return this._cost; - } - set cost(value: number) { - this._cost = value ; - } - - private _attack : number - get attack(): number { - return this._attack; - } - set attack(value: number) { - this._attack = value ; - } - private _health : number - get health(): number { - return this._health; - } - set health(value: number) { - this._health = value ; - } - private _desc : string - get desc(): string { - return this._desc; - } - set desc(value: string) { - this._desc = value ; - } - - private _flavor : string - - get flavor(): string { - return this._flavor; - } - set flavor(value: string) { - this._flavor = value ; - } - - private _artist : string - get artist(): string { - return this._artist; - } - set artist(value: string) { - this._artist = value ; - } - private _collectible : boolean - get collectible(): boolean { - return this._collectible; - } - set collectible(value: boolean ){ - this._collectible = value; - } + // private _set : CardSet; + // get set(): CardSet{ + // return this._set + // } + + // set set(value : CardSet){ + // this._set = value + // } + + // private _type : Type; + // get type():Type{ + // return this._type + // } + // set type(value : Type){ + // this._type=value + // } + + // private _class : Classe; + + // get class():Classe{ + // return this._class + // } + // set class(value : Classe){ + // this._class=value + // } + // private _rarity : string + + // get rarity(): string { + // return this._rarity; + // } + + // set rarity(value: string) { + // this._rarity = value ; + // } + // private _cost : number + + // get cost(): number { + // return this._cost; + // } + // set cost(value: number) { + // this._cost = value ; + // } + + // private _attack : number + // get attack(): number { + // return this._attack; + // } + // set attack(value: number) { + // this._attack = value ; + // } + // private _health : number + // get health(): number { + // return this._health; + // } + // set health(value: number) { + // this._health = value ; + // } + // private _desc : string + // get desc(): string { + // return this._desc; + // } + // set desc(value: string) { + // this._desc = value ; + // } + + // private _flavor : string + + // get flavor(): string { + // return this._flavor; + // } + // set flavor(value: string) { + // this._flavor = value ; + // } + + // private _artist : string + // get artist(): string { + // return this._artist; + // } + // set artist(value: string) { + // this._artist = value ; + // } + // private _collectible : boolean + // get collectible(): boolean { + // return this._collectible; + // } + // set collectible(value: boolean ){ + // this._collectible = value; + // } private _img : string @@ -147,12 +147,12 @@ export class Card { set imgGold(value: string) { this._imgGold = value ; } - private _cropImg : string + // private _cropImg : string - get cropImg(): string { - return this._cropImg; - } - set cropImg(value: string) { - this._cropImg = value; - } + // get cropImg(): string { + // return this._cropImg; + // } + // set cropImg(value: string) { + // this._cropImg = value; + // } } \ No newline at end of file diff --git a/redux/actions/actionSelection.tsx b/redux/actions/actionSelection.tsx new file mode 100644 index 0000000..d91f603 --- /dev/null +++ b/redux/actions/actionSelection.tsx @@ -0,0 +1,85 @@ +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: { + 'content-length':'9505', + 'content-type':'application/json; charset=utf-8', + 'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"' + } + }; + const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', 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['cards']) + + + //@ts-ignore + const CardsList: Card[] = CardsListJson['cards'].map(elt => new Card(elt["id"] ? elt["id"] : 1, + elt["name"] ? elt["name"] : "", + 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 + 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 new file mode 100644 index 0000000..708b5dd --- /dev/null +++ b/redux/actions/action_setCardsList.tsx @@ -0,0 +1,11 @@ +import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants'; + +//? Changer cette importe quand la classe sera definit dans un fichier correctement. +import {Card} from '../../models/Card' + +export const setCardsList = (List: Card[]) => { + return { + type: FETCH_DATA, + payload: List, + }; +} \ No newline at end of file diff --git a/redux/actions/action_setFavList.tsx b/redux/actions/action_setFavList.tsx new file mode 100644 index 0000000..960fe9d --- /dev/null +++ b/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, + }; +} \ No newline at end of file diff --git a/redux/actions/action_setList.tsx b/redux/actions/action_setList.tsx new file mode 100644 index 0000000..e443c32 --- /dev/null +++ b/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, +// }; +// } \ No newline at end of file diff --git a/redux/constants.tsx b/redux/constants.tsx new file mode 100644 index 0000000..ff6ccf4 --- /dev/null +++ b/redux/constants.tsx @@ -0,0 +1,7 @@ + + +export const FETCH_DATA = "FETCH_DATA" + +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 new file mode 100644 index 0000000..0af429d --- /dev/null +++ b/redux/reducers/appReducer.tsx @@ -0,0 +1,24 @@ +import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants' + +const initialState = { + cards: [], + favoriteCards: [], + // 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; + } +} + diff --git a/redux/store.tsx b/redux/store.tsx new file mode 100644 index 0000000..367d0bf --- /dev/null +++ b/redux/store.tsx @@ -0,0 +1,18 @@ +import {configureStore} from '@reduxjs/toolkit' +import appReducer from './reducers/appReducer'; + +// Reference here all your application reducers +const reducer = { + appReducer: appReducer, +} + +// @ts-ignore +const store = configureStore({ + // @ts-ignore + reducer, + + // @ts-ignore + middleware: (getDefaultMiddleware) => getDefaultMiddleware({serializableCheck : false}), //desactive le check de la serialization (primitif) +},); + +export default store; \ No newline at end of file diff --git a/screens/ListFav.tsx b/screens/ListFav.tsx index 18ddd4e..61bb8fe 100644 --- a/screens/ListFav.tsx +++ b/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}) => ( + + {title} + +); + + + +//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 ( Maman, J4AI UNE LISTE DE FAVORIS ! ! @@ -13,6 +81,10 @@ export default function Main(){