view Meal Plan

screens/Plan.js

-import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import { firebase } from "../config";
+import React, { useEffect } from 'react';
+import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
+import { firebase } from '../config'; // Make sure to import 'firestore' and 'firebase' correctly.
 
-const Plan = ({ bmi }) => {
-  const [mealPlan, setMealPlan] = useState(null);
+export default function Plan({ route }) {
+  // Extract nutritionPlan from route.params
+  const { nutritionPlan } = route.params;
 
-  useEffect(() => {
-    // Fetch the meal plan based on the BMI value from Firebase
-    const fetchMealPlan = async () => {
-      try {
-        const mealPlanSnapshot = await firebase
-          .firestore()
-          .collection("nutrition_plan")
-          .where("bmiRange", "==", getBmiRange(bmi))
-          .get();
+  // Function to save the nutritionPlan to Firestore
+ 
+  const savePlanToDatabase = async (nutritionPlan) => {
+    try {
+      const timestamp = firebase.firestore.FieldValue.serverTimestamp();
+      const data = {
+        nutritionPlan: nutritionPlan,
+        date: timestamp,
+      };
 
-        if (!mealPlanSnapshot.empty) {
-          // Assuming there's only one matching meal plan, but you can handle multiple results if needed
-          const mealPlanData = mealPlanSnapshot.docs[0].data();
-          setMealPlan(mealPlanData);
-        }
-      } catch (error) {
-        console.error("Error fetching meal plan:", error);
-      }
-    };
-
-    if (bmi) {
-      fetchMealPlan();
-    }
-  }, [bmi]);
-
-  // Function to determine the BMI range based on value
-  const getBmiRange = (bmiValue) => {
-    // Define your BMI ranges and return the appropriate range based on the value
-    // Example:
-    if (bmiValue < 18.5) {
-      return "Underweight";
-    } else if (bmiValue >= 18.5 && bmiValue < 24.9) {
-      return "Normal";
-    } else if (bmiValue >= 24.9 && bmiValue < 29.9) {
-      return "Overweight";
-    } else {
-      return "Obese";
+      const docRef = await firebase.firestore().collection("mealPlans").add(data);
+      console.log("Meal plan saved with ID:", docRef.id); 
+    } catch (error) {
+      console.error('Error saving Nutrition Plan to Firestore: ', error);
     }
-  };
+  }
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.label}>Meal Plan:</Text>
-      {mealPlan ? (
-        <View>
-          <Text>{mealPlan.breakfast}</Text>
-          <Text>{mealPlan.lunch}</Text>
-          <Text>{mealPlan.dinner}</Text>
-        </View>
-      ) : (
-        <Text>No meal plan available .</Text>
-      )}
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+      {/* Image at the top */}
+      <Image
+        source={require('../assets/bmi.jpg')}
+        style={styles.image}
+      />
+    
+      {/* Nutrition Plan */}
+      <Text style={styles.title}>Nutrition Plan:</Text>
+      <Text style={styles.nutritionPlan}>{nutritionPlan}</Text>
+
+      {/* Save Plan Button */}
+      <TouchableOpacity style={styles.button} onPress={savePlanToDatabase}>
+        <Text>Save Plan</Text>
+      </TouchableOpacity>
+    </ScrollView>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
+    padding: 16,
+  },
+  image: {
+    width: '100%',
+    height: 200, // Adjust the height as needed
   },
-  label: {
-    fontSize: 24,
-    fontWeight: "bold",
-    marginBottom: 10,
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginTop: 16,
+  },
+  nutritionPlan: {
+    fontSize: 16,
+    marginTop: 8,
+  },
+  button: {
+    backgroundColor: "#FF9DD2",
+    padding: 12,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  buttonText: {
+    color: 'white',
   },
 });
-
-export default Plan;