tp8

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)
+        }
     }
 
 

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<Theme | null>(null);
+    const [themes, setThemes] = useState<Theme>(DefaultTheme);
 
     useEffect(() => {
         const fetchTheme = async () => {
@@ -36,10 +37,6 @@ export function Navigation(){
     if (themes == null) {
         return null;
     }
-
-    console.log("ici le theme", themes);
-
-
     return (
         <NavigationContainer  theme={ themes.dark === false ? DefaultTheme :  DarkTheme} >
             <BottomTabNavigator.Navigator initialRouteName="Home"  screenOptions={{
@@ -84,7 +81,7 @@ export function Navigation(){
 
                                            }}/>
 
-                <BottomTabNavigator.Screen name="Favoris" component={ListJokeScreen}
+                <BottomTabNavigator.Screen name="Favoris" component={ListFavoriteJokeScreen}
                                            options={{
                                                tabBarIcon: ({focused}) => (
                                                    <Image source={favIcon}

JokesApp/redux/store.ts

@@ -4,6 +4,7 @@ import sampleReducer from './reducers/sampleJokeReducer';
 import customReducer from "./reducers/customJokeReducer";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Theme} from "@react-navigation/native";
+import {CustomJoke} from "../model/CustomJoke";
 
 const reducer = {
     categorieReducer: categorieReducer,
@@ -41,4 +42,47 @@ export const getTheme = async () => {
         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;

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<CustomJoke[]>([]);
+
+    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 (
+        <SafeAreaView style={styles.container}>
+            <FlatList
+                data = {favoriteJokes}
+                renderItem={({ item }) => (
+                    <TouchableHighlight onPress={() => navigation.navigate("JokeDetail", {"joke" : item.id})}>
+                        <JokeListItems item={item}/>
+                    </TouchableHighlight>
+                )}
+                keyExtractor={(item:  CustomJoke) => item.id}
+            />
+        </SafeAreaView>
+    );
+}
+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;
+}