corentin.richard
/
TP_ReactNative
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

favorite update

Browse Source
pull/5/head
Corentin RICHARD 2 years ago
parent 731c69ccc6
commit 88a6612e77
9 changed files with 144 additions and 170 deletions
Show Stats Download Patch File Download Diff File

60
components/ListItemComponent.tsx
Unescape View File

@ -1,17 +1,53 @@
import { View } from 'react-native'; import { useDispatch } from "react-redux";
import { Image } from 'react-native'; 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
type ItemProps = { const {route} = props;
url : string //Image URL const item: Card = route.card;
} const bool: boolean = route.bool;
const dispatch = useDispatch()
const HandleAddFav = (props : CardProps) => {
console.log("add new card")
dispatch(setFavList(props));
}
return(
/* dispatch , */
<View style={styles.item}>
<ImageBackground source={{uri:item.img}} style={{flex:1, minHeight:250, minWidth:180}}>
<TouchableHighlight style={item.fav?styles.favoriteButtonFav:styles.favoriteButtonNonFav} onPress={() => HandleAddFav(props)} >
<FontAwesome name="heart-o" size={50} color="#fff" />
</TouchableHighlight>
</ImageBackground>
export function ListItemComponent(props : ItemProps){
return (
<View>
<Image
source={{uri: props.url}}
style={{flex:1, minHeight:250, minWidth:180}}/>
</View> </View>
) );
} }
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,
},});

8
props/favprops.tsx
Unescape View File

@ -0,0 +1,8 @@
import { Card } from "../models/Card";
export interface CardProps{
route : {
card: Card;
bool: boolean;
}
}

6
redux/actions/actionSelection.tsx
Unescape View File

@ -25,7 +25,7 @@ import { Card } from "../../models/Card";
// constructor(cardId : String, name : String, manaCost : number, attack : number, health : number, desc : String){ // constructor(cardId : String, name : String, manaCost : number, attack : number, health : number, desc : String){
// this.cardId = cardId; // this.cardId = cardId;
// this.name = name; // this.name = name;
// this.manaCost = manaCost; // this.manaCost = manaCost;ADD_FAVORITE_DATA, FETCH_DATA,
// this.attack = attack; // this.attack = attack;
// this.health = health; // this.health = health;
// this.desc = desc; // this.desc = desc;
@ -50,7 +50,7 @@ export const getAllCards = () => {
// 'content-length':'9505', // 'content-length':'9505',
// 'content-type':'application/json; charset=utf-8', // 'content-type':'application/json; charset=utf-8',
// 'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"' // 'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"'
// } // }ADD_FAVORITE_DATA, FETCH_DATA,
//! Actualisation de l'API (16/03) : //! Actualisation de l'API (16/03) :
headers: { headers: {
@ -61,7 +61,7 @@ export const getAllCards = () => {
//'pageSize':'100' //'pageSize':'100'
}; };
//! Actualisation de l'API (16/03) : //! 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); //const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
//console.log("FETCH") //console.log("FETCH")
//console.log(CardsPromise) //console.log(CardsPromise)

6
redux/actions/action_setFavList.tsx
Unescape View File

@ -1,8 +1,10 @@
import { Card } from '../../models/Card';
import { CardProps } from '../../props/favprops';
import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants'; import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants';
export const setFavList = (List: String[]) => { export const setFavList = (props : CardProps) => {
return { return {
type: ADD_FAVORITE_DATA, type: ADD_FAVORITE_DATA,
payload: List, payload: props,
}; };
} }

1
redux/constants.tsx
Unescape View File

@ -5,3 +5,4 @@ export const FETCH_DATA = "FETCH_DATA"
export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA" export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA"
export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD" export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD"

18
redux/reducers/appReducer.tsx
Unescape View File

@ -1,10 +1,9 @@
import { CardProps } from '../../props/favprops'
import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants' import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants'
const initialState = { const initialState = {
cards: [], cards: [],
favoriteCards: [], favoriteCards: []
// cards: ["C_ace", "C_K", "C_Q", "C_J"],
// favoriteCards: [ "C_ace", "C_K"],
} }
@ -12,8 +11,17 @@ const initialState = {
export default appReducer = (state = initialState, action) => { export default appReducer = (state = initialState, action) => {
switch (action.type) { switch (action.type) {
case ADD_FAVORITE_DATA: case ADD_FAVORITE_DATA:
// @ts-ignore const a : CardProps = action.payload
return {...state, favoriteCards: state.favoriteCards.push(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: case FETCH_DATA:
// @ts-ignore // @ts-ignore
return {...state, cards: action.payload}; return {...state, cards: action.payload};

136
screens/ListFav.tsx
Unescape View File

@ -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 {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';
//@ts-ignore //* Icons
const Item = ({title}) => ( // import { BiSearchAlt } from 'react-icons';
<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))
// }
// }
// }
//* Components
//@ts-ignore
export default function ListScreen({navigation}){
//@ts-ignore
let nList = useSelector(state => state.appReducer.favoriteCards);
console.log(nList)
export default function Main(){ const [searchValue, setSearchValue] = useState('');
const [count, setCount] = useState(0);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text>Maman, J4AI UNE LISTE DE FAVORIS ! !</Text>
<StatusBar style="auto" /> <TextInput
<Text>{count}</Text> style={styles.textInput}
<Button onPress={()=> setCount(count+1)} title="+1"/> value={searchValue}
<Button onPress={()=> setCount(count+2)} title="+2"/> onChangeText={text => setSearchValue(text)}
<Button onPress={()=> setCount(count+10)} title="+10"/> placeholder="Rechercher une carte..."
/>
<FlatList data={Cardslist}
renderItem={({item}) => <Item title={item.title} />} <FlatList
keyExtractor={item => item.id}/> numColumns={2}
data={nList}
renderItem={({item}) =>
<TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
<Item route={{
card: item,
bool: true
}} />
<Text>"a"</Text>
</TouchableHighlight>
}
keyExtractor={(item: Card) => item.id.toString()}
/>
</View> </View>
); );
} }
@ -94,17 +67,18 @@ export default function Main(){
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#fff', backgroundColor: '#ac9585',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'space-evenly',
}, },
item: { textInput: {
padding: 15,
margin: 5,
width:200,
backgroundColor: '#ffffff',
borderRadius : 15, borderRadius : 15,
backgroundColor: '#efefef', shadowColor: 'grey',
padding: 20, textAlign:'center'
margin : 10,
},
title: {
fontStyle: "italic",
} }
}); });

73
screens/ListScreen.tsx
Unescape View File

@ -1,5 +1,5 @@
import { StyleSheet, Text, View, Button, TouchableHighlight, TextInput, ImageBackground } from 'react-native'; import { StyleSheet, Text, View, Button, TouchableHighlight, TextInput, ImageBackground, LogBox } from 'react-native';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
@ -18,37 +18,16 @@ import { ImageURISource } from 'react-native';
// import { BiSearchAlt } from 'react-icons'; // import { BiSearchAlt } from 'react-icons';
//* Components //* Components
import {ListItemComponent} from '../components/ListItemComponent' import { setFavList } from '../redux/actions/action_setFavList';
import Item from '../components/ListItemComponent';
//@ts-ignore
const Item = ({url,item}) => { // a mettre dans components et definir une props pour passer le param
const HandleAddFav = () => {
item.fav = !item.fav
}
return(
<View style={styles.item}>
<ImageBackground source={{uri:url}} style={{flex:1, minHeight:250, minWidth:180}}>
<TouchableHighlight style={item.fav?styles.favoriteButtonFav:styles.favoriteButtonNonFav} onPress={HandleAddFav}>
<FontAwesome name="heart-o" size={50} color="#fff" />
</TouchableHighlight>
</ImageBackground>
</View>
);
}
//@ts-ignore //@ts-ignore
export default function ListScreen({navigation}){ export default function ListScreen({navigation}){
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
// // Initialize the binding content with the application initial state // // Initialize the binding content with the application initial state
//@ts-ignore //@ts-ignore
const nList = useSelector(state => state.appReducer.cards); var nList = useSelector(state => state.appReducer.cards);
// Create a const that will hold the react-redux events dispatcher // Create a const that will hold the react-redux events dispatcher
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -65,12 +44,6 @@ export default function ListScreen({navigation}){
}, [dispatch]); }, [dispatch]);
// const req = fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
//https://us.api.blizzard.com/hearthstone/cards/678?locale=en_US
//* Search : //* Search :
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');
@ -92,7 +65,10 @@ export default function ListScreen({navigation}){
data={filteredList} data={filteredList}
renderItem={({item}) => renderItem={({item}) =>
<TouchableHighlight onPress={() => navigation.navigate("ListFav")}> <TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
<Item url={item.img} item={item}/> <Item route={{
card: item,
bool: false
}} ></Item>
</TouchableHighlight> </TouchableHighlight>
} }
keyExtractor={(item: Card) => item.id.toString()} keyExtractor={(item: Card) => item.id.toString()}
@ -113,38 +89,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-evenly', justifyContent: 'space-evenly',
}, },
border: {
flex: 1,
backgroundColor: '#ff0000',
maxHeight : 100,
borderWidth : 15,
borderRadius : 15,
borderColor : '#00ffaa',
alignItems: 'center',
justifyContent: 'center',
},
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,
},
title: {
fontStyle: "italic",
},
textInput: { textInput: {
padding: 15, padding: 15,
margin: 5, margin: 5,
@ -155,3 +99,4 @@ const styles = StyleSheet.create({
textAlign:'center' textAlign:'center'
} }
}); });

2
service/AsyncStorage.tsx
Unescape View File

@ -2,7 +2,7 @@ import { Card } from "../models/Card";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
export default class Storage { export default class StorageHeart {
static async getItem(key: string): Promise<any> { static async getItem(key: string): Promise<any> {
try { try {

Write Preview
Loading…
Cancel
Save