You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.1 KiB
101 lines
3.1 KiB
import JokeItems from "../components/JokeItems";
|
|
import '../types/extension';
|
|
import {Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
|
|
import {darksalmonColor, purpleColor, whiteColor} from "../assets/Theme";
|
|
import {useDispatch, useSelector} from "react-redux";
|
|
import React, {useEffect, useState} from "react";
|
|
import {getCustomJokesList, getSampleJokesList} from "../redux/thunk/GetThunk";
|
|
|
|
export default function Catalogue() {
|
|
// @ts-ignore
|
|
const sampleJokes = useSelector(state => state.sampleReducer.jokes);
|
|
// @ts-ignore
|
|
const customJokes = useSelector(state => state.customReducer.customJokes);
|
|
const dispatch = useDispatch();
|
|
const eye = require("../assets/eye_icon.png")
|
|
const hideEye = require("../assets/eye_off_icon.png")
|
|
|
|
useEffect(() => {
|
|
const loadSamplesJokes = async () => {
|
|
// @ts-ignore
|
|
await dispatch(getSampleJokesList());
|
|
};
|
|
loadSamplesJokes();
|
|
}, [dispatch]);
|
|
|
|
const loadCustomJokes = async () => {
|
|
// @ts-ignore
|
|
await dispatch(getCustomJokesList());
|
|
};
|
|
|
|
const [showCustomJoke, setCustomJoke] = useState(false); // état local pour contrôler la visibilité de la description
|
|
const toggleDescription = () => {
|
|
setCustomJoke(!showCustomJoke);
|
|
loadCustomJokes();
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.columnContainer}>
|
|
<Text style={styles.TextButton}>Afficher les exemples</Text>
|
|
<TouchableOpacity style={styles.Button} onPress={toggleDescription}>
|
|
<View style={styles.jokeTypeContainer}>
|
|
<Image
|
|
source={showCustomJoke ? hideEye : eye}
|
|
style={styles.imageButton}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.container}>
|
|
<JokeItems jokes={showCustomJoke ? customJokes : sampleJokes}/>
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: purpleColor,
|
|
flex:1,
|
|
},
|
|
Button:{
|
|
borderRadius : 5,
|
|
backgroundColor : darksalmonColor,
|
|
height:40,
|
|
width : 60,
|
|
flexDirection : "row"
|
|
},
|
|
jokeTypeContainer :{
|
|
display : "flex",
|
|
flex : 1,
|
|
flexDirection: "row",
|
|
alignItems : "center"
|
|
},
|
|
imageButton : {
|
|
margin : 10,
|
|
width: 40,
|
|
height:30,
|
|
top : 5,
|
|
alignSelf : "center",
|
|
backgroundColor: "none",
|
|
tintColor : whiteColor,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
TextButton : {
|
|
fontSize: 18,
|
|
color: whiteColor,
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
margin: 10,
|
|
},
|
|
columnContainer: {
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
width: '90%',
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}
|
|
}); |