Comments

src/screens/Home/HomeScreen.js

@@ -81,10 +81,22 @@ const HomeScreen = () => {
     });
   }, []); // Remove sortBy dependency to disable sorting
 
+
+
+  //function called handleRecipePress that takes in a parameter recipe. 
+  //When this function is called, it navigates to a screen called "Recipe" and passes in the recipe parameter as a prop. 
+  //The navigation object is assumed to be available in the current context.
   const handleRecipePress = (recipe) => {
     navigation.navigate("Recipe", { recipe });
   };
 
+
+
+  //function called renderRecipe that takes an object as input with an item property. 
+  //The function returns a TouchableOpacity component with some styles and a callback function that is executed 
+  //when the component is pressed. Inside the TouchableOpacity, there is a View component that contains 
+  //an Image component and a Text component. The Text components display some information about the recipe item, 
+  //such as the recipe title, servings, and price per serving if available.
   const renderRecipe = ({ item }) => {
     return (
       <TouchableOpacity

src/screens/IngredientSearch/IngredientItem.js

@@ -3,6 +3,13 @@ import { View, Text, Image, TouchableOpacity } from "react-native";
 import { AntDesign } from "@expo/vector-icons";
 import styles from "./styles";
 
+
+
+//a functional component called IngredientItem that takes three props: ingredient, onPress, and onAdd. 
+//The component returns a View element with a TouchableOpacity child that contains an image, a text, and a button. 
+//When the image, text, or button are pressed, the corresponding onPress or onAdd function is called with the ingredient 
+//prop as an argument. 
+//The styles for the component are defined in a separate styles object. The code is likely written in React Native.
 const IngredientItem = ({ ingredient, onPress, onAdd }) => {
   return (
     <View style={styles.cardContainer}>

src/screens/IngredientSearch/IngredientSearchScreen.js

@@ -6,6 +6,19 @@ import styles from "./styles";
 import { searchIngredientsByName } from "../../utils/APICalls/Spoonacular/ingredients";
 import { addIngredientToPantry } from "../../utils/APICalls/SimplKitchen/pantry";
 
+
+
+//a functional component called IngredientSearchScreen. 
+//The component takes a navigation prop and uses the useState hook to define state variables search and ingredients. 
+//The fetchData function is defined using the async/await syntax, which fetches a list of ingredients based on the search 
+//query from an external API, logs the first ingredient's possible units to the console, and sets the ingredients state 
+//to the fetched list. The handleAddIngredient function is defined to add an ingredient to a pantry and navigate to a 
+//screen called "Pantry" with a callback function fetchData passed as a parameter. The onPressIngredient function 
+//navigates to a screen called "Ingredient" with an ingredient prop passed as a parameter. 
+//Finally, the renderIngredient function takes an object with an item property as its argument
+//returns an <IngredientItem> React component with the item property passed as a prop along with onPressIngredient 
+//and handleAddIngredient functions. The component returns a view that displays a search bar and a list of ingredients 
+//with the FlatList component.
 const IngredientSearchScreen = ({ navigation }) => {
   const [search, setSearch] = useState("");
   const [ingredients, setIngredients] = useState([]);
@@ -21,6 +34,12 @@ const IngredientSearchScreen = ({ navigation }) => {
     }
   };
 
+
+
+  //function called handleAddIngredient that takes in an ingredient parameter. 
+  //The function first tries to add the ingredient to a pantry by calling an asynchronous function addIngredientToPantry. 
+  //If successful, the function navigates to a screen called "Pantry" and passes a callback function fetchData as a parameter. 
+  //If an error occurs, it is logged to the console.
   const handleAddIngredient = async (ingredient) => {
     try {
       await addIngredientToPantry(ingredient);
@@ -36,6 +55,11 @@ const IngredientSearchScreen = ({ navigation }) => {
     navigation.navigate("Ingredient", { ingredient });
   };
 
+
+
+  //function called renderIngredient that takes an object with an item property as its argument. 
+  //The function returns an <IngredientItem> React component with the item property passed as a prop along with 
+  //two functions onPressIngredient and handleAddIngredient. The key prop is set to item.id.
   const renderIngredient = ({ item }) => (
     <IngredientItem
       key={item.id}

src/screens/MealPlan/MealPlanScreen.js

@@ -14,6 +14,13 @@ import { Picker } from "@react-native-picker/picker";
 import MenuButton from "../../components/MenuButton/MenuButton";
 import { generateMealPlanWeek } from "../../utils/APICalls/Spoonacular/user";
 
+
+//renders a screen called MealPlanScreen. 
+//The component uses the useState hook to manage the state of mealPlan and selectedDay, 
+//and the useEffect hook to fetch data when the component mounts and set some navigation options. 
+//The code also defines functions to save and load meal plans using AsyncStorage, and another function called getMealPlans 
+//that fetches a meal plan and saves it. Finally, the component defines a function called renderMealPicker 
+//that returns a Picker component and a FlatList component that render meal plan data based on the selected day.
 const MealPlanScreen = () => {
   const [mealPlan, setMealPlan] = useState(null);
   const [selectedDay, setSelectedDay] = useState("monday");
@@ -44,17 +51,28 @@ const MealPlanScreen = () => {
     }
   };
 
+
+  //function called saveMealPlans, which takes in a parameter called meals. 
+  //This function uses the AsyncStorage API to store the meals parameter as a JSON string in local storage. 
+  //The async keyword in the function signature means that the function returns a promise and can be awaited.
   const saveMealPlans = async (meals) => {
     await AsyncStorage.setItem("mealPlans", JSON.stringify(meals));
   };
 
+
+  //uses AsyncStorage to get stored meal plans. 
+  //If there are any stored meal plans, they are parsed into JSON and set with setMealPlan.
   const loadMealPlans = async () => {
     const storedMealPlans = await AsyncStorage.getItem("mealPlans");
     if (storedMealPlans !== null) {
       setMealPlan(JSON.parse(storedMealPlans));
     }
   };
 
+
+  // function called getMealPlans. It tries to generate a meal plan for a week using the generateMealPlanWeek() function 
+  //and sets the fetched meal plan using setMealPlan(). It also saves the meal plan using saveMealPlans(). 
+  //If an error occurs in fetching the meal plan, it logs the error message to the console using console.error().
   const getMealPlans = async () => {
     try {
       const fetchedMealPlan = await generateMealPlanWeek();

src/screens/Pantry/PantryScreen.js

@@ -1,146 +1,4 @@
-// import React, { useState, useEffect } from "react";
-// import axios from "axios";
-// import {
-//   View,
-//   Text,
-//   FlatList,
-//   TouchableOpacity,
-//   Image,
-//   StyleSheet,
-// } from "react-native";
-// import MenuButton from "../../components/MenuButton/MenuButton";
-// import IconButton from "../../components/IconButton/IconButton";
 
-// import styles from "./styles";
-
-// const {
-//   getUsersIngredients,
-//   removeIngredientFromPantry,
-//   updateIngredientAmount,
-// } = require("../../utils/APICalls/SimplKitchen/pantry");
-
-
-
-// const PantryScreen = ({ navigation, route }) => {
-//   const [pantryIngredients, setPantryIngredients] = useState([]);
-
-//   useEffect(() => {
-//     fetchData();
-//   }, []);
-
-//   useEffect(() => {
-//     fetchData();
-//     navigation.setOptions({
-//       drawerLockMode: "locked-closed",
-//       headerLeft: () => (
-//         <MenuButton
-//           title="Menu"
-//           source={require("../../../assets/icons/menu.png")}
-//           onPress={() => {
-//             navigation.openDrawer();
-//           }}
-//         />
-//       ),
-//     });
-//   }, []);
-
-
-
-//   const fetchData = async () => {
-//     try {
-//       const results = await getUsersIngredients();
-//       setPantryIngredients(results.ingredients);
-//     } catch (error) {
-//       console.log(error);
-//     }
-//   };
-
-//   const handleAddIngredient = (ingredient) => {
-//     setPantryIngredients([...pantryIngredients, ingredient]);
-
-//   };
-
-
-//   const onRemoveIngredient = async (index) => {
-//     try {
-//       if (pantryIngredients[index].amount > 1) {
-//         pantryIngredients[index].amount -= 1;
-//         await updateIngredientAmount(pantryIngredients[index]);
-//       } else {
-//         await removeIngredientFromPantry(pantryIngredients[index]);
-//       }
-//       fetchData();
-//     } catch (error) {
-//       console.log(error);
-//     }
-//   };
-
-
-//   //If any errors occur, they are logged to the console.
-//   const onAddIngredient = async (index) => {
-//     try {
-//       pantryIngredients[index].amount += 1;
-//       await updateIngredientAmount(pantryIngredients[index]);
-//       fetchData();
-//     } catch (error) {
-//       console.log(error);
-//     }
-//   };
-
-
-
-//   const renderItem = ({ item, index }) => (
-//     <View style={styles.itemContainer}>
-//       <Image
-//         style={styles.photo}
-//         source={{
-//           uri: `https://spoonacular.com/cdn/ingredients_500x500/${item.pictureURL}`,
-//         }}
-//       />
-//       <View style={styles.itemContent}>
-//         <Text style={styles.title}>{item.ingredientName}</Text>
-//         <View style={styles.quantityContainer}>
-//           <IconButton
-//             iconName="minus"
-//             onPress={() => onRemoveIngredient(index)}
-//           />
-//           <Text style={styles.quantity}>{item.amount}</Text>
-//           <IconButton iconName="plus" onPress={() => onAddIngredient(index)} />
-//         </View>
-//       </View>
-//       <IconButton
-//         iconName="trash"
-//         onPress={() => onRemoveIngredient(index)}
-//         style={styles.removeButton}
-//       />
-//     </View>
-//   );
-
-//   return (
-//     <View style={styles.container}>
-//       <FlatList
-//         data={pantryIngredients}
-//         renderItem={renderItem}
-//         keyExtractor={(_, index) => index.toString()}
-//         ListEmptyComponent={() => (
-//           <View style={styles.emptyContainer}>
-//             <Text style={styles.emptyText}>Your pantry is empty</Text>
-//           </View>
-//         )}
-//       />
-//       <TouchableOpacity
-//         style={styles.addButton}
-//         onPress={() =>
-//           navigation.navigate("IngredientSearch", { screen: "IngredientSearch" })
-//         }
-//       >
-//         <Text style={styles.addButtonText}>Add Ingredient</Text>
-//       </TouchableOpacity>
-//     </View>
-//   );
-// };
-
-// export default PantryScreen; 
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import {
@@ -163,10 +21,22 @@ const {
   updateIngredientAmount,
 } = require("../../utils/APICalls/SimplKitchen/pantry");
 
+
+  //function called wait that takes a timeout parameter. 
+  //The function returns a Promise that resolves after the specified timeout period in milliseconds. 
+  //Essentially, this function can be used to delay the execution of a piece of code.
 const wait = (timeout) => {
   return new Promise(resolve => setTimeout(resolve, timeout));
 }
 
+
+
+  //defines a screen component called PantryScreen for a mobile app that allows users to manage items in their pantry. 
+  //The component uses React hooks to manage state and make asynchronous calls to a backend API to retrieve, update
+  //and delete pantry items. The component also defines a FlatList to display the pantry items and provides user 
+  //interface elements such as buttons and icons to add, remove, and update pantry items. 
+  //Finally, the component returns a view with the FlatList and a button to navigate to a screen to search for 
+  //new ingredients to add to the pantr
 const PantryScreen = ({ navigation, route }) => {
   const [pantryIngredients, setPantryIngredients] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
@@ -204,12 +74,27 @@ const PantryScreen = ({ navigation, route }) => {
     }
   };
 
+
+
+  //function named handleAddIngredient that takes an ingredient parameter. 
+  //When called, it adds the ingredient to an array of pantryIngredients using the setPantryIngredients function. 
+  //The setPantryIngredients function updates the state of the component while spreading the existing pantryIngredients 
+  //array and adding the new ingredient at the end.
   const handleAddIngredient = (ingredient) => {
     setPantryIngredients([...pantryIngredients, ingredient]);
 
   };
 
 
+
+
+  //asynchronous function called onRemoveIngredient that takes an index parameter. 
+  //Within the function, it checks if the amount property of an ingredient object at the specified index 
+  //in an array called pantryIngredients is greater than 1. If it is, it subtracts 1 from the amount property 
+  //and updates the ingredient amount using an asynchronous function called updateIngredientAmount. 
+  //If the amount property is 1 or less, it removes the ingredient from the pantry using another asynchronous 
+  //function called removeIngredientFromPantry. Finally, the function calls fetchData, which is presumably another 
+  //asynchronous function that fetches some data. If any errors occur within the try block, they are caught and logged to the console.
   const onRemoveIngredient = async (index) => {
     try {
       if (pantryIngredients[index].amount > 1) {

src/screens/Profile/ProfileScreen.js

@@ -12,6 +12,12 @@ import {
 
 import styles from "./styles";
 
+
+//component called ProfileScreen which renders a user profile page. 
+//The page has two multiple select lists of dietary preferences and intolerances. 
+//The component uses the useState and useEffect hooks to manage component state and fetch user information when the component mounts. 
+//The handleSave function is executed when the user saves their selections, and it calls two functions to update the user's preferences.
+//The handleLogout function logs the user out.
 export default function ProfileScreen(props) {
   const [selected1, setSelected1] = useState([]);
   const [selected2, setSelected2] = useState([]);
@@ -46,6 +52,11 @@ export default function ProfileScreen(props) {
     { key: "10", value: "Whole30" },
   ];
 
+
+
+  //function called handleSave that makes two API calls to update userIntolerances and userDiets with selected values. 
+  //If either API call fails, an error is logged to the console. After both API calls complete successfully, an alert message 
+  //is shown to the user indicating that the selected items have been saved.
   const handleSave = async () => {
     try {
       await updateUserIntolerences(selected1);
@@ -56,6 +67,13 @@ export default function ProfileScreen(props) {
     alert("Saved selected items");
   };
 
+
+
+  //defines a function called handleLogout. 
+  //The function is an asynchronous function, denoted by the async keyword. When the function is called, 
+  //it logs a message to the console saying "Logout clicked". Then it tries to call a function called logoutSimplKitchen() 
+  //using the await keyword, which means it will wait for that function to finish before continuing. 
+  //If an error occurs during the execution of logoutSimplKitchen(), the function catches the error and does nothing.
   const handleLogout = async () => {
     console.log("Logout clicked");
     try {