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