Issue Load Recipes

LeftOvers/App.tsx

@@ -18,8 +18,8 @@ export default function App() {
         <ThemeProvider>
             <ColorProvider>
                 <NavigationContainer>
-                    <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
+                    <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/>}>
-                        <Tab.Screen name='PROFILES' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profiles' }} />
+                        <Tab.Screen name='PROFILES' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profiles' }}/>
                         <Tab.Screen name='HOME' component={HomeStackScreen} options={{ headerShown: false, title: 'Home' }}/>
                         <Tab.Screen name='COOKING' component={CookingStackScreen} options={{ headerShown: false, title: 'Cooking' }}/>
                     </Tab.Navigator>

LeftOvers/Services/Recipes/RecipesServices.tsx

@@ -18,7 +18,7 @@ export default class RecipesService implements IRecipesService {
     async getRecipeById(id: number): Promise<Recipes | null>{
         try {
             const response = await axios.get(`${this.API_URL}/${id}`);
-            console.log(response);
+            //console.log(response.name);
             return response.data as Recipes;
         } catch (error) {
             throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);

LeftOvers/navigation/CookingStackScreen.tsx

@@ -5,6 +5,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import IngredientSelection from '../screens/IngredientSelection';
 import { HeaderTitle } from './Utils';
 import ThemeContext from '../theme/ThemeContext';
+import RecipeSuggestion from '../screens/RecipeSuggestion';
+import RecipeDetails from '../screens/RecipeDetails';
 
 const CookingStack = createNativeStackNavigator()
 
@@ -23,6 +25,26 @@ export default function CookingStackScreen() {
                     )
                 }}
             />
+            <CookingStack.Screen
+                name='RecipeSuggestion'
+                component={RecipeSuggestion}
+                options={{
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
+                    headerTitle: () => (
+                        <HeaderTitle title='Recipe Suggestion'/>
+                    )
+                }}
+            />
+            <CookingStack.Screen
+                name='RecipeDetails'
+                component={RecipeDetails}
+                options={{
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
+                    headerTitle: () => (
+                        <HeaderTitle title='Recipe Details'/>
+                    )
+                }}
+            />
         </CookingStack.Navigator>
     )
 }

LeftOvers/screens/HomePage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { StyleSheet, View, Text, Pressable, Image, ScrollView } from 'react-native';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
@@ -11,17 +11,51 @@ import ColorContext from '../theme/ColorContext';
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import  EventEmitter  from './EventEmitter';
 
 export default function HomePage({ navigation, props }) {
     const {colors} = useContext(ColorContext);
 
-    const profiles = [
+    const profilesHand = [
         {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
         {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
         {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
         {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
     ]
 
+    const [profiles, setProfiles] = useState([{name: "None", avatar: "plus_small.png", isActive: "none"}]);
+    console.log(profiles, profiles.length)
+
+    const handleGetProfiles = async () => {
+        try {
+            const existingProfiles = await AsyncStorage.getItem('profiles');
+            return JSON.parse(existingProfiles) || [];
+        } catch (error) {
+            console.log(error);
+            return [];
+        }
+    }
+
+    const fetchProfiles = async () => {
+        const existingProfiles = await handleGetProfiles();
+        setProfiles(existingProfiles);
+    };
+
+    const subscription = EventEmitter.addListener('profileAdded', async () => {
+        fetchProfiles();
+    });
+
+    useEffect(() => {
+        fetchProfiles();
+        console.log(profiles.length)
+        if(profiles.length == 0){
+            setProfiles([{name: "None", avatar: "plus_small.png", isActive: "none"}])
+            console.log("Je passe ici")
+        }
+        console.log(profiles)
+    }, []);
+
     const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
 
     const [cpt, setCpt] = useState(0);
@@ -155,8 +189,6 @@ export default function HomePage({ navigation, props }) {
                         <View style={{marginTop: "3%"}}/>
                         <ProfileSelection listProfile={profiles} disableSelection={true}/>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Change Active Filters" image="update.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('FiltersSelection')}/>
-                        <View style={{marginTop: "3%"}}/>
                         <ValidateButton title="Modify Profiles" image="parameter.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('Profiles')}/>
                     </View>
                     <View style={styles.separator}/>
@@ -178,9 +210,9 @@ export default function HomePage({ navigation, props }) {
                             </View>
                         </View>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('IngredientSelection')}/>
+                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Chnge Selected Ingredient')}/>
                         <View style={{marginTop: "3%"}}/>
-                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('RecipeSuggestion')}/>
+                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Go and search for recipe')}/>
                     </View>
                     <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>

LeftOvers/screens/IngredientSelection.tsx

@@ -56,6 +56,7 @@ const loadIngredients = async () => {
   };
 
   useEffect(() => {
+    console.log("Je passe ici (Ingredient Selection)")
     loadIngredients();
   }, []);
 

LeftOvers/screens/Profiles.tsx

@@ -61,7 +61,7 @@ export default function Profiles({navigation, props}) {
             const existingProfiles = await AsyncStorage.getItem('profiles');
             return JSON.parse(existingProfiles) || [];
         } catch (error) {
-            console.log("ça maaaaaaaaarche poaaaaaaaaaaaas");
+            console.log(error);
             return [];
         }
     }

LeftOvers/screens/RecipeDetails.tsx

@@ -13,25 +13,31 @@ import ColorContext from '../theme/ColorContext';
 export default function RecipeDetails(props) {
     const {colors} = useContext(ColorContext);
     
-    const [isLoading, setIsLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(true)
-    const [response, setResponse] = useState<Recipes | undefined>(undefined);
+    const [response, setResponse] = useState<Recipes>();
     const recipesService = new RecipesService();
 
     const loadRecipe = async () => {
       try {
-        const recipe = await recipesService.getRecipeById(props.id);
+        const recipe = await recipesService.getRecipeById(120);
+        console.log("Recipe.name: "+recipe.name)
         setResponse(recipe);
+        console.log("Response.name: "+response.name)
       } catch (error) {
         console.log(error);
-      } finally {
+      } finally{
-        setIsLoading(false);
+        setIsLoading(false)
       }
     };
 
     useEffect(() => {
+      console.log("Je passe ici (useEffect)")
       loadRecipe();
     }, []);
 
+    loadRecipe()
+    console.log("Response.name: " + response.name)
+
     function convertToHoursMinutes(totalMinutes: number): string {
       const hours = Math.floor(totalMinutes / 60);
       const minutes = totalMinutes % 60;
@@ -58,7 +64,7 @@ export default function RecipeDetails(props) {
                   alignItems: 'center',
                   justifyContent: 'center',
                   borderRadius: 20,
-                  backgroundColor: '#F2F0E4',
+                  backgroundColor: colors.cardBackground,
                   padding: "3%",
                   marginHorizontal: "3%",
                   borderWidth: 1,
@@ -75,12 +81,12 @@ export default function RecipeDetails(props) {
           },
           filters: {
                     fontSize: 20,
-                    color: '#ACA279',
+                    color: colors.cardElementBorder,
                     flex: 1,
           },
           nbSelected: {
                     fontSize: 11,
-                    color: "#3F3C42",
+                    color: colors.cardDetail,
                     textAlign: "right",
           },
     });
@@ -88,7 +94,7 @@ export default function RecipeDetails(props) {
     return (
         <SafeAreaProvider>
           <ScrollView>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+            <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                 <View style={{marginTop: "6%"}}>
                     <RecipeElementReduce 
                         title={response.name}

LeftOvers/screens/RecipeSuggestion.tsx

@@ -167,14 +167,6 @@ export default function RecipeSuggestion(props) {
                     duration="17 min"
                     navigateDetails={goDetails}/>
               <View style={{marginHorizontal: 10}}/>
-              <RecipeElement
-                    number="03"
-                    title="Vichyssoise"
-                    textList={ingredientListV2}
-                    description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."
-                    duration="1h and a half"
-                    navigateDetails={goDetails}/>
-              <View style={{marginHorizontal: 10}}/>
             </ScrollView>
             <View style={{marginBottom: "20%"}}/>
         </LinearGradient>