commit
7820822622
@ -0,0 +1,216 @@
|
||||
import {StyleSheet, Text, View, Image, Button, TouchableOpacity} from 'react-native';
|
||||
import {SampleJoke} from "../model/SampleJoke";
|
||||
import {darksalmonColor, whiteColor, greyColor, indigoColor, purpleColor} from "../assets/Theme";
|
||||
import React, {useState} from "react";
|
||||
|
||||
type JokeItemProps = {
|
||||
joke: SampleJoke;
|
||||
};
|
||||
|
||||
export default function JokeDetail(props: JokeItemProps) {
|
||||
const [showDescription, setShowDescription] = useState(false); // état local pour contrôler la visibilité de la description
|
||||
const [showFavorite, setShowFavorite] = useState(false); // état local pour contrôler la visibilité du favori
|
||||
|
||||
const toggleDescription = () => {
|
||||
setShowDescription(!showDescription);
|
||||
};
|
||||
|
||||
const toggleFavorite = () => {
|
||||
setShowFavorite(!showFavorite);
|
||||
};
|
||||
|
||||
const eye = require("../assets/eye_icon.png")
|
||||
const hideEye = require("../assets/eye_off_icon.png")
|
||||
const heart = require("../assets/favorite_icon.png")
|
||||
const heartPlain = require("../assets/plain_favorite_icon.png")
|
||||
|
||||
return(
|
||||
<View style={styles.container}>
|
||||
<Image source={{ uri: props.joke.image }} style={styles.image} />
|
||||
<View style={styles.bottomContainer}>
|
||||
<Text style={{color: indigoColor}}>{props.joke.type}</Text>
|
||||
</View>
|
||||
<Text style={styles.text}>Résumé de la blague</Text>
|
||||
<View style={styles.row}>
|
||||
<TouchableOpacity style={styles.favContainer} onPress={toggleFavorite}>
|
||||
<View>
|
||||
<Image
|
||||
source={showFavorite ? heartPlain : heart}
|
||||
style={styles.imageButton}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.Button} onPress={toggleDescription}>
|
||||
<View style={styles.chuteContainer}>
|
||||
<Image
|
||||
source={showDescription ? hideEye : eye}
|
||||
style={styles.imageButton}
|
||||
/>
|
||||
<Text style={styles.TextButton} >LA CHUTE</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{showDescription && <Text style={styles.text}>{props.joke.description()}</Text>}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
image : {
|
||||
margin : 5,
|
||||
width: '90%',
|
||||
height:200,
|
||||
top : 5,
|
||||
alignSelf : "center",
|
||||
backgroundColor: "white",
|
||||
borderRadius: 5,
|
||||
},
|
||||
Button:{
|
||||
borderRadius : 5,
|
||||
backgroundColor : darksalmonColor,
|
||||
height:50,
|
||||
width : 160,
|
||||
flexDirection : "row"
|
||||
},
|
||||
imageButton : {
|
||||
margin : 10,
|
||||
width: 50,
|
||||
height:50,
|
||||
top : 5,
|
||||
alignSelf : "center",
|
||||
backgroundColor: "none",
|
||||
tintColor : whiteColor
|
||||
},
|
||||
favContainer : {
|
||||
margin : 20,
|
||||
borderWidth : 3,
|
||||
borderRadius : 15,
|
||||
borderColor : whiteColor,
|
||||
borderStyle : "solid"
|
||||
},
|
||||
TextButton : {
|
||||
margin: 10,
|
||||
textAlign : "center",
|
||||
fontWeight: "700",
|
||||
color : whiteColor,
|
||||
},
|
||||
chuteContainer :{
|
||||
display : "flex",
|
||||
flex : 1,
|
||||
flexDirection: "row",
|
||||
alignItems : "center"
|
||||
},
|
||||
container: {
|
||||
marginHorizontal: "5%",
|
||||
display: "flex",
|
||||
marginBottom:7,
|
||||
marginTop:7,
|
||||
paddingVertical: 10,
|
||||
backgroundColor: indigoColor,
|
||||
justifyContent: 'space-between',
|
||||
borderRadius: 20,
|
||||
height: "auto",
|
||||
borderColor: whiteColor,
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1
|
||||
},
|
||||
row: {
|
||||
display: "flex",
|
||||
flexDirection:"row",
|
||||
alignSelf: "flex-end",
|
||||
},
|
||||
color: {
|
||||
flex: 0,
|
||||
backgroundColor: darksalmonColor,
|
||||
height: 150,
|
||||
width:15,
|
||||
},
|
||||
columnContainer: {
|
||||
flexDirection: "column",
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
width: '60%',
|
||||
flex: 2,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
text: {
|
||||
color:greyColor,
|
||||
paddingBottom: 7,
|
||||
paddingTop: 7,
|
||||
marginLeft: 19,
|
||||
fontSize: 16,
|
||||
},
|
||||
bottomContainer: {
|
||||
backgroundColor: whiteColor,
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 10,
|
||||
margin: 10,
|
||||
marginLeft: 19,
|
||||
marginTop: 20,
|
||||
borderRadius: 20,
|
||||
width : 120,
|
||||
alignItems : 'center'
|
||||
}
|
||||
})
|
||||
//
|
||||
// const styles = StyleSheet.create({
|
||||
// container: {
|
||||
// marginHorizontal: "5%",
|
||||
// display: "flex",
|
||||
// marginBottom:7,
|
||||
// marginTop:7,
|
||||
// paddingVertical: 10,
|
||||
// backgroundColor: indigoColor,
|
||||
// justifyContent: 'space-between',
|
||||
// borderRadius: 20,
|
||||
// height: 500,
|
||||
// borderColor: whiteColor,
|
||||
// borderStyle: "solid",
|
||||
// borderWidth: 1
|
||||
// },
|
||||
// row: {
|
||||
// display: "flex",
|
||||
// flexDirection:"row",
|
||||
// alignSelf: "flex-end",
|
||||
// },
|
||||
// color: {
|
||||
// flex: 0,
|
||||
// backgroundColor: darksalmonColor,
|
||||
// height: 150,
|
||||
// width:15,
|
||||
// },
|
||||
// image: {
|
||||
// width: '90%',
|
||||
// alignSelf: "center",
|
||||
// marginTop: 10,
|
||||
// borderRadius: 5,
|
||||
// // height: 500,
|
||||
// backgroundColor: "red",
|
||||
// flex: 1
|
||||
// },
|
||||
// columnContainer: {
|
||||
// flexDirection: "column",
|
||||
// marginLeft: 20,
|
||||
// marginRight: 20,
|
||||
// width: '60%',
|
||||
// flex: 2,
|
||||
// justifyContent: 'space-between',
|
||||
// },
|
||||
// text: {
|
||||
// color:greyColor,
|
||||
// paddingBottom: 7,
|
||||
// paddingTop: 7,
|
||||
// marginLeft: 19,
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// bottomContainer: {
|
||||
// backgroundColor: whiteColor,
|
||||
// paddingVertical: 5,
|
||||
// paddingHorizontal: 10,
|
||||
// margin: 10,
|
||||
// marginLeft: 19,
|
||||
// marginTop: 20,
|
||||
// borderRadius: 20,
|
||||
// width : 120,
|
||||
// alignItems : 'center'
|
||||
// }
|
||||
// });
|
||||
@ -1,20 +1,26 @@
|
||||
// import {createStackNavigator} from "@react-navigation/stack";
|
||||
// import Accueil from "../screens/HomeScreen";
|
||||
// import Catalogue from "../screens/Catalogue";
|
||||
// import Add from "../screens/AddScreen";
|
||||
// import Favorites from "../screens/Favorites";
|
||||
// import Settings from "../screens/Settings";
|
||||
//
|
||||
//
|
||||
// export default function StackNavigation() {
|
||||
// const Stack = createStackNavigator();
|
||||
// return (
|
||||
// <Stack.Navigator initialRouteName="Home">
|
||||
// <Stack.Screen name="Accueil" component={Accueil}/>
|
||||
// <Stack.Screen name="Catalogue" component={Catalogue}/>
|
||||
// <Stack.Screen name="Ajouter" component={Add}/>
|
||||
// <Stack.Screen name="Favoris" component={Favorites}/>
|
||||
// <Stack.Screen name="Paramètres" component={Settings}/>
|
||||
// </Stack.Navigator>
|
||||
// )
|
||||
// }
|
||||
import {createStackNavigator} from "@react-navigation/stack";
|
||||
import Catalogue from "../screens/Catalogue";
|
||||
import JokeDetailsScreen from "../screens/JokeDetailsScreen";
|
||||
import {darksalmonColor, indigoColor} from "../assets/Theme";
|
||||
|
||||
export default function StackNavigation() {
|
||||
const Stack = createStackNavigator();
|
||||
return (
|
||||
<Stack.Navigator initialRouteName="catalogue" screenOptions={{
|
||||
headerStyle: {
|
||||
backgroundColor: indigoColor,
|
||||
},
|
||||
headerTitleStyle: {
|
||||
marginTop: 10,
|
||||
color:darksalmonColor,
|
||||
fontSize:24,
|
||||
textAlign: "center",
|
||||
paddingBottom:30,
|
||||
},
|
||||
headerTitleAlign: 'center'
|
||||
}}>
|
||||
<Stack.Screen name="catalogue" component={Catalogue} />
|
||||
<Stack.Screen name="JokeDetails" component={JokeDetailsScreen}/>
|
||||
</Stack.Navigator>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
import '../types/extension';
|
||||
import {StyleSheet, View} from "react-native";
|
||||
import {purpleColor} from "../assets/Theme";
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import React, {useEffect} from "react";
|
||||
import { getJokeById } from "../redux/thunk/RecentsJokesThunk";
|
||||
import JokeDetail from "../components/JokeDetail";
|
||||
|
||||
export default function JokeDetailsScreen({route}) {
|
||||
const idJokeDetail = route.params.idJoke;
|
||||
// @ts-ignore
|
||||
const joke = useSelector(state => state.appReducer.joke);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
const loadJoke = async () => {
|
||||
// @ts-ignore
|
||||
await dispatch(getJokeById(idJokeDetail));
|
||||
};
|
||||
loadJoke();
|
||||
}, [dispatch]);
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<JokeDetail joke={joke}/>
|
||||
</View>
|
||||
)
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: purpleColor,
|
||||
flex:1,
|
||||
}
|
||||
});
|
||||
Loading…
Reference in new issue