From 0e763163c8186a3fc3fdb1d28f04b0f9e314e29b Mon Sep 17 00:00:00 2001 From: "Corentin \"Koroh\" RICHARD" Date: Fri, 7 Apr 2023 14:56:00 +0200 Subject: [PATCH] favs et utilisation du async storage --- models/Card.tsx | 51 +++++++------------------------- redux/actions/action_setFavs.tsx | 9 ++++++ redux/actions/action_setList.tsx | 15 ---------- redux/constants.tsx | 2 ++ redux/reducers/appReducer.tsx | 21 +++++++++---- screens/HomeScreen.tsx | 46 ++++++++++++++++++++++++++-- screens/ListFav.tsx | 4 +-- screens/ListScreen.tsx | 16 +++++----- service/AsyncStorage.tsx | 18 ++--------- 9 files changed, 94 insertions(+), 88 deletions(-) create mode 100644 redux/actions/action_setFavs.tsx delete mode 100644 redux/actions/action_setList.tsx diff --git a/models/Card.tsx b/models/Card.tsx index 655bd73..64ee37a 100644 --- a/models/Card.tsx +++ b/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; } \ No newline at end of file diff --git a/redux/actions/action_setFavs.tsx b/redux/actions/action_setFavs.tsx new file mode 100644 index 0000000..6dac0df --- /dev/null +++ b/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 + }; +} diff --git a/redux/actions/action_setList.tsx b/redux/actions/action_setList.tsx deleted file mode 100644 index e443c32..0000000 --- a/redux/actions/action_setList.tsx +++ /dev/null @@ -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, -// }; -// } \ No newline at end of file diff --git a/redux/constants.tsx b/redux/constants.tsx index ec2bb60..3bf354d 100644 --- a/redux/constants.tsx +++ b/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" + diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 3d06d78..06f3da2 100644 --- a/redux/reducers/appReducer.tsx +++ b/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; } diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index a0e2deb..ede4152 100644 --- a/screens/HomeScreen.tsx +++ b/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 ( diff --git a/screens/ListFav.tsx b/screens/ListFav.tsx index dfeefd1..1f96496 100644 --- a/screens/ListFav.tsx +++ b/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}){ }} /> } - keyExtractor={(item: Card) => item.id.toString()} + keyExtractor={(item: Card) => item.id} /> diff --git a/screens/ListScreen.tsx b/screens/ListScreen.tsx index 39314fa..863029a 100644 --- a/screens/ListScreen.tsx +++ b/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 : diff --git a/service/AsyncStorage.tsx b/service/AsyncStorage.tsx index d72751c..65a16e3 100644 --- a/service/AsyncStorage.tsx +++ b/service/AsyncStorage.tsx @@ -7,6 +7,7 @@ export default class StorageHeart { static async getItem(key: string): Promise { 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 { 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 { - try { - await AsyncStorage.removeItem(key); - } catch (e) { - console.error(`AsyncStorage removeItem error: ${e}`); - } - } - - static async clear(): Promise { - try { - await AsyncStorage.clear(); - } catch (e) { - console.error(`AsyncStorage clear error: ${e}`); - } - } }