Merge pull request #42 from utmgdsc/feature/connect-initial-forums

[74] connected initial food and transportation forum to backend
utmgdsc · Dec 15, 2023 · 49d7a90 · 49d7a90
2 parents 1d34bbf + 8fb85c4
commit 49d7a90
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 191 deletions.
diff --git a/frontend/assets/foodQuestions.tsx b/frontend/assets/foodQuestions.tsx
@@ -10,7 +10,9 @@ const foodSlidersData: SliderData[] = [
   { id: 1, label: 'Beef', minValue: 0, maxValue: 8, initialValue: 0 },
   { id: 2, label: 'Lamb', minValue: 0, maxValue: 8, initialValue: 0 },
   { id: 3, label: 'Pork', minValue: 0, maxValue: 8, initialValue: 0 },
-  { id: 4, label: 'Chicken/Fish', minValue: 0, maxValue: 8, initialValue: 0 },
+  { id: 4, label: 'Chicken', minValue: 0, maxValue: 8, initialValue: 0 },
+  { id: 5, label: 'Fish', minValue: 0, maxValue: 8, initialValue: 0 },
+  { id: 6, label: 'Cheese', minValue: 0, maxValue: 8, initialValue: 0 },
 ];
 
 export default foodSlidersData;
diff --git a/frontend/src/screens/Food/foodEntryEdit.tsx b/frontend/src/screens/Food/foodEntryEdit.tsx
@@ -1,14 +1,5 @@
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  ScrollView,
-  Modal,
-  Linking,
-} from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity, ScrollView, TextInput } from 'react-native';
 import * as React from 'react';
-import Icon from 'react-native-vector-icons/FontAwesome';
 import { useEffect, useState } from 'react';
 import { type StackNavigationProp } from '@react-navigation/stack';
 import { type RootStackParamList } from '../../components/types';
@@ -76,32 +67,13 @@ export default function FoodEntryEdit(): JSX.Element {
     }
   };
 
-  const openLink = async (url: string): Promise<void> => {
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      await Linking.openURL(url);
-    } else {
-      console.error('Cannot open the URL');
-    }
-  };
-
-  const handleLinkPress = (): void => {
-    const url = 'https://fcr-ccc.nrcan-rncan.gc.ca/en';
-    openLink(url).catch((error) => {
-      console.error('Error opening link:', error);
-    });
-  };
-
   const [loaded] = useFonts({
     Montserrat: require('../../../assets/fonts/MontserratThinRegular.ttf'),
     Josefin: require('../../../assets/fonts/JosefinSansThinRegular.ttf'),
   });
 
   const navigation = useNavigation<StackNavigation>();
 
-  const [modalVisible, setModalVisible] = useState(false);
-
   const handleSurveySubmit = (): void => {
     // Process survey responses, e.g., send them to a server
     if (foodEntry != null) {
@@ -118,24 +90,22 @@ export default function FoodEntryEdit(): JSX.Element {
         cheese: cheeseConsumption,
         milk: milkConsumption,
         food_waste: foodWaste,
-      }
+      };
       void FoodAPI.updateFood(newEntry).then(() => {
-        navigation.navigate('FoodHistory');
-      })
+        navigation.navigate('DashBoard');
+      });
     }
   };
 
   useEffect(() => {
     if (foodEntry != null) {
       setSliderData([
-        { id: 1, label: 'Beef', minValue: 0, maxValue: 800, initialValue: foodEntry.beef },
-        { id: 2, label: 'Lamb', minValue: 0, maxValue: 800, initialValue: foodEntry.lamb },
-        { id: 3, label: 'Pork', minValue: 0, maxValue: 800, initialValue: foodEntry.pork },
-        { id: 4, label: 'Chicken', minValue: 0, maxValue: 800, initialValue: foodEntry.chicken },
-        { id: 5, label: 'Fish', minValue: 0, maxValue: 800, initialValue: foodEntry.fish },
-        { id: 6, label: 'Cheese', minValue: 0, maxValue: 800, initialValue: foodEntry.cheese },
-        { id: 7, label: 'Milk', minValue: 0, maxValue: 800, initialValue: foodEntry.milk },
-        { id: 8, label: 'Food Waste', minValue: 0, maxValue: 800, initialValue: foodEntry.food_waste },
+        { id: 1, label: 'Beef', minValue: 0, maxValue: 8, initialValue: foodEntry.beef },
+        { id: 2, label: 'Lamb', minValue: 0, maxValue: 8, initialValue: foodEntry.lamb },
+        { id: 3, label: 'Pork', minValue: 0, maxValue: 8, initialValue: foodEntry.pork },
+        { id: 4, label: 'Chicken', minValue: 0, maxValue: 8, initialValue: foodEntry.chicken },
+        { id: 5, label: 'Fish', minValue: 0, maxValue: 8, initialValue: foodEntry.fish },
+        { id: 6, label: 'Cheese', minValue: 0, maxValue: 8, initialValue: foodEntry.cheese },
       ]);
       setBeefConsumption(foodEntry.beef);
       setLambConsumption(foodEntry.lamb);
@@ -151,10 +121,10 @@ export default function FoodEntryEdit(): JSX.Element {
   useEffect(() => {
     void FoodAPI.getFoodMetricForToday().then((res) => {
       if (res != null) {
-        setFoodEntry(res)
+        setFoodEntry(res);
       }
-    })
-  }, [loaded])
+    });
+  }, [loaded]);
 
   if (!loaded || slidersData.length === 0) {
     return <></>;
@@ -165,43 +135,16 @@ export default function FoodEntryEdit(): JSX.Element {
       <ScrollView style={styles.scrollContainer}>
         <Text style={styles.header}>Calculate your emissions from food:</Text>
 
-        <Modal transparent={true} visible={modalVisible}>
-          <View style={styles.modalBackground}>
-            <View style={styles.modalContainer}>
-              <Text style={styles.infoText}>
-                If you don&apos;t know your vehicle&apos;s fuel efficiency, it&apos;s available
-                online{' '}
-                <Text style={styles.linkText} onPress={handleLinkPress}>
-                  here
-                </Text>
-                . Select the &quot;combination&quot; value under Comsumption in L/100km. The average
-                fuel consumption of non-plug-in hybrid personal vehicles in Canada is 8.9 L / 100
-                km.
-              </Text>
-              <TouchableOpacity
-                style={styles.closeIcon}
-                onPress={() => setModalVisible(!modalVisible)}
-              >
-                <Icon name="times-circle" size={30} color={Colors.DARKGREEN} />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </Modal>
-
-        <Text style={styles.header}>
-          On average, how much distance do you travel using the following methods per week:
-        </Text>
-
         {slidersData.map((slider, index) => (
           <View style={styles.questionContainer} key={slider.id}>
             <Text style={styles.question}>
-              {slider.label}: {slidersData[index].initialValue} km
+              {slider.label}: {slidersData[index].initialValue} Servings
             </Text>
             <Slider
               style={styles.silder}
               minimumValue={slider.minValue}
               maximumValue={slider.maxValue}
-              step={50}
+              step={1}
               minimumTrackTintColor={Colors.DARKGREEN}
               maximumTrackTintColor={Colors.FILLGREEN}
               thumbTintColor={Colors.WHITE}
@@ -216,6 +159,32 @@ export default function FoodEntryEdit(): JSX.Element {
           </View>
         ))}
 
+        <View style={styles.questionContainer}>
+          <Text style={styles.question}>How many cups of milk do you drink per week:</Text>
+          <TextInput
+            style={styles.input}
+            keyboardType="numeric"
+            placeholder={String(foodEntry?.milk)}
+            onChangeText={(text) => {
+              setMilkConsumption(Number(text));
+            }}
+          />
+        </View>
+
+        <View style={styles.questionContainer}>
+          <Text style={styles.question}>
+            On average, how much food waste do you produce, in grams:
+          </Text>
+          <TextInput
+            style={styles.input}
+            keyboardType="numeric"
+            placeholder={String(foodEntry?.food_waste)}
+            onChangeText={(text) => {
+              setFoodWaste(Number(text) / 100);
+            }}
+          />
+        </View>
+
         <TouchableOpacity style={styles.buttoning} onPress={handleSurveySubmit}>
           <Text style={styles.buttoningText}>Save</Text>
         </TouchableOpacity>
@@ -236,19 +205,6 @@ const styles = StyleSheet.create({
     width: '100%',
     paddingHorizontal: 12,
   },
-  modalBackground: {
-    backgroundColor: Colors.BLACKTRANS,
-    flex: 1,
-  },
-  modalContainer: {
-    backgroundColor: Colors.WHITE,
-    marginHorizontal: 50,
-    marginVertical: 180,
-    padding: 20,
-    borderRadius: 10,
-    flex: 1,
-    flexDirection: 'row',
-  },
   scrollContainer: {
     paddingTop: 30,
     flex: 1,
@@ -287,15 +243,13 @@ const styles = StyleSheet.create({
   questionContainer: {
     paddingBottom: 30,
   },
-  infoText: {
-    fontSize: 20,
-    color: Colors.DARKGREEN,
-  },
-  linkText: {
-    color: Colors.BLUE,
-  },
-  closeIcon: {
-    marginLeft: 'auto',
+  input: {
+    borderWidth: 1,
+    borderColor: Colors.GREY,
+    padding: 8,
+    margin: 10,
+    width: 200,
+    backgroundColor: Colors.WHITE,
   },
   silder: {
     height: 50,

diff --git a/frontend/src/screens/Food/foodForum.tsx b/frontend/src/screens/Food/foodForum.tsx
@@ -4,11 +4,13 @@ import { type StackNavigationProp } from '@react-navigation/stack';
 import { type RootStackParamList } from '../../components/types';
 import { useFonts } from 'expo-font';
 import Colors from '../../../assets/colorConstants';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import foodSliderData from '../../../assets/foodQuestions';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Slider from '@react-native-community/slider';
+import { FoodAPI } from '../../APIs/FoodAPI';
+import { type FoodEntry } from '../../models/Food';
 
 export type StackNavigation = StackNavigationProp<RootStackParamList>;
 
@@ -44,35 +46,66 @@ export default function FoodForum(): JSX.Element {
         setChickenServing(value);
         break;
       case 4:
+        setFishServing(value);
+        break;
+      case 5:
         setCheeseServing(value);
         break;
       default:
         break;
     }
   };
+  const [foodEntry, setFoodEntry] = useState<FoodEntry>();
 
   const [beefServing, setBeefServing] = useState(0);
   const [lambServing, setLambServing] = useState(0);
   const [porkServing, setPorkServing] = useState(0);
   const [chickenServing, setChickenServing] = useState(0);
   const [cheeseServing, setCheeseServing] = useState(0);
+  const [fishServing, setFishServing] = useState(0);
   const [milkServing, setMilkServing] = useState(0);
   const [foodWaste, setFoodWaste] = useState(0);
 
   const handleSurveySubmit = (): void => {
     // Process survey responses, e.g., send them to a server
-    console.log('Survey Responses:', {
-      beefServing,
-      lambServing,
-      porkServing,
-      chickenServing,
-      cheeseServing,
-      milkServing,
-      foodWaste,
-    });
-
-    navigation.navigate('EnergyForum');
+    if (foodEntry != null) {
+      const newEntry: FoodEntry = {
+        _id: foodEntry._id,
+        user_id: foodEntry.user_id,
+        carbon_emissions: foodEntry.carbon_emissions,
+        date: foodEntry.date,
+        beef: beefServing,
+        lamb: lambServing,
+        pork: porkServing,
+        chicken: chickenServing,
+        fish: fishServing,
+        cheese: cheeseServing,
+        milk: milkServing,
+        food_waste: foodWaste,
+      };
+      void FoodAPI.updateFood(newEntry).then(() => {
+        navigation.navigate('EnergyForum');
+      });
+    }
   };
+  useEffect(() => {
+    if (foodEntry != null) {
+      setBeefServing(foodEntry.beef);
+      setLambServing(foodEntry.lamb);
+      setPorkServing(foodEntry.pork);
+      setChickenServing(foodEntry.chicken);
+      setFishServing(foodEntry.fish);
+      setCheeseServing(foodEntry.cheese);
+    }
+  }, [foodEntry]);
+
+  useEffect(() => {
+    void FoodAPI.getFoodMetricForToday().then((res) => {
+      if (res != null) {
+        setFoodEntry(res);
+      }
+    });
+  }, [loaded]);
 
   if (!loaded) {
     return <></>;