Merge pull request 'DevPF' (#4) from DevPF into master

Reviewed-on: #4

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() {
+export default function App() {
     //safearea
     //mettre le navigateur ayant le princ
   return (
+    <Provider store={store}>
       <SafeAreaProvider>
         <Navigation/>
       </SafeAreaProvider>
+    </Provider>
   );
- }
+}
+
+
+
+///décommenter quand API Fonctionnel///
 
 // export default function App() {
 //   return (
 //     <>
 //       {/* Bind your application store to the Provider store */}
-//       {/* <Provider store={store}> */}
+//       <Provider store={store}>
 //         <SafeAreaProvider>
 //           <Navigation/>
 //         </SafeAreaProvider>
-//       {/* </Provider> */}
+//       </Provider>
 //     </>
 //   );
 // }

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._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._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
 
@@ -147,12 +147,12 @@ export class Card {
         set imgGold(value: string) {
             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;
-    }
+    // }
 }

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

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,
+    };
+}

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,
+    };
+}

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,
+//     };
+// }

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"

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;
+    }
+}
+

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;

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}) => (
+    <View style={styles.item}>
+        <Text style={styles.title}>{title}</Text>
+    </View>
+);
+
+
+
+//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 (
         <View style={styles.container}>
             <Text>Maman, J4AI UNE LISTE DE FAVORIS ! !</Text>
@@ -13,6 +81,10 @@ export default function Main(){
             <Button onPress={()=> setCount(count+1)} title="+1"/>
             <Button onPress={()=> setCount(count+2)} title="+2"/>
             <Button onPress={()=> setCount(count+10)} title="+10"/>
+
+            <FlatList data={Cardslist}         
+            renderItem={({item}) => <Item title={item.title} />}
+            keyExtractor={item => item.id}/>
         </View>
     );
 }
@@ -26,4 +98,13 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    item: {
+        borderRadius : 15,
+        backgroundColor: '#efefef',
+        padding: 20,
+        margin : 10,
+    },
+    title: {
+        fontStyle: "italic",
+    }
 });

screens/ListScreen.tsx

@@ -1,42 +1,92 @@
 
-import { StyleSheet, Text, View, Button, ImageComponent } from 'react-native';
+import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FlatList } from 'react-native-gesture-handler';
+import {useDispatch, useSelector} from 'react-redux';
+
+import { ThunkAction } from 'redux-thunk';
+
+
+//? possiblement à supprimer
+import { getAllCards } from "../redux/actions/actionSelection"
+
 import { StubLib } from '../data/stub';
 import { Card } from '../models/Card';
 import { Image } from 'react-native';
 import { ImageURISource } from 'react-native';
 
 //@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>
 );
 
-export default function Main() {
+//@ts-ignore
+export default function ListScreen({navigation}){
     const [count, setCount] = useState(0);
-    const {getCards} = new StubLib();
-    const list: Card[] = getCards();
-    const req =  fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
 
 
+
+    //  // Initialize the binding content with the application initial state
+
+    //@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 (
         <View style={styles.container}>
+            {/* <FlatList data={nList}         
+            renderItem={({item}) => <Item title={item.name} />}
+            keyExtractor={item => item.id}/> */}
+
             <FlatList 
-                numColumns = {2}  
+                numColumns={2}
-                data={list}       
+                data={nList} 
-                renderItem={({item}) => (
+                renderItem={({item}) =>
-                    <View>
+                    
-                        <Image
+                    //<TouchableHighlight onPress={() => navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant
-                            source={{ uri: item.img }}
+                    <TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
-                        style={{flex: 1, minHeight: 250,minWidth: 180}}
+                        <Item url={item.img}/>
-                    />
+                    </TouchableHighlight>
-                </View>
+                    
-                )}
+                    // //<Text>{item.name}</Text>
-                keyExtractor={item => item.id}
+                    // // <View>
-            />
+                    // //     <Image 
+                    // //     source={{uri:item.img}}
+                    // //     style={{flex:1, minHeight:250, minWidth:180}}/>
+
+                    // // </View>
+                } keyExtractor={(item: Card) => item.id.toString()}/>
         </View>