diff --git a/components/ListItemComponent.tsx b/components/ListItemComponent.tsx index e9b4d7d..037b2cc 100644 --- a/components/ListItemComponent.tsx +++ b/components/ListItemComponent.tsx @@ -1,17 +1,53 @@ -import { View } from 'react-native'; -import { Image } from 'react-native'; +import { useDispatch } from "react-redux"; +import { Card } from "../models/Card"; +import { setFavList } from "../redux/actions/action_setFavList"; +import { ImageBackground, TouchableHighlight, View } from "react-native"; +import React, { useEffect } from "react"; +import {CardProps} from "../props/favprops" +import { FontAwesome } from '@expo/vector-icons'; +import { StyleSheet} from 'react-native'; +export default function Item(props: CardProps){ // a mettre dans components et definir une props pour passer le param + + const {route} = props; + const item: Card = route.card; + const bool: boolean = route.bool; + const dispatch = useDispatch() -type ItemProps = { - url : string //Image URL -} + const HandleAddFav = (props : CardProps) => { + console.log("add new card") + dispatch(setFavList(props)); + } + return( -export function ListItemComponent(props : ItemProps){ - return ( - - - - ) + /* dispatch , */ + + + HandleAddFav(props)} > + + + + + + ); } +const styles = StyleSheet.create({ +item: { + + }, + favoriteButtonNonFav: { + position: 'absolute', + top: 10, + right: 10, + backgroundColor: 'red', + borderRadius: 50, + padding: 10, + }, + favoriteButtonFav: { + position: 'absolute', + top: 10, + right: 10, + backgroundColor: 'red', + borderRadius: 50, + padding: 10, + },}); \ No newline at end of file diff --git a/props/favprops.tsx b/props/favprops.tsx new file mode 100644 index 0000000..2662592 --- /dev/null +++ b/props/favprops.tsx @@ -0,0 +1,8 @@ +import { Card } from "../models/Card"; + +export interface CardProps{ + route : { + card: Card; + bool: boolean; + } +} \ No newline at end of file diff --git a/redux/actions/actionSelection.tsx b/redux/actions/actionSelection.tsx index 533a5d9..3b2cf3f 100644 --- a/redux/actions/actionSelection.tsx +++ b/redux/actions/actionSelection.tsx @@ -25,7 +25,7 @@ import { Card } from "../../models/Card"; // constructor(cardId : String, name : String, manaCost : number, attack : number, health : number, desc : String){ // this.cardId = cardId; // this.name = name; -// this.manaCost = manaCost; +// this.manaCost = manaCost;ADD_FAVORITE_DATA, FETCH_DATA, // this.attack = attack; // this.health = health; // this.desc = desc; @@ -50,7 +50,7 @@ export const getAllCards = () => { // 'content-length':'9505', // 'content-type':'application/json; charset=utf-8', // 'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"' - // } + // }ADD_FAVORITE_DATA, FETCH_DATA, //! Actualisation de l'API (16/03) : headers: { @@ -61,7 +61,7 @@ export const getAllCards = () => { //'pageSize':'100' }; //! Actualisation de l'API (16/03) : - const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EU1AbKy9Q7sOUjQYC5AFF1O1JPuoAgCNxk', options); + const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EUe6p4N9uLm8BbsHyYVZXIa4DDBP2hMR05', options); //const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options); //console.log("FETCH") //console.log(CardsPromise) diff --git a/redux/actions/action_setFavList.tsx b/redux/actions/action_setFavList.tsx index 960fe9d..8707ffa 100644 --- a/redux/actions/action_setFavList.tsx +++ b/redux/actions/action_setFavList.tsx @@ -1,8 +1,10 @@ +import { Card } from '../../models/Card'; +import { CardProps } from '../../props/favprops'; import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants'; -export const setFavList = (List: String[]) => { +export const setFavList = (props : CardProps) => { return { type: ADD_FAVORITE_DATA, - payload: List, + payload: props, }; } \ No newline at end of file diff --git a/redux/constants.tsx b/redux/constants.tsx index ff6ccf4..ec2bb60 100644 --- a/redux/constants.tsx +++ b/redux/constants.tsx @@ -4,4 +4,5 @@ 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 +export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD" + diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 0af429d..82cac37 100644 --- a/redux/reducers/appReducer.tsx +++ b/redux/reducers/appReducer.tsx @@ -1,10 +1,9 @@ +import { CardProps } from '../../props/favprops' 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"], + favoriteCards: [] } @@ -12,8 +11,17 @@ const initialState = { export default appReducer = (state = initialState, action) => { switch (action.type) { case ADD_FAVORITE_DATA: - // @ts-ignore - return {...state, favoriteCards: state.favoriteCards.push(action.payload)}; + const a : CardProps = action.payload + if(a.route.bool ==false){ + //@ts-ignore + const tab = state.favoriteCards.concat([a.route.card]) + console.log(state.favoriteCards) + return {...state, favoriteCards : tab}; + } + else{ + const tab = state.favoriteCards.filter((item) => item!= a.route.card) + return {...state, favoriteCards : tab }; + } case FETCH_DATA: // @ts-ignore return {...state, cards: action.payload}; diff --git a/screens/ListFav.tsx b/screens/ListFav.tsx index 61bb8fe..9ff355c 100644 --- a/screens/ListFav.tsx +++ b/screens/ListFav.tsx @@ -1,91 +1,64 @@ -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 { 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'; import {useDispatch, useSelector} from 'react-redux'; -import {useEffect} from 'react'; +import { FontAwesome } from '@expo/vector-icons'; +import { ThunkAction } from 'redux-thunk'; -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", - } -]; - +//? possiblement à supprimer +import { getAllCards } from "../redux/actions/actionSelection" +import { Card } from '../models/Card'; +import { Image } from 'react-native'; +import { ImageURISource } from 'react-native'; +import Item from '../components/ListItemComponent'; +//* Icons +// import { BiSearchAlt } from 'react-icons'; -//@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)) -// } -// } -// } +//* Components +//@ts-ignore +export default function ListScreen({navigation}){ + //@ts-ignore + let nList = useSelector(state => state.appReducer.favoriteCards); + console.log(nList) + const [searchValue, setSearchValue] = useState(''); -export default function Main(){ - const [count, setCount] = useState(0); - return ( - Maman, J4AI UNE LISTE DE FAVORIS ! ! - - {count} -