From 6da31b6cbc56ac972e6b66658e95df941e64d69c Mon Sep 17 00:00:00 2001 From: tonyfages Date: Thu, 28 Mar 2024 20:04:15 +0100 Subject: [PATCH] tp8 --- JokesApp/components/DetailJoke.tsx | 9 ++ JokesApp/navigation/Navigation.tsx | 9 +- JokesApp/redux/store.ts | 44 +++++++++ JokesApp/screens/ListFavoriteJokeScreen.tsx | 98 +++++++++++++++++++++ 4 files changed, 154 insertions(+), 6 deletions(-) create mode 100644 JokesApp/screens/ListFavoriteJokeScreen.tsx diff --git a/JokesApp/components/DetailJoke.tsx b/JokesApp/components/DetailJoke.tsx index 8a4ac17..a6fb0e3 100644 --- a/JokesApp/components/DetailJoke.tsx +++ b/JokesApp/components/DetailJoke.tsx @@ -4,6 +4,7 @@ import React, {useState} from "react"; import {SampleJoke} from "../model/SampleJoke"; import {Joke} from "../model/Joke"; import {CustomJoke} from "../model/CustomJoke"; +import {storeFavoriteJoke} from "../redux/store"; type DetailJokeProps = { item: CustomJoke; @@ -17,6 +18,14 @@ export function DetailJoke(props: DetailJokeProps) { function toggleActivation() { setIsActivated(!isActivated); + if (isActivated) { + console.log("Joke retirée des favoris"); + //removeFavoriteJoke(); + } + else { + console.log("Joke ajoutée aux favoris"); + storeFavoriteJoke(props.item) + } } diff --git a/JokesApp/navigation/Navigation.tsx b/JokesApp/navigation/Navigation.tsx index 831a0b7..85df55f 100644 --- a/JokesApp/navigation/Navigation.tsx +++ b/JokesApp/navigation/Navigation.tsx @@ -15,6 +15,7 @@ const addIcon = require("../assets/add_icon.png"); const favIcon = require("../assets/favorite_icon.png"); const setIcon = require("../assets/settings_icon.png"); import store, {getTheme, storeTheme} from "../redux/store"; +import {ListFavoriteJokeScreen} from "../screens/ListFavoriteJokeScreen"; export function Navigation(){ @@ -22,7 +23,7 @@ export function Navigation(){ const BottomTabNavigator = createBottomTabNavigator(); - const [themes, setThemes] = useState(null); + const [themes, setThemes] = useState(DefaultTheme); useEffect(() => { const fetchTheme = async () => { @@ -36,10 +37,6 @@ export function Navigation(){ if (themes == null) { return null; } - - console.log("ici le theme", themes); - - return ( - ( { console.log(e); } } + +export const storeFavoriteJoke =async (joke) => { + try { + const jsonValue = await AsyncStorage.getItem('@favorite') + let favoriteJokes = jsonValue != null ? JSON.parse(jsonValue) as CustomJoke[] : []; + favoriteJokes.push(joke); + const updatedJsonValue = JSON.stringify(favoriteJokes); + await AsyncStorage.setItem('@favorite', updatedJsonValue); + const length = favoriteJokes.length; + console.log( "Leght" + length); + console.log("favorite stored"); + } + catch (e) { + console.log(e); + } +} + +export const getFavorite = async () => { + try { + const jsonValue = await AsyncStorage.getItem('@favorite') + return jsonValue != null ? JSON.parse(jsonValue) as CustomJoke[] : null; + } catch(e) { + console.log(e); + } +} + +export const removeFavoriteJoke = async (joke) => { + try { + const jsonValue = await AsyncStorage.getItem('@favorite') + let favoriteJokes = jsonValue != null ? JSON.parse(jsonValue) as CustomJoke[] : []; + const index = favoriteJokes.indexOf(joke); + if (index > -1) { + favoriteJokes.splice(index, 1); + } + const updatedJsonValue = JSON.stringify(favoriteJokes); + await AsyncStorage.setItem('@favorite', updatedJsonValue); + console.log("favorite removed"); + } + catch (e) { + console.log(e); + } +} + export default store; diff --git a/JokesApp/screens/ListFavoriteJokeScreen.tsx b/JokesApp/screens/ListFavoriteJokeScreen.tsx new file mode 100644 index 0000000..1465c91 --- /dev/null +++ b/JokesApp/screens/ListFavoriteJokeScreen.tsx @@ -0,0 +1,98 @@ +import {useTheme} from "@react-navigation/native"; +import {darksalmonColor, indigo, whiteColor} from "../Theme"; +import React, {useEffect, useState} from "react"; +import {getFavorite} from "../redux/store"; +import {FlatList, SafeAreaView, StyleSheet, TouchableHighlight} from "react-native"; +import {JokeListItems} from "../components/ListeJokeComponent"; +import {CustomJoke} from "../model/CustomJoke"; + +export function ListFavoriteJokeScreen({route, navigation}) { + const [favoriteJokes, setFavoriteJokes] = useState([]); + + useEffect(() => { + const fetchFav = async () => { + const jokes = await getFavorite(); + if (jokes) { + setFavoriteJokes(jokes); + } else { + // Gérer le cas où aucun favori n'est retourné + setFavoriteJokes([]); + } + } + fetchFav(); + }, []); + + const styles = themeSettings(); + console.log("Ceci est ma taille"+favoriteJokes.length); + + return ( + + ( + navigation.navigate("JokeDetail", {"joke" : item.id})}> + + + )} + keyExtractor={(item: CustomJoke) => item.id} + /> + + ); +} +export function themeSettings() { + const {colors} = useTheme(); + const styles = StyleSheet.create({ + title: { + fontSize: 24, + color: colors.text, + textAlign: 'center', + fontWeight: 'bold', + marginVertical: 20, + }, + titleResume: { + fontSize: 15, + fontWeight: 'bold', + marginBottom: 20, + }, + container: { + flex: 1, + backgroundColor: colors.background, + + }, + top: { + backgroundColor : indigo, + }, + header: { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + margin: 9, + }, + headerText: { + fontSize: 18, + color: whiteColor, + textAlign: 'center', + fontWeight: 'bold', + }, + img2: { + tintColor: whiteColor, + justifyContent: "center", + alignItems: "center", + }, + button2:{ + flexDirection: "row", + justifyContent: "center", + marginRight: 10, + borderRadius: 10, + alignItems: "center", + height: 30, + width: 70, + + borderColor: darksalmonColor, + borderWidth: 1, + backgroundColor: darksalmonColor, + }, + }); + + return styles; +} \ No newline at end of file