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 {createStackNavigator} from "@react-navigation/stack";
|
||||||
// import Accueil from "../screens/HomeScreen";
|
import Catalogue from "../screens/Catalogue";
|
||||||
// import Catalogue from "../screens/Catalogue";
|
import JokeDetailsScreen from "../screens/JokeDetailsScreen";
|
||||||
// import Add from "../screens/AddScreen";
|
import {darksalmonColor, indigoColor} from "../assets/Theme";
|
||||||
// import Favorites from "../screens/Favorites";
|
|
||||||
// import Settings from "../screens/Settings";
|
export default function StackNavigation() {
|
||||||
//
|
const Stack = createStackNavigator();
|
||||||
//
|
return (
|
||||||
// export default function StackNavigation() {
|
<Stack.Navigator initialRouteName="catalogue" screenOptions={{
|
||||||
// const Stack = createStackNavigator();
|
headerStyle: {
|
||||||
// return (
|
backgroundColor: indigoColor,
|
||||||
// <Stack.Navigator initialRouteName="Home">
|
},
|
||||||
// <Stack.Screen name="Accueil" component={Accueil}/>
|
headerTitleStyle: {
|
||||||
// <Stack.Screen name="Catalogue" component={Catalogue}/>
|
marginTop: 10,
|
||||||
// <Stack.Screen name="Ajouter" component={Add}/>
|
color:darksalmonColor,
|
||||||
// <Stack.Screen name="Favoris" component={Favorites}/>
|
fontSize:24,
|
||||||
// <Stack.Screen name="Paramètres" component={Settings}/>
|
textAlign: "center",
|
||||||
// </Stack.Navigator>
|
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