working

App.js

@@ -8,6 +8,7 @@ import { IngredientScreen } from './screens/Ingredients';
 import { LoginScreen } from './screens/Login';
 import { NavigationContainer } from '@react-navigation/native';
 import { RecipeScreen } from './screens/Recipe';
+import { RecipeListScreen } from './screens/RecipeList';
 import { ShoppingListScreen } from './screens/ShoppingList';
 import DietaryAllergenFilterScreen from './screens/DietaryAllergenFilter';
 
@@ -37,6 +38,11 @@ function App() {
           component={RecipeScreen}
           options={{ headerShown: true }}
         />
+        <Stack.Screen
+          name='RecipeList'
+          component={RecipeListScreen}
+          options={{ headerShown: true }}
+        />
         <Stack.Screen
           name='Filter'
           component={FilterScreen}

hooks/useGetRecipeInfo.js

@@ -4,13 +4,15 @@ import { useEffect, useState } from 'react';
 export const useGetRecipeInfo = (recipeId) => {
   const [recipe, setRecipe] = useState(null);
   const [loading, setLoading] = useState(true);
-
+  console.log('hook:', recipeId)
   const fetchRecipeInfo = async () => {
     try {
       const response = await fetch(
         `https://api.spoonacular.com/recipes/${recipeId}/information?includeNutrition=true&apiKey=${SPOONACULAR_API_KEY}`
       );
+      console.log('hook:', response)
       const data = await response.json();
+
       setRecipe(data);
       setLoading(false);
     } catch (error) {

screens/Filter.jsx

@@ -1,12 +1,11 @@
-import { useState } from 'react';
-import { StyleSheet } from 'react-native';
-import { TextInput } from 'react-native';
-import { View } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
 import { Calendar } from 'react-native-calendars';
 import { useNavigation } from '@react-navigation/native';
+import Header from '../components/Header';
 import RadioButton from '../components/RadioButton';
 import Button from '../components/Button';
-import { Title } from '../components/Typography';
+import { USER_API_IP_URL } from '@env';
 
 export const FilterScreen = () => {
   const [ingredientText, setIngredientText] = useState('');
@@ -25,28 +24,47 @@ export const FilterScreen = () => {
     setPlannedMealDay(day.dateString);
   };
 
-  const handleRecipeSubmit = () => {
+  const handleRecipeSubmit = async () => {
     const data = {
       ingredient: ingredientText,
       mealType: selectedMealType,
       plannedDay: plannedMealDay,
     };
 
-    console.log('data: ', data);
-    navigation.navigate('Recipe', { recipeData: data });
+    try {
+      const response = await fetch(`http://${USER_API_IP_URL}:8000/api/recipes/find_recipes/1/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to submit');
+      }
+
+      const responseData = await response.json();
+      console.log('Filter Screen:', responseData);
+
+      navigation.navigate('RecipeList', { recipeData: responseData });
+    } catch (error) {
+      console.error('Error submitting data:', error.message);
+    }
   };
 
   return (
     <>
+      <Header pageTitle='Filters' />
       <View style={styles.mainContainer}>
-        <Title style={styles.filterTitles}>Ingredient</Title>
+        <Text style={styles.title}>Ingredient</Text>
         <TextInput
           style={styles.input}
           onChangeText={setIngredientText}
           placeholder='Input one ingredient'
           value={ingredientText}
         />
-        <Title style={styles.filterTitles}>Meal Type</Title>
+        <Text style={styles.title}>Meal Type</Text>
         <View style={styles.mealTypeContainer}>
           {mealTypes.map((meal, index) => (
             <View key={index} style={styles.radioButtonContainer}>
@@ -60,7 +78,7 @@ export const FilterScreen = () => {
           ))}
         </View>
         <View style={styles.calendarContainer}>
-          <Title style={styles.filterTitles}>Planned Meal Day</Title>
+          <Text style={styles.title}>Planned Meal Day</Text>
           <Calendar
             onDayPress={(day) => handleDayPressed(day)}
             minDate={new Date().toISOString().split('T')[0]}
@@ -81,46 +99,33 @@ export const FilterScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  filterHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 50,
-  },
-  filterTitles: {
-    marginBottom: 20,
-  },
   mainContainer: {
+    flex: 1,
     padding: 15,
-    backgroundColor: '#fff',
+    backgroundColor: '#DEDEDE',
   },
   title: {
-    fontSize: 30,
+    fontSize: 20,
     fontWeight: 'bold',
-    marginBottom: 20,
+    marginBottom: 10,
   },
   input: {
+    padding: 5,
     height: 40,
-    marginBottom: 10,
-    backgroundColor: '#fff',
-    paddingHorizontal: 10,
     borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#ccc',
-    fontFamily: 'Gilroy-Medium',
-    marginBottom: 20,
+    backgroundColor: '#fff',
+    marginBottom: 10,
   },
   mealTypeContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    alignItems: 'center',
   },
   radioButtonContainer: {
     width: '50%',
     marginBottom: 10,
   },
   calendarContainer: {
     marginTop: 20,
-    marginBottom: 40,
   },
 });
+

screens/Ingredients.jsx

@@ -27,7 +27,7 @@ export const IngredientScreen = () => {
   const fetchIngredients = async () => {
     try {
       const response = await fetch(
-        `http://localhost:8000/api/users/${userId}/ingredients/`
+        `http://${USER_API_IP_URL}:8000/api/users/1/ingredients/`
       );
       const data = await response.json();
       console.log(data);
@@ -42,7 +42,7 @@ export const IngredientScreen = () => {
 
   useEffect(() => {
     fetchIngredients();
-  }, [userId, fetchIngredients]);
+  }, [userId]);
 
   const updateSearch = (query) => {
     setSearch(query);