favs et utilisation du async storage

models/Card.tsx

@@ -5,9 +5,9 @@ import {Classe} from "./Classe";
 
 export class Card {
 
-    constructor(id: number,name :string, img : string, imgGold : string,fav : boolean = true){//,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
+    constructor(id: string,name :string, img : string, imgGold : string,fav : boolean = true){//,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
@@ -19,28 +19,19 @@ export class Card {
         // this._flavor = flavor
         // this._artist = artist
         // this._collectible = collectible
-        this._img = img
-        this._imgGold = imgGold
+        this.img = img
+        this.imgGold = imgGold
         // this._cropImg = cropImg
-        this._fav = fav
+        this.fav = fav
 
     }
 
     // ID //
 
-    private _id : number;
-        get id(): number {
-            return this._id
-        }
+    public id;
 
     // NAME //
-    private _name : string;
-        get name(): string {
-            return this._name;
-        }
-        set name(value: string) {
-            this._name = value;
-        }
+    public name;
 
 
     // private _set : CardSet;
@@ -132,22 +123,8 @@ export class Card {
     //     this._collectible = value;
     // }
 
-    private _img : string
-
-        get img(): string {
-            return this._img;
-        }
-        set img(value: string) {
-            this._img = value ;
-        }
-    private _imgGold : string
-
-        get imgGold(): string {
-            return this._imgGold;
-        }
-        set imgGold(value: string) {
-            this._imgGold = value ;
-        }
+    public img;
+    public imgGold;
     // private _cropImg : string
 
     // get cropImg(): string {
@@ -157,11 +134,5 @@ export class Card {
     //     this._cropImg = value;
     // }
 
-    private _fav : boolean
-        get fav(): boolean{
-            return this._fav;
-        }
-        set fav(value : boolean){
-            this._fav = value;
-        }
+    public fav;
 }

redux/actions/action_setFavs.tsx

@@ -0,0 +1,9 @@
+import { Card } from '../../models/Card';
+import {SET_FAVS} from '../constants';
+
+export const setList = (list: []) => {
+    return {
+        type: SET_FAVS,
+        payload: list
+    };
+}

redux/actions/action_setList.tsx

@@ -1,15 +0,0 @@
-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

@@ -6,3 +6,5 @@ export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA"
 
 export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD"
 
+export const SET_FAVS = "SET_FAVS"
+

redux/reducers/appReducer.tsx

@@ -1,6 +1,8 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
 import { Card } from '../../models/Card'
 import { CardProps } from '../../props/favprops'
-import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants'
+import {FETCH_DATA, ADD_FAVORITE_DATA, SET_FAVS} from '../constants'
+import StorageHeart from '../../service/AsyncStorage'
 
 const initialState = {
     cards: [],
@@ -12,26 +14,35 @@ const initialState = {
 export default appReducer = (state = initialState, action) => {
     switch (action.type) {
         case ADD_FAVORITE_DATA:
+            
             const a : CardProps  = action.payload
             if(a.route.bool ==false){
-                const t : Card[] = state.favoriteCards
-                
-                if(t.every((elem) => elem != a.route.card)){
+                if(state.favoriteCards == undefined){
+                    const tab = [a.route.card]
+                    StorageHeart.setItem("favoriteList",tab)
+                    return {...state, favoriteCards : tab};
+                }
+                if( Array.from(state.favoriteCards).every((elem) => elem != a.route.card)){
 
                     //@ts-ignore
                     const tab = state.favoriteCards.concat([a.route.card])
                     console.log(state.favoriteCards)
+                    StorageHeart.setItem("favoriteList",tab)
                     return {...state, favoriteCards : tab};
                 }
                 return {...state}
             }
             else{
                 const tab = state.favoriteCards.filter((item) => item!= a.route.card)
+                StorageHeart.setItem("favoriteList",tab)
                 return {...state, favoriteCards : tab };
             }
         case FETCH_DATA:
-        // @ts-ignore
             return {...state, cards: action.payload};
+        case SET_FAVS:
+            //@ts-ignore
+            console.log("Set_favs : ",action.payload)
+            return {...state, favoriteCards: action.payload}
         default:
             return state;
     }

screens/HomeScreen.tsx

@@ -4,11 +4,53 @@ import { useNavigation } from '@react-navigation/native';
 import { NavigationContainer } from '@react-navigation/native';
 import StackNavigation from '../navigation/StackNavigation' 
 import { Colors } from 'react-native/Libraries/NewAppScreen';
+import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import { getAllCards } from "../redux/actions/actionSelection"
+import StorageHeart from '../service/AsyncStorage';
+import { setFavList } from '../redux/actions/action_setFavList';
+import { setList } from '../redux/actions/action_setFavs';
+import { Card } from '../models/Card';
+//import { setList } from '../redux/actions/action_setList';
 
-//import Button from 'react-bootstrap/Button';
 
-// @ts-ignore //(ta gueule pour l'erreur sur navigation)
+
+
+
+
+
+// @ts-ignore //
 export default function HomeScreen({navigation}) {
+
+
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        console.log("USEEFFECT")
+        const loadFavCards = async () => {
+            //@ts-ignore
+            //await dispatch(getAllCards());
+            const list = await StorageHeart.getItem("favoriteList")
+            console.log("async favs : ",list)
+            //@ts-ignore
+            dispatch(setList(list))
+            
+        };
+        loadFavCards();
+    }, [dispatch]);
+    useEffect(() => {
+        console.log("USEEFFECT")
+        const loadCards = async () => {
+            //@ts-ignore
+            await dispatch(getAllCards());
+        };
+        loadCards();
+    }, [dispatch]);
+
+
+
+
+
     return (
         <View style={styles.container}>
             <View style={styles.centered}>

screens/ListFav.tsx

@@ -28,7 +28,7 @@ export default function ListScreen({navigation}){
 
     //@ts-ignore
     var nList : Card[] = useSelector(state => state.appReducer.favoriteCards);
-    console.log(nList)
+    console.log(" favs : ",nList)
 
     const [searchValue, setSearchValue] = useState('');
 
@@ -53,7 +53,7 @@ export default function ListScreen({navigation}){
                         }} />
                     </TouchableHighlight>
                 }
-                keyExtractor={(item: Card) => item.id.toString()}
+                keyExtractor={(item: Card) => item.id}
             />
         </View>
 

screens/ListScreen.tsx

@@ -34,14 +34,14 @@ export default function ListScreen({navigation}){
     // 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(() => {
+    //     console.log("USEEFFECT")
+    //     const loadCards = async () => {
+    //         //@ts-ignore
+    //         await dispatch(getAllCards());
+    //     };
+    //     loadCards();
+    // }, [dispatch]);
 
 
     //* Search : 

service/AsyncStorage.tsx

@@ -7,6 +7,7 @@ export default class StorageHeart {
     static async getItem(key: string): Promise<any> {
       try {
         const value = await AsyncStorage.getItem(key);
+        console.log("load")
         if (value !== null) {
           return JSON.parse(value);
         }
@@ -19,24 +20,9 @@ export default class StorageHeart {
     static async setItem(key: string, value: any): Promise<void> {
       try {
         await AsyncStorage.setItem(key, JSON.stringify(value));
+        console.log("save")
       } catch (e) {
         console.error(`AsyncStorage setItem error: ${e}`);
       }
     }
-  
-    static async removeItem(key: string): Promise<void> {
-      try {
-        await AsyncStorage.removeItem(key);
-      } catch (e) {
-        console.error(`AsyncStorage removeItem error: ${e}`);
-      }
-    }
-  
-    static async clear(): Promise<void> {
-      try {
-        await AsyncStorage.clear();
-      } catch (e) {
-        console.error(`AsyncStorage clear error: ${e}`);
-      }
-    }
 }