Adding asynStorage methods

models/Card.tsx

@@ -5,7 +5,7 @@ import {Classe} from "./Classe";
 
 export class Card {
 
-    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) {
+    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
         //this._set=set
@@ -22,6 +22,7 @@ export class Card {
         this._img = img
         this._imgGold = imgGold
         // this._cropImg = cropImg
+        this._fav = fav
 
     }
 
@@ -155,4 +156,12 @@ export class Card {
     // set cropImg(value: string) {
     //     this._cropImg = value;
     // }
+
+    private _fav : boolean
+        get fav(): boolean{
+            return this._fav;
+        }
+        set fav(value : boolean){
+            this._fav = value;
+        }
 }

screens/ListScreen.tsx

@@ -1,5 +1,5 @@
 
-import { StyleSheet, Text, View, Button, TouchableHighlight, TextInput } from 'react-native';
+import { StyleSheet, Text, View, Button, TouchableHighlight, TextInput, ImageBackground } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from "react";
 import { FlatList } from 'react-native-gesture-handler';
@@ -20,16 +20,16 @@ import { ImageURISource } from 'react-native';
 
 
 //@ts-ignore
-const Item = ({url}) => { // a mettre dans components et definir une props pour passer le param
+const Item = ({url,item}) => { // a mettre dans components et definir une props pour passer le param
     
     const HandleAddFav = () => {
-        console.log('addfavorite');
+        item.fav = !item.fav
     }
     return(
 
         <View style={styles.item}>
         <ImageBackground  source={{uri:url}} style={{flex:1, minHeight:250, minWidth:180}}>
-             <TouchableHighlight style={styles.favoriteButton} onPress={HandleAddFav}>
+             <TouchableHighlight style={item.fav?styles.favoriteButtonFav:styles.favoriteButtonNonFav} onPress={HandleAddFav}>
                 <FontAwesome name="heart-o" size={50} color="#fff" />
             </TouchableHighlight>
         </ImageBackground>
@@ -45,7 +45,6 @@ export default function ListScreen({navigation}){
 
 
     //  // 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
@@ -65,9 +64,7 @@ export default function ListScreen({navigation}){
 
 
 
-    //* 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
@@ -93,7 +90,7 @@ export default function ListScreen({navigation}){
                 data={filteredList} 
                 renderItem={({item}) =>
                     <TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
-                        <Item url={item.img}/>
+                        <Item url={item.img} item={item}/>
                     </TouchableHighlight>
                 } 
                 keyExtractor={(item: Card) => item.id.toString()}
@@ -127,11 +124,19 @@ const styles = StyleSheet.create({
     item: {
         
     },
-    favoriteButton: {
+    favoriteButtonNonFav: {
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        backgroundColor: 'red',
+        borderRadius: 50,
+        padding: 10,
+    },
+    favoriteButtonFav: {
         position: 'absolute',
         top: 10,
         right: 10,
-        backgroundColor: 'transparent',
+        backgroundColor: 'red',
         borderRadius: 50,
         padding: 10,
     },

service/AsyncStorage.tsx

@@ -2,17 +2,41 @@ import { Card } from "../models/Card";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 
-export class AsyncStorageCard{
+export default class Storage {
 
-    static AddCardStorage(name : string, cards : Card[]){
-        const storeFavoriteNounours = async (cards : Card[]) => {
-            try {
-                const jsonCard = JSON.stringify(cards)
-                await AsyncStorage.setItem(name, jsonCard);
-            } catch (e) {
-                console.log("An error occurred", e);
-            }
+    static async getItem(key: string): Promise<any> {
+      try {
+        const value = await AsyncStorage.getItem(key);
+        if (value !== null) {
+          return JSON.parse(value);
         }
+      } catch (e) {
+        console.error(`AsyncStorage getItem error: ${e}`);
+      }
+      return null;
     }
   
+    static async setItem(key: string, value: any): Promise<void> {
+      try {
+        await AsyncStorage.setItem(key, JSON.stringify(value));
+      } 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}`);
+      }
+    }
 }