diff --git a/README.md b/README.md index 0fe53cf..2c66118 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# # Life React +# Life React LifeReact is a lifestyle app that allows users to keep track of your calorie intake by providing a persistent, interactive food diary. All nutritional information is pulled directly from the USDA to ensure a high degree of accuracy. Users can also view dynamic updates on their progress towards their calorie goal from the home screen. diff --git a/Screens/AutoAuth.js b/Screens/AutoAuth.js index 0327322..83d0234 100644 --- a/Screens/AutoAuth.js +++ b/Screens/AutoAuth.js @@ -48,6 +48,7 @@ export default function AutoAuth({ navigation: { navigate } }) { } }; + // Rendering AutoAuth component return ( { const navigation = useNavigation(); const {food, meal} = route.params @@ -26,8 +23,8 @@ const FoodDetails = ({route}) => { routes: [{ name: 'Diary' }], }); } + const RemoveFood = () =>{ - let index = meal.indexOf(food) meal.splice(index,1) console.log(meal) @@ -37,6 +34,7 @@ const FoodDetails = ({route}) => { }); } + // Rendering EntryDetails component return( {food.description} @@ -97,48 +95,40 @@ const FoodDetails = ({route}) => { ) } +// Defining styles using StyleSheet const styles = StyleSheet.create({ container: { flex: 1, marginTop: 8, backgroundColor: COLORS.green - }, - -textRight:{ - marginRight: '5%', - fontSize: 20 -}, -textInputRight: { - backgroundColor: COLORS.cream, - marginRight: '5%', -}, - -textLeft:{ + textRight:{ + marginRight: '5%', + fontSize: 20 + }, + textInputRight: { + backgroundColor: COLORS.cream, + marginRight: '5%', + }, + textLeft:{ flex:1, paddingLeft: "5%", fontWeight:"bold", fontSize: 20 -}, - -flexrow:{ - + }, + flexrow:{ flexDirection: 'row', paddingTop:10, paddingBottom: 10 -}, -tab:{ - backgroundColor: COLORS.blue, - borderRadius: 100, - marginTop:30, - height: 30, - width: '50%', - alignSelf:'center' - - -} - - }); - -export default FoodDetails + }, + tab:{ + backgroundColor: COLORS.blue, + borderRadius: 100, + marginTop:30, + height: 30, + width: '50%', + alignSelf:'center' + } +}); +export default FoodDetails \ No newline at end of file diff --git a/Screens/FoodDetails.js b/Screens/FoodDetails.js index ee85750..97f14cf 100644 --- a/Screens/FoodDetails.js +++ b/Screens/FoodDetails.js @@ -6,8 +6,6 @@ import { DiaryContext } from '../Contexts/DiaryContext'; import { StackActions, useNavigation} from '@react-navigation/native'; import { COLORS } from '../constants/colors.js' - - const FoodDetails = ({route, navigation}) => { const {food, meal} = route.params const [servings, setServings] = useState(1); @@ -27,8 +25,9 @@ const FoodDetails = ({route, navigation}) => { index: 0, routes: [{ name: 'Diary' }], }); - //navigation.navigate("Diary") } + + // Rendering FoodDetails component return( {food.description} @@ -80,35 +79,31 @@ const FoodDetails = ({route, navigation}) => { ) } +// Defining styles using StyleSheet const styles = StyleSheet.create({ - container: { - flex: 1, - marginTop: 8, - backgroundColor: COLORS.green - - }, - + container: { + flex: 1, + marginTop: 8, + backgroundColor: COLORS.green + }, textRight:{ - marginRight: '5%', - fontSize: 20 + marginRight: '5%', + fontSize: 20 }, textInputRight: { backgroundColor: COLORS.cream, marginRight: '5%', - }, - + }, textLeft:{ - flex:1, - paddingLeft: "5%", - fontWeight:"bold", - fontSize: 20 + flex:1, + paddingLeft: "5%", + fontWeight:"bold", + fontSize: 20 }, - - flexrow:{ - - flexDirection: 'row', - paddingTop:10, - paddingBottom: 10 + flexrow:{ + flexDirection: 'row', + paddingTop:10, + paddingBottom: 10 }, tab:{ backgroundColor: COLORS.blue, @@ -117,11 +112,8 @@ const styles = StyleSheet.create({ height: 30, width: '50%', alignSelf:'center' - - -} - - }); + } +}); export default FoodDetails diff --git a/Screens/FoodSearchScreen.js b/Screens/FoodSearchScreen.js index 5681b5a..e7713d4 100644 --- a/Screens/FoodSearchScreen.js +++ b/Screens/FoodSearchScreen.js @@ -5,13 +5,11 @@ import fetch from 'node-fetch'; import SearchResult from '../components/SearchResult'; import { COLORS } from '../constants/colors.js' - const FoodSearchScreen = ({route}) => { const [results, setResults ] = useState([]) const query = useRef("") const {meal} = route.params - const getUSDA = async (data) => { let dataNoSpace = data.trim().replace(' ','%20') if(dataNoSpace != ''){ @@ -60,10 +58,9 @@ const Search = ({foods}) =>{ ) - - } +// Defining styles using StyleSheet const styles = StyleSheet.create({ default:{ backgroundColor: COLORS.green, @@ -78,6 +75,4 @@ const styles = StyleSheet.create({ } }) - - export default FoodSearchScreen \ No newline at end of file diff --git a/Screens/Home.js b/Screens/Home.js index bcccc05..04c6f74 100644 --- a/Screens/Home.js +++ b/Screens/Home.js @@ -9,12 +9,11 @@ import { COLORS } from '../constants/colors.js' import { useFocusEffect} from '@react-navigation/native'; import CalorieTracker from "../components/CalorieGoal"; - - - +// Define and export the Home component export default function Home({ navigation }) { let uid - let cal + + // Defining and initializing state variables const [name, setName] = React.useState(""); const [type, setType] = React.useState("Email"); const [calorieGoal, setCalorieGoal] = React.useState(2000); @@ -37,6 +36,17 @@ export default function Home({ navigation }) { } const getDb = async () => { uid = await AsyncStorage.getItem("uid"); + + // Getting the user's diary from the getDiary function + let newDiary = await getDiary() + + // Setting the state variables with the retrieved data + setDiary(newDiary); + setCalorieGoal(2000) + setCaloriesConsumed(newDiary.getEntry(new Date().toDateString()).getCalorieTotal()) + console.log("UUID: " + uid) + + // Getting the user details from the database try{ let user = await getDoc(doc(db, "users", uid)); setType(user.data().signinType || "Email"); @@ -54,12 +64,16 @@ export default function Home({ navigation }) { } }; + + // A function to navigate to another screen const nav = (name) =>{ navigation.reset({ index: 0, routes: [{ name: name }], }); } + + // Function to log out the user and revoke the authentication token const log = async () => { if (type == "Email") { await AsyncStorage.removeItem("uid"); @@ -76,6 +90,7 @@ export default function Home({ navigation }) { } }; + // Rendering Home component return ( Home @@ -86,6 +101,7 @@ export default function Home({ navigation }) { ); } +// Defining styles using StyleSheet const styles = StyleSheet.create({ container: { flex: 1, diff --git a/Screens/Loading.js b/Screens/Loading.js index 404c282..25eb3b7 100644 --- a/Screens/Loading.js +++ b/Screens/Loading.js @@ -1,3 +1,6 @@ +/** + * Loading screen to display when the app is launched + */ import React, { useEffect } from "react"; import AsyncStorage from "@react-native-async-storage/async-storage"; import { View, ActivityIndicator, Text, Image, StyleSheet } from "react-native"; @@ -7,12 +10,16 @@ const Loading = ({ navigation}) => { useEffect(() => { getUser(); }); + + // A function to navigate to another screen const nav = (name) =>{ navigation.reset({ index: 0, routes: [{ name: name }], }); } + + // Function to get the user ID from async storage and navigate to another screen const getUser = async () => { let uid = await AsyncStorage.getItem("uid"); console.log("loading screen id:" + uid) @@ -20,6 +27,7 @@ const Loading = ({ navigation}) => { else nav('Auth'); }; + // Rendering Loading component return ( @@ -29,6 +37,7 @@ const Loading = ({ navigation}) => { ); }; +// Defining styles using StyleSheet const styles = StyleSheet.create({ container: { flex: 1, diff --git a/Screens/MacroNutrients.js b/Screens/MacroNutrients.js index b05f6a1..9eb0594 100644 --- a/Screens/MacroNutrients.js +++ b/Screens/MacroNutrients.js @@ -1,16 +1,13 @@ - import { View, Text, StyleSheet,ScrollView} from 'react-native'; import { COLORS } from '../constants/colors.js' - - +// Create MacroNutrients component const MacroNutrients = ({route}) => { - const {food} = route.params - - + // Retrieving food object from the route params + const {food} = route.params - + // Rendering MacroNutrients component return( Nutrient Overview @@ -49,35 +46,32 @@ const MacroNutrients = ({route}) => { ) } +// Defining styles using StyleSheet const styles = StyleSheet.create({ - container: { - flex: 1, - marginTop: 8, - backgroundColor: COLORS.green + ontainer: { + flex: 1, + marginTop: 8, + backgroundColor: COLORS.green - }, - + }, textRight:{ - marginRight: '5%', - fontSize: 20 + marginRight: '5%', + fontSize: 20 }, textInputRight: { backgroundColor: COLORS.cream, marginRight: '5%', - }, - + }, textLeft:{ - flex:1, - paddingLeft: "5%", - fontWeight:"bold", - fontSize: 20 + flex:1, + paddingLeft: "5%", + fontWeight:"bold", + fontSize: 20 }, - flexrow:{ - - flexDirection: 'row', - paddingTop:10, - paddingBottom: 10 + flexDirection: 'row', + paddingTop:10, + paddingBottom: 10 }, tab:{ backgroundColor: COLORS.blue, @@ -86,11 +80,7 @@ const styles = StyleSheet.create({ height: 30, width: '50%', alignSelf:'center' - - -} - - }); - -export default MacroNutrients + } +}); +export default MacroNutrients \ No newline at end of file diff --git a/Screens/RecoverPassword.js b/Screens/RecoverPassword.js index 9ae59c7..7d60692 100644 --- a/Screens/RecoverPassword.js +++ b/Screens/RecoverPassword.js @@ -1,3 +1,4 @@ +// Screen that prompts the user to enter their email and reset their password import React from "react"; import {View, StyleSheet, TextInput, Text, Button, Alert } from "react-native"; import { COLORS } from "../constants/colors"; @@ -7,8 +8,10 @@ import { auth } from "../firebase"; export default function RecoverPassword({ navigation }) { + // Initialize state for user's email const [providedEmail, setProvidedEmail] = React.useState(null); + // This function is called when the user enters their email const emailChangeHandler = (val) => { setProvidedEmail(val); } @@ -30,7 +33,7 @@ export default function RecoverPassword({ navigation }) { }); } - + // Rendering RecoverPassword component return ( Please enter your email. @@ -43,9 +46,9 @@ export default function RecoverPassword({ navigation }) {