feat(): update onhand screen

components/AcctRecipeBar.jsx

@@ -1,8 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View, Image, ActivityIndicator } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Image,
+  ActivityIndicator,
+  ScrollView,
+} from 'react-native';
 import { MaterialCommunityIcons, FontAwesome } from '@expo/vector-icons';
 import { Title, Caption, HeaderTitle, BodySmall } from './Typography';
-import Button from '../components/Button';
 
 const RecipeSummary = ({ image, name, savedOn }) => {
   const placeholderImage = require('../assets/generic_recipe.png');
@@ -73,10 +78,10 @@ const AcctRecipeBar = (props) => {
         }
         const savedRecipesResponse = await response.json();
         setSavedRecipes(savedRecipesResponse);
-        setLoading(false); // Cambiar estado a false cuando la carga se complete
+        setLoading(false);
       } catch (error) {
         console.log('Error fetching saved recipes: ', error);
-        setLoading(false); // Cambiar estado a false en caso de error
+        setLoading(false);
       }
     };
     fetchSavedRecipes();
@@ -103,12 +108,9 @@ const AcctRecipeBar = (props) => {
     <View style={{ backgroundColor: '#fff', padding: 20 }}>
       <Title>Saved Recipes</Title>
       {savedRecipes.map((recipe) => (
-        <View
-          style={{ ...styles.columnContainer, width: '100%' }}
-          key={recipe.recipe_id}
-        >
+        <ScrollView key={recipe.recipe_id}>
           <RecipeSummary name={recipe.name} savedOn={recipe.date_for} />
-        </View>
+        </ScrollView>
       ))}
     </View>
   );

components/CategoryButton.jsx

@@ -1,10 +1,11 @@
 import { StyleSheet, TouchableOpacity } from 'react-native';
-import { ButtonText } from './Typography';
+import { ButtonLarge } from './Typography';
+import {  MaterialIcons } from '@expo/vector-icons';
 
-const CategoryButton = ({ title, onPress }) => {
+const CategoryButton = ({ title, icon, onPress }) => {
   return (
     <TouchableOpacity
-      style={[stlyes.categoryButton]}
+      style={[styes.categoryButton]}
       onPress={
         onPress ||
         (() =>
@@ -13,14 +14,15 @@ const CategoryButton = ({ title, onPress }) => {
           ))
       }
     >
-      <ButtonText>{title || 'Button'}</ButtonText>
+      <MaterialIcons name={icon} size={24} color='#72C08F' />
+      <ButtonLarge>{title || 'Button'}</ButtonLarge>
     </TouchableOpacity>
   );
 };
 
 export default CategoryButton;
 
-const stlyes = StyleSheet.create({
+const styes = StyleSheet.create({
   categoryButton: {
     alignItems: 'center',
     backgroundColor: '#F7FCF8',
@@ -29,6 +31,7 @@ const stlyes = StyleSheet.create({
     borderWidth: 1,
     justifyContent: 'center',
     paddingHorizontal: 60,
-    paddingVertical: 40,
+    paddingVertical: 30,
+    gap: 5,
   },
 });

components/DietFilter.jsx

@@ -1,5 +1,10 @@
 import { useState } from 'react';
-import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  FlatList,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { SPOONACULAR_API_KEY } from '@env';
 import { BodySmall } from './Typography';
 
@@ -72,8 +77,8 @@ const DietFilter = () => {
       });
   };
   const renderItem = ({ item }) => (
-    <View style={styles.categoryContainer}>
-      <TouchableOpacity
+    <View style={{ marginRight: 10 }}>
+      <Pressable
         style={[
           styles.categoryButton,
           selectedCategory === item.id && styles.selectedCategory,
@@ -88,14 +93,14 @@ const DietFilter = () => {
         >
           {item.category}
         </BodySmall>
-      </TouchableOpacity>
+      </Pressable>
     </View>
   );
 
   return (
-    <>
+    <View style={{ gap: 10 }}>
       <FlatList horizontal data={categories} renderItem={renderItem} />
-    </>
+    </View>
   );
 };
 
@@ -105,19 +110,21 @@ const styles = StyleSheet.create({
   categoryContainer: {
     marginRight: 16,
     marginBottom: 8,
+    marginTop: 8,
   },
   categoryButton: {
     borderRadius: 4,
-    backgroundColor: '#d2d2d2',
+    backgroundColor: '#F2F2F2',
     paddingVertical: 4,
-    paddingHorizontal: 2,
+    paddingHorizontal: 10,
   },
   categoryText: {
-    color: '#121212',
+    color: '#000',
+    fontWeight: 'bold',
   },
   titleText: {
     fontSize: 20,
-    fontWeight: 'bold',
+    fontWeight: '600',
     marginTop: 15,
   },
   selectedCategory: {

components/FavoriteRecipes.jsx

@@ -1,9 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import RecipeCard from './RecipeCard';
 import { FlatList } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { USER_API_IP_URL } from '@env';
+import { Caption } from './Typography';
 
 const FavoriteRecipesList = ({ title, scrollEnabled, numberOfRecipes }) => {
   const [recipes, setRecipes] = useState([]);
@@ -47,7 +48,7 @@ const FavoriteRecipesList = ({ title, scrollEnabled, numberOfRecipes }) => {
     <>
       {recipes?.length === 0 ? (
         <View style={style.noRecipes}>
-          <Text style={style.noRecipesText}>No Favorite Recipes</Text>
+          <Caption>No Favorite Recipes</Caption>
         </View>
       ) : (
         <FlatList

components/Header.jsx

@@ -1,11 +1,12 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import React from 'react';
+import { Title } from './Typography';
 
 // Uses the pageTitle prop so it can be changed dynamically per page where called.
 const Header = ({ pageTitle }) => {
   return (
     <View style={styles.header}>
-      <Text style={styles.title}>{pageTitle}</Text>
+      <Title>{pageTitle}</Title>
     </View>
   );
 };

components/IngredientCard.jsx

@@ -1,6 +1,6 @@
-import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
+import { StyleSheet, View, Image } from 'react-native';
 import React from 'react';
-import { Body, ButtonLarge, HeaderTitle } from './Typography';
+import { ButtonLarge } from './Typography';
 
 export default IngredientCard = ({ ingredient }) => {
   const { id, name, image } = ingredient;
@@ -20,7 +20,7 @@ export default IngredientCard = ({ ingredient }) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
     alignItems: 'center',
     borderColor: '#e7e7e7',
     borderRadius: 18,

screens/AddIngredient.jsx

@@ -1,20 +1,24 @@
 import React, { useContext, useState } from 'react';
-import { StyleSheet, View, TextInput, Alert } from 'react-native';
+import { StyleSheet, View, TextInput } from 'react-native';
 import { Modal } from '../components/Modal';
 import Button from '../components/Button';
 import { AntDesign } from '@expo/vector-icons';
 import { BodySmall } from '../components/Typography';
 import { USER_API_IP_URL } from '@env';
 
+const defaultIngredientImage =
+  'https://cdn-icons-png.freepik.com/512/6981/6981367.png';
+
 export const AddIngredientModal = ({
   modalVisible,
   setModalVisible,
   onClose,
+  fetchIngredients,
 }) => {
   const { userId } = '1'; // fix when backend integrated
   const [showError, setShowError] = useState('');
   const [productData, setProductData] = useState({
-    productName: '',
+    name: '',
     quantity: 0,
   });
 
@@ -35,25 +39,31 @@ export const AddIngredientModal = ({
   };
 
   const handleSaveProduct = async () => {
-    if (!productData.productName || productData.quantity === 0) {
+    if (!productData.name || productData.quantity === 0) {
       setShowError('Please, fill in all fields');
       return;
     }
 
     try {
       const response = await fetch(
-        `http://${USER_API_IP_URL}$:8000/api/user/1/ingredients/`,
+        `http://localhost:8000/api/users/1/ingredients/`,
         {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
-          body: JSON.stringify(productData),
+          body: JSON.stringify({
+            ...productData,
+            user: '1',
+            image: defaultIngredientImage,
+          }),
         }
       );
       if (!response.ok) {
         setShowError('Failed to save ingredient');
       }
+      fetchIngredients();
+      setModalVisible(false);
     } catch (error) {
       setShowError('Error saving ingredient');
       console.error('Error saving ingredient:', error);
@@ -64,7 +74,7 @@ export const AddIngredientModal = ({
     <Modal
       modalVisible={modalVisible}
       setModalVisible={setModalVisible}
-      titleText={'Add a Product 🍎'}
+      titleText='Add a Product 🍎'
       onClose={onClose}
       size='100%'
       fullscreen={false}
@@ -81,9 +91,9 @@ export const AddIngredientModal = ({
         <TextInput
           style={styles.input}
           placeholder='Enter a product name...'
-          value={productData.productName}
+          value={productData.name}
           onChangeText={(text) =>
-            setProductData({ ...productData, productName: text })
+            setProductData({ ...productData, name: text })
           }
           placeholderTextColor='gray'
         />
@@ -163,7 +173,7 @@ const styles = StyleSheet.create({
   },
   counterContainer: {
     alignSelf: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'space-evenly',
     alignItems: 'center',
     width: '80%',
     height: 60,

screens/FavoriteHomeSection.jsx

@@ -0,0 +1,27 @@
+import { ScrollView } from 'react-native-gesture-handler';
+import DietFilter from '../components/DietFilter';
+import FavoriteRecipesList from '../components/FavoriteRecipes';
+import { StyleSheet, View } from 'react-native';
+import { Title } from '../components/Typography';
+
+export const FavoriteHomeSection = (props) => {
+  return (
+    <ScrollView style={{ paddingTop: 40 }}>
+      <Title style={{ marginBottom: 10 }}>Favorite Recipes</Title>
+      <View style={styles.dietFilterContainer}>
+        <DietFilter />
+      </View>
+      <View style={styles.recipeListContainer}>
+        <FavoriteRecipesList numberOfRecipes={10} />
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  favoriteRecipesContainer: {},
+
+  dietFilterContainer: {
+    marginBottom: 32,
+  },
+});