commit
0036ac877b
@ -0,0 +1,148 @@
|
|||||||
|
import {Button, Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
|
||||||
|
import {darksalmonColor, greyColor, indigo, purpleColor, whiteColor} from "../Theme";
|
||||||
|
import React, {useState} from "react";
|
||||||
|
import {SampleJoke} from "../model/SampleJoke";
|
||||||
|
import {Joke} from "../model/Joke";
|
||||||
|
|
||||||
|
type DetailJokeProps = {
|
||||||
|
item: SampleJoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function DetailJoke(props: DetailJokeProps) {
|
||||||
|
|
||||||
|
const [isActivated, setIsActivated] = useState(false);
|
||||||
|
const [isActivated2, setIsActivated2] = useState(false);
|
||||||
|
|
||||||
|
function toggleActivation() {
|
||||||
|
setIsActivated(!isActivated);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function toggleActivation2() {
|
||||||
|
setIsActivated2(!isActivated2);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.listItem}>
|
||||||
|
<Image style={styles.imageSettings} source={{
|
||||||
|
uri: props.item.image}}/>
|
||||||
|
<View style={styles.chip}>
|
||||||
|
<Text >Type : {props.item.type}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.contentList}>
|
||||||
|
<Text style={styles.contentSummary}>{props.item.description}</Text>
|
||||||
|
</View >
|
||||||
|
<View style={styles.buttons}>
|
||||||
|
<TouchableOpacity style={styles.button1} onPress={toggleActivation}>
|
||||||
|
<Image source={isActivated ? require('../assets/plain_favorite_icon.png') : require('../assets/favorite_icon.png')} style={styles.img1} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.button2} onPress={toggleActivation2}>
|
||||||
|
<Image source={isActivated2 ? require('../assets/eye_icon.png') : require('../assets/eye_off_icon.png')} style={styles.img2} />
|
||||||
|
<Text style={styles.bt2text}>LA CHUTE</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
{isActivated2 ? <Text style={styles.contentSummary}>{props.item.punchline}</Text> : null}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
|
||||||
|
titleResume: {
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: 20,
|
||||||
|
color: whiteColor,
|
||||||
|
},
|
||||||
|
listItem: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
margin: 10,
|
||||||
|
height : '80%',
|
||||||
|
borderRadius: 20,
|
||||||
|
borderColor: whiteColor,
|
||||||
|
backgroundColor : indigo,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
imageSettings: {
|
||||||
|
flex: 1,
|
||||||
|
width: '85%',
|
||||||
|
height: 100,
|
||||||
|
margin :30,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
contentList :{
|
||||||
|
margin: 10,
|
||||||
|
},
|
||||||
|
chip: {
|
||||||
|
borderRadius: 16,
|
||||||
|
backgroundColor: whiteColor,
|
||||||
|
padding: 5,
|
||||||
|
margin: 5,
|
||||||
|
marginLeft: 30,
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
},
|
||||||
|
contentSummary: {
|
||||||
|
color: greyColor,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 16,
|
||||||
|
textAlign: 'left',
|
||||||
|
margin: 10,
|
||||||
|
marginLeft: 20,
|
||||||
|
|
||||||
|
},
|
||||||
|
buttons:
|
||||||
|
{
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
alignItems: "flex-end",
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
button1:{
|
||||||
|
marginRight: 20,
|
||||||
|
borderRadius: 10,
|
||||||
|
width: 100,
|
||||||
|
height: 50,
|
||||||
|
alignItems: "center",
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
button2:{
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "center",
|
||||||
|
marginRight: 30,
|
||||||
|
borderRadius: 10,
|
||||||
|
width: 140,
|
||||||
|
height: 50,
|
||||||
|
alignItems: "center",
|
||||||
|
borderColor: whiteColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
backgroundColor: darksalmonColor,
|
||||||
|
},
|
||||||
|
|
||||||
|
img1:{
|
||||||
|
justifyContent: "center",
|
||||||
|
tintColor: darksalmonColor,
|
||||||
|
alignItems: "center",
|
||||||
|
marginTop: 2,
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
img2: {
|
||||||
|
tintColor: whiteColor,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
alignSelf: "center",
|
||||||
|
marginRight: 10,
|
||||||
|
},
|
||||||
|
bt2text: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: whiteColor,
|
||||||
|
textAlign: 'center',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import {createStackNavigator} from "@react-navigation/stack";
|
||||||
|
import {NavigationContainer} from "@react-navigation/native";
|
||||||
|
import {AccueilScreen} from "../screens/AccueilScreen";
|
||||||
|
import {JokeListItems} from "../components/ListeJokeComponent";
|
||||||
|
import {DetailJoke} from "../components/DetailJoke";
|
||||||
|
import JokeDetailScreen from "../screens/JokeDetailScreen";
|
||||||
|
import {ListJokeScreen} from "../screens/ListJokeScreen";
|
||||||
|
import {darksalmonColor, indigo, purpleColor} from "../Theme";
|
||||||
|
|
||||||
|
export default function StackNavigation() {
|
||||||
|
|
||||||
|
const Stack = createStackNavigator();
|
||||||
|
return(
|
||||||
|
<Stack.Navigator initialRouteName="CatalogueStack" screenOptions={
|
||||||
|
{
|
||||||
|
headerTitleStyle: {
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: darksalmonColor,
|
||||||
|
|
||||||
|
},
|
||||||
|
headerStyle: {
|
||||||
|
backgroundColor: indigo,
|
||||||
|
|
||||||
|
},
|
||||||
|
headerTitle : "Catalogue",
|
||||||
|
headerBackTitleVisible: false,
|
||||||
|
headerTintColor: darksalmonColor,
|
||||||
|
}
|
||||||
|
|
||||||
|
}>
|
||||||
|
<Stack.Screen name="CatalogueStack" component={ListJokeScreen} options={{ headerTitle: 'Catalogue' }}/>
|
||||||
|
<Stack.Screen name="JokeDetail" component={JokeDetailScreen} options={{ headerTitle: 'Detail d une blague' }
|
||||||
|
} />
|
||||||
|
</Stack.Navigator>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import {View, Text, StyleSheet} from "react-native";
|
||||||
|
import {indigo, purpleColor, whiteColor} from "../Theme";
|
||||||
|
import React, {useEffect} from "react";
|
||||||
|
import {CustomJoke} from "../model/CustomJoke";
|
||||||
|
import {DetailJoke} from "../components/DetailJoke";
|
||||||
|
import {Joke} from "../model/Joke";
|
||||||
|
import {useDispatch, useSelector} from "react-redux";
|
||||||
|
import {getCompletJokes, setCompletJokes, setSample} from "../redux/actions/sampleAction";
|
||||||
|
import {validatePathConfig} from "@react-navigation/native";
|
||||||
|
//svjh
|
||||||
|
export default function JokeDetailScreen({route}) {
|
||||||
|
const jokeId = route.params.joke;
|
||||||
|
console.log(jokeId);
|
||||||
|
const DataGen = useSelector((state: any) => state.sampleReducer.completJoke);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
useEffect(() => {
|
||||||
|
const getDetails = async () => {
|
||||||
|
// @ts-ignore
|
||||||
|
await dispatch(getCompletJokes(jokeId))
|
||||||
|
};
|
||||||
|
getDetails();
|
||||||
|
}, [dispatch]);
|
||||||
|
console.log(DataGen);
|
||||||
|
return (
|
||||||
|
<View style={styles.font}>
|
||||||
|
<DetailJoke item={DataGen}/>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
font: {
|
||||||
|
backgroundColor: purpleColor,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontSize: 24,
|
||||||
|
color: 'darksalmon',
|
||||||
|
textAlign: 'center',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginVertical: 20,
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in new issue