Ingredient Management (Ingredient Selection)

LeftOvers/screens/HomePage.tsx

@@ -20,8 +20,10 @@ export default function HomePage({ navigation, props }) {
     const profilesHand = [
         {name: "None", avatar: "logo.png", isActive: "none"}
     ]
+    const ingredientListHand = [{name: "None"}]
 
     const [profiles, setProfiles] = useState(profilesHand);
+    const [ingredientList, setIngredientList] = useState(ingredientListHand)
 
     const handleGetProfiles = async () => {
         try {
@@ -33,6 +35,16 @@ export default function HomePage({ navigation, props }) {
         }
     }
 
+    const handleGetAvailableIngredient = async () => {
+        try {
+            const existingAvailableIngredient = await AsyncStorage.getItem('ingredient');
+            return JSON.parse(existingAvailableIngredient) || [];
+        } catch (error) {
+            console.log(error);
+            return [];
+        }
+    }
+
     const fetchProfiles = async () => {
         const existingProfiles = await handleGetProfiles();
         if (existingProfiles.length != 0){
@@ -43,7 +55,17 @@ export default function HomePage({ navigation, props }) {
         }
     };
 
-    const subscription = EventEmitter.addListener('profileAdded', async () => {
+    const fetchAvailableIngredient = async () => {
+        const existingAvailableIngredient = await handleGetAvailableIngredient();
+        if (existingAvailableIngredient.length != 0){
+            setIngredientList(existingAvailableIngredient);
+        }
+        else{
+            setIngredientList(ingredientListHand)
+        }
+    };
+
+    const subscriptionAddProfile = EventEmitter.addListener('profileAdded', async () => {
         fetchProfiles();
     });
 
@@ -56,15 +78,28 @@ export default function HomePage({ navigation, props }) {
         }
     });
 
+    const subscriptionAddIngredient = EventEmitter.addListener('ingredientAdded', async () => {
+        fetchAvailableIngredient();
+    });
+
+    const subscriptionDeleteIngredient = EventEmitter.addListener('ingredientDeleted', async () => {
+        if (ingredientList.length == 1){
+            setIngredientList(ingredientListHand)
+        }
+        else{
+            fetchAvailableIngredient();
+        }
+    });
+
     useEffect(() => {
+        //AsyncStorage.clear()
         fetchProfiles();
         if(profiles.length == 0){
             setProfiles([{name: "None", avatar: "plus_small.png", isActive: "none"}])
         }
+        fetchAvailableIngredient();
     }, []);
 
-    const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
-
     const [cpt, setCpt] = useState(0);
     const decreaseCounter = () => {
         if (cpt > 0) {
@@ -212,16 +247,16 @@ export default function HomePage({ navigation, props }) {
                                 <Pressable onPress={decreaseCounter}>
                                     <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
                                 </Pressable>
-                                <FoodElementText title={ingredientList[cpt].title} mainColour={colors.carrouselBackground} secondaryColour={colors.cardDetail}/>
+                                <FoodElementText title={ingredientList[cpt].name} mainColour={colors.carrouselBackground} secondaryColour={colors.cardDetail}/>
                                 <Pressable onPress={increaseCounter}>
                                     <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText} />
                                 </Pressable>
                             </View>
                         </View>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Chnge Selected Ingredient')}/>
+                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => navigation.navigate("IngredientSelection")}/>
                         <View style={{marginTop: "3%"}}/>
-                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Go and search for recipe')}/>
+                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => navigation.navigate("RecipeSuggestion")}/>
                     </View>
                     <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>

LeftOvers/screens/IngredientSelection.tsx

@@ -10,6 +10,8 @@ import IngredientService from '../Services/Ingredients/IngredientsServices';
 import { LinearGradient } from 'expo-linear-gradient';
 import ColorContext from '../theme/ColorContext';
 import ValidateButton from '../components/ValidateButton';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import EventEmitter from './EventEmitter';
 
 export default function IngredientSelection(props) {
   const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
@@ -57,6 +59,8 @@ const loadIngredients = async () => {
 
   useEffect(() => {
     loadIngredients();
+    fetchAvailableIngredient();
+    ChangeAvailableSize(true)
   }, []);
 
   const AvailableItem = ({ value }: { value: Ingredient }) => (
@@ -83,20 +87,70 @@ const loadIngredients = async () => {
     </>
   );
 
-  const SelectIngredient = (newIngredient: Ingredient) => {
+  const handleGetAvailableIngredient = async () => {
-    const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
+    try {
-    if (!exists) {
+        const existingAvailableIngredient = await AsyncStorage.getItem('ingredient');
-      setSelectedIngredients([...selectedIngredients, newIngredient]);
+        return JSON.parse(existingAvailableIngredient) || [];
-      ChangeAvailableSize(false)
+    } catch (error) {
+        console.log(error);
+        return [];
+    }
+}
+
+const fetchAvailableIngredient = async () => {
+    const existingAvailableIngredient = await handleGetAvailableIngredient();
+    if (existingAvailableIngredient.length != 0){
+        setSelectedIngredients(existingAvailableIngredient);
+    }
+    else{
+        setSelectedIngredients([{value: "None"}])
+    }
+};
+
+  const SelectIngredient = async (newIngredient: Ingredient) => {
+    try{
+      const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
+      if (!exists) {
+        let existingAvailableIngredient = await AsyncStorage.getItem('ingredient');
+        existingAvailableIngredient = existingAvailableIngredient ? JSON.parse(existingAvailableIngredient) : [];
+        const updatedAvailableIngredient = [...existingAvailableIngredient, newIngredient];
+        await AsyncStorage.setItem('ingredient', JSON.stringify(updatedAvailableIngredient));
+        EventEmitter.emit('ingredientAdded');
+        console.log('Ingredient Added:', newIngredient);
+        ChangeAvailableSize(false)
+      }
+    }
+    catch(error){
+      console.log("Error occured during the addition of Ingredient:", error)
     }
   };
 
-  const RemoveIngredient = (idIngredient: number) => {
+  const RemoveIngredient = async (idIngredient: number) => {
-    const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
+    try{
-    setSelectedIngredients(updatedIngredients);
+      const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
-    ChangeAvailableSize(true)
+      await AsyncStorage.setItem('ingredient', JSON.stringify(updatedIngredients));
+      EventEmitter.emit('ingredientDeleted');
+      fetchAvailableIngredient();
+      setSelectedIngredients(updatedIngredients);
+      ChangeAvailableSize(true)
+    }
+    catch (error){
+      console.log("Error occured during the suppression of Ingredient:", error)
+    }
   };
 
+  const subscriptionAddIngredient = EventEmitter.addListener('ingredientAdded', async () => {
+    fetchAvailableIngredient();
+  });
+  const subscriptionDeleteIngredient = EventEmitter.addListener('ingredientDeleted', async () => {
+    if (selectedIngredients.length == 1){
+        setSelectedIngredients([{title: "None"}])
+    }
+    else{
+        fetchAvailableIngredient();
+    }
+  });
+
   const ChangeAvailableSize = (remove: boolean) => {
     if(remove){
         if (selectedIngredients.length == 1){
@@ -120,7 +174,12 @@ const loadIngredients = async () => {
           setAvailableSize(90)
         }
         else if (selectedIngredients.length == 1){
-          setAvailableSize(180)
+          if(selectedIngredients[0].value == "None"){
+            setAvailableSize(90)
+          }
+          else{
+            setAvailableSize(180)
+          }
         }
         else if (selectedIngredients.length == 2){
           setAvailableSize(260)