meal and worout

components/AddMeal.js

@@ -1,37 +1,66 @@
 // CreateMealScreen.js
-import React, { useState } from 'react';
-import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import MealHeader from './MealHeader';
-import IngredientItem from './IngredientItem';
-import DirectionsBox from './DirectionsBox';
-import CreateButton from './CreateButton'; // Reused from previous examples
-import InputField from './InputField'; // Reused from previous examples
-
-const CreateMealScreen = () => {
-  // You would manage your ingredients and their amounts/calories here
-  const [ingredients, setIngredients] = useState([
-    { name: 'Steak', amount: '10 oz', calories: '847' },
-    // ...other ingredients
-  ]);
+import React, { useState, useEffect } from "react";
+import {
+  ScrollView,
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import MealHeader from "./MealHeader";
+import IngredientItem from "./IngredientItem";
+import DirectionsBox from "./DirectionsBox";
+import CreateButton from "./CreateButton"; // Reused from previous examples
+import InputField from "./InputField"; // Reused from previous examples
+import CommentBox from "./CommentBox";
 
+const CreateMealScreen = ({ route }) => {
+  const { userID } = route.params;
+  const { savedMeals } = route.params;
+  const { setSavedMeals } = route.params;
+  const [mealName, setMealName] = useState("");
+  const [mealIngredients, setMealIngredients] = useState("");
+  const [mealServing, setMealServings] = useState("");
+  const [mealInstructions, setMealInstructions] = useState("");
+
+  const handleAdd = () => {
+    console.log(mealName);
+    const addMeal = {
+      mealName,
+      mealIngredients,
+      mealServing,
+      mealInstructions,
+    };
+
+    setSavedMeals((savedMeals) => [...savedMeals, addMeal]);
+
+    console.log(addMeal);
+
+    setMealName("");
+    setMealIngredients("");
+    setMealServings("");
+    setMealInstructions("");
+  };
   return (
     <ScrollView style={styles.container}>
-      <MealHeader onClose={() => console.log('Close pressed')} />
-      <InputField placeholder="Meal Name" />
-      {ingredients.map((ingredient, index) => (
-        <IngredientItem key={index} ingredient={ingredient.name} />
-      ))}
-      {/* Add New Ingredient Button */}
-      <TouchableOpacity style={styles.addButton}>
-        <Text style={styles.addButtonText}>Add New +</Text>
-      </TouchableOpacity>
-      {/* Total Calories */}
-      <View style={styles.totalCalories}>
-        <Text>Total Calories:</Text>
-        <Text>1004</Text>
-      </View>
-      <DirectionsBox />
-      <CreateButton onPress={() => console.log('Create Meal')} />
+      <MealHeader onClose={() => console.log("Close pressed")} />
+      <InputField
+        value={mealName}
+        placeholder="Meal Name"
+        onChangeText={setMealName}
+      />
+
+      <DirectionsBox
+        value={mealIngredients}
+        onChangeText={setMealIngredients}
+      />
+      <InputField
+        value={mealServing}
+        placeholder="Servings"
+        onChangeText={setMealServings}
+      />
+      <CommentBox value={mealInstructions} onChangeText={setMealInstructions} />
+      <CreateButton onPress={() => handleAdd()} label={"Create Meal"} />
     </ScrollView>
   );
 };
@@ -42,19 +71,19 @@ const styles = StyleSheet.create({
     padding: 10,
   },
   addButton: {
-    alignItems: 'center',
+    alignItems: "center",
     padding: 10,
   },
   addButtonText: {
     fontSize: 18,
-    color: 'blue',
+    color: "blue",
   },
   totalCalories: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     padding: 10,
   },
 });
 
-export default CreateMealScreen;
+export default CreateMealScreen;

components/AddTask.js

@@ -1,53 +1,55 @@
 // CreateTaskScreen.js
-import React from 'react';
-import { useState } from 'react';
-import { ScrollView, StyleSheet, Alert  } from 'react-native';
-import Header from './Header';
-import InputField from './InputField';
-import DateTimePicker from './DateTimePicker';
-import TypeSelector from './TypeSelector';
-import CommentBox from './CommentBox';
-import CreateButton from './CreateButton';
-import { saveTaskForUser } from '../services/AuthAPI';
+import React from "react";
+import { useState } from "react";
+import { ScrollView, StyleSheet, Alert } from "react-native";
+import Header from "./Header";
+import InputField from "./InputField";
+import DateTimePicker from "./DateTimePicker";
+import TypeSelector from "./TypeSelector";
+import CommentBox from "./CommentBox";
+import CreateButton from "./CreateButton";
+import { saveTaskForUser } from "../services/AuthAPI";
 
-const CreateTaskScreen = ({route}) => {
+const CreateTaskScreen = ({ route }) => {
   const { userID } = route.params;
-  const [taskName, setTaskName] = useState('');
-  const [location, setLocation] = useState('');
-  const [taskType, setTaskType] = useState('');
-  const [comment, setComment] = useState('');
+  const [taskName, setTaskName] = useState("");
+  const [location, setLocation] = useState("");
+  const [taskType, setTaskType] = useState("");
+  const [comment, setComment] = useState("");
   const [date, setDate] = useState(new Date());
 
   const handleCreateTask = async () => {
-
     const user = userID;
-  
+
     const taskData = {
       name: taskName,
       date: date.toISOString(),
       location: location,
       type: taskType,
       comment: comment,
     };
-  
+
     try {
       await saveTaskForUser(user, taskData);
-      Alert.alert('Task Created', 'Your task has been successfully created!');
+      Alert.alert("Task Created", "Your task has been successfully created!");
       // Reset task creation form or navigate the user away
     } catch (error) {
-      Alert.alert('Error', 'There was an error creating your task. Please try again.');
+      Alert.alert(
+        "Error",
+        "There was an error creating your task. Please try again."
+      );
       console.error(error);
     }
   };
   return (
     <ScrollView style={styles.container}>
-      <Header onClose={() => console.log('Close pressed')} />
+      <Header onClose={() => console.log("Close pressed")} />
       <InputField placeholder="Name" onChangeText={setTaskName} />
       <DateTimePicker onConfirm={setDate} />
       <InputField placeholder="Location" onChangeText={setLocation} />
       <TypeSelector onSelect={setTaskType} />
-      <CommentBox onCommentChange={setComment} />
-      <CreateButton onPress={handleCreateTask} />
+      <CommentBox onChangeText={setComment} />
+      <CreateButton onPress={handleCreateTask} label={"Create Task"} />
     </ScrollView>
   );
 };

components/AddWorkout.js

@@ -1,35 +1,82 @@
 // CreateWorkoutScreen.js
-import React, { useState } from 'react';
-import { ScrollView, View, StyleSheet } from 'react-native';
-import WorkoutHeader from './WorkoutHeader';
-import InputField from './InputField'; // Reused from Create Task
-import ExerciseItem from './ExerciseItem';
-import DaySelector from './DateTimePicker';
-import CommentBox from './CommentBox'; // Reused from Create Task
-import CreateButton from './CreateButton'; // Reused from Create Task
-
-const CreateWorkoutScreen = () => {
-  const [selectedDays, setSelectedDays] = useState([]);
-
-  const toggleDay = (day) => {
-    setSelectedDays((currentDays) =>
-      currentDays.includes(day)
-        ? currentDays.filter((d) => d !== day)
-        : [...currentDays, day]
-    );
+import React, { useState, useEffect } from "react";
+import { ScrollView, View, StyleSheet, TextInput } from "react-native";
+import WorkoutHeader from "./WorkoutHeader";
+import InputField from "./InputField"; // Reused from Create Task
+import ExerciseItem from "./ExerciseItem";
+import DaySelector from "./DateTimePicker";
+import CommentBox from "./CommentBox"; // Reused from Create Task
+import CreateButton from "./CreateButton"; // Reused from Create Task
+
+const AddWorkout = ({ route }) => {
+  //const [selectedDays, setSelectedDays] = useState([]);
+  const { userID } = route.params;
+  const { savedWorkouts } = route.params;
+  const { setSavedWorkouts } = route.params;
+  const [workoutName, setWorkoutName] = useState("");
+  const [workoutType, setWorkoutType] = useState("");
+  const [workoutMuscle, setWorkoutMuscle] = useState("");
+  const [workoutEquipment, setWorkoutEquipment] = useState("");
+  const [workoutDifficulty, setWorkoutDifficulty] = useState("");
+  const [workoutInstructions, setWorkoutInstructions] = useState("");
+
+  const handleAdd = () => {
+    //console.log(workoutName);
+    const addWorkout = {
+      workoutName,
+      workoutType,
+      workoutMuscle,
+      workoutEquipment,
+      workoutDifficulty,
+      workoutInstructions,
+    };
+
+    setSavedWorkouts((savedWorkouts) => [...savedWorkouts, addWorkout]);
+
+    console.log(addWorkout);
+
+    setWorkoutName("");
+    setWorkoutType("");
+    setWorkoutMuscle("");
+    setWorkoutEquipment("");
+    setWorkoutDifficulty("");
+    setWorkoutInstructions("");
   };
 
   return (
     <ScrollView style={styles.container}>
-      <WorkoutHeader onClose={() => console.log('Close pressed')} />
-      <InputField placeholder="Workout Name" />
-      {/* Repeat ExerciseItem for each exercise */}
-      <ExerciseItem />
-      <ExerciseItem />
-      {/* ... */}
-      <DaySelector selectedDays={selectedDays} onDayToggle={toggleDay} />
-      <CommentBox />
-      <CreateButton onPress={() => console.log('Create Workout')} />
+      <WorkoutHeader onClose={() => console.log("Close pressed")} />
+      <InputField
+        value={workoutName}
+        placeholder="Workout Name"
+        onChangeText={setWorkoutName}
+      />
+      <InputField
+        value={workoutType}
+        placeholder="Type"
+        onChangeText={setWorkoutType}
+      />
+      <InputField
+        value={workoutMuscle}
+        placeholder="Muscle"
+        onChangeText={setWorkoutMuscle}
+      />
+      <InputField
+        value={workoutEquipment}
+        placeholder="Equipment"
+        onChangeText={setWorkoutEquipment}
+      />
+      <InputField
+        value={workoutDifficulty}
+        placeholder="Difficulty"
+        onChangeText={setWorkoutDifficulty}
+      />
+
+      <CommentBox
+        value={workoutInstructions}
+        onChangeText={setWorkoutInstructions}
+      />
+      <CreateButton onPress={() => handleAdd()} label={"Create Workout"} />
     </ScrollView>
   );
 };
@@ -41,4 +88,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CreateWorkoutScreen;
+export default AddWorkout;

components/CommentBox.js

@@ -1,15 +1,17 @@
 // components/CommentBox.js
-import React from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
 
-const CommentBox = ({ onCommentChange }) => {
+const CommentBox = ({ onChangeText, value, placeholder, keyboardType }) => {
   return (
     <View style={styles.container}>
       <TextInput
+        value={value}
         style={styles.commentInput}
         multiline
-        placeholder="Comments"
-        onChangeText={onCommentChange}
+        placeholder="Instructions"
+        onChangeText={onChangeText}
+        keyboardType={keyboardType}
       />
     </View>
   );
@@ -21,10 +23,10 @@ const styles = StyleSheet.create({
   },
   commentInput: {
     borderWidth: 1,
-    borderColor: 'grey',
+    borderColor: "grey",
     borderRadius: 5,
     height: 100,
-    textAlignVertical: 'top',
+    textAlignVertical: "top",
     padding: 10,
   },
 });

components/CreateButton.js

@@ -1,26 +1,26 @@
 // components/CreateButton.js
-import React from 'react';
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet } from "react-native";
 
-const CreateButton = ({ onPress }) => {
+const CreateButton = ({ onPress, label }) => {
   return (
     <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Text style={styles.buttonText}>Create Task</Text>
+      <Text style={styles.buttonText}>{label}</Text>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: 'pink',
+    backgroundColor: "pink",
     padding: 10,
     borderRadius: 5,
-    alignItems: 'center',
+    alignItems: "center",
     marginVertical: 10,
   },
   buttonText: {
-    color: 'white',
-    fontWeight: 'bold',
+    color: "white",
+    fontWeight: "bold",
   },
 });