[#6] water intake history

App.js

@@ -2,15 +2,8 @@ import { useEffect } from "react";
 import AppProvider from "./Context/AppProvider";
 
 import Wrapper from "./Wrapper";
-import { dbSetup, testInsert, testQuery } from "./queries/tableSetup";
 
 function App() {
-    useEffect(() => {
-        dbSetup();
-        testInsert();
-        testQuery();
-    }, []);
-
     return (
         <AppProvider>
             <Wrapper />

Wrapper.js

@@ -3,10 +3,30 @@ import BottomNavigator from "./components/BottomNavigator/BottomNavigator";
 import { NavigationContainer } from "@react-navigation/native";
 import { NativeBaseProvider } from "native-base";
 import AppContext from "./Context/AppContext";
+import { dbSetup, createTodayRow, testQuery } from "./queries/tableSetup";
+
+import { checkOnboarding, setGoal, setUnit } from "./utils/asyncStorage";
 
 import React from "react";
 
 function Wrapper() {
+    React.useEffect(() => {
+        dbSetup();
+        async function fetchOnboardingData() {
+            const onboarding = await checkOnboarding();
+            await setGoal();
+            await setUnit();
+
+            // Set onboarding === true to true after testing
+            if (onboarding === "false") {
+                createTodayRow();
+                testQuery();
+            }
+        }
+
+        fetchOnboardingData();
+    }, []);
+
     const { statusBarColor } = React.useContext(AppContext);
     return (
         <NativeBaseProvider>

components/BottomNavigator/BottomNavigator.js

@@ -4,6 +4,10 @@ import Settings from "../../screens/Settings/Settings";
 import AppContext from "../../Context/AppContext";
 ("../../Context/AppProvider");
 import React from "react";
+import History from "../../screens/History/History";
+import { Ionicons } from "@expo/vector-icons";
+import { MaterialIcons } from "@expo/vector-icons";
+
 const Tab = createBottomTabNavigator();
 
 function BottomNavigator() {
@@ -19,10 +23,40 @@ function BottomNavigator() {
                 tabBarStyle: {
                     backgroundColor: bg,
                 },
+                tabBarActiveTintColor: "#0891b2",
             }}
         >
-            <Tab.Screen name="Home" component={Home} />
-            <Tab.Screen name="Settings" component={Settings} />
+            <Tab.Screen
+                name="History"
+                options={{
+                    tabBarIcon: ({ color, size }) => (
+                        <MaterialIcons
+                            name="history"
+                            size={size}
+                            color={color}
+                        />
+                    ),
+                }}
+                component={History}
+            />
+            <Tab.Screen
+                name="Home"
+                options={{
+                    tabBarIcon: ({ color, size }) => (
+                        <Ionicons name="home" size={size} color={color} />
+                    ),
+                }}
+                component={Home}
+            />
+            <Tab.Screen
+                name="Settings"
+                options={{
+                    tabBarIcon: ({ color, size }) => (
+                        <Ionicons name="ios-cog" size={size} color={color} />
+                    ),
+                }}
+                component={Settings}
+            />
         </Tab.Navigator>
     );
 }

components/CustomIntake/CustomIntake.js

@@ -0,0 +1,70 @@
+import React from "react";
+import {
+    Text,
+    View,
+    Heading,
+    Input,
+    KeyboardAvoidingView,
+    ScrollView,
+    Button,
+    Pressable,
+} from "native-base";
+import { Ionicons } from "@expo/vector-icons";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { Keyboard, TouchableWithoutFeedbackComponent } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { TouchableOpacity } from "react-native";
+
+function CustomIntake(props) {
+    const [intake, setIntake] = React.useState("1000");
+    return (
+        <View>
+            <Heading size={"lg"}>Custom Intake</Heading>
+            <View style={{ marginTop: 20, marginBottom: 10 }}>
+                <Input
+                    variant={"filled"}
+                    backgroundColor={"primary.100"}
+                    keyboardType="number-pad"
+                    type={"number"}
+                    value={intake}
+                    size={"2xl"}
+                    onChange={(e) => {
+                        setIntake(e.nativeEvent.text);
+                    }}
+                    color={"primary.600"}
+                    fontSize={"2xl"}
+                    clearTextOnFocus={true}
+                    borderRadius={10}
+                    InputRightElement={
+                        <Text fontSize={"3xl"} color={"primary.600"}>
+                            ml{"   "}
+                        </Text>
+                    }
+                ></Input>
+            </View>
+            <Button
+                bgColor={"primary.400"}
+                _text={{ color: "black" }}
+                _pressed={{ bg: "primary.500" }}
+                variant={"subtle"}
+                endIcon={
+                    <MaterialCommunityIcons
+                        name="water-plus-outline"
+                        size={24}
+                        color="black"
+                    />
+                }
+                size={"lg"}
+                borderRadius={10}
+                onPress={(e) => {
+                    props.increaseProgress(intake);
+                    props.onClose();
+                }}
+            >
+                Add
+            </Button>
+        </View>
+    );
+}
+
+export default CustomIntake;

components/ModifyGoal/ModifyGoal.js

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+    Text,
+    View,
+    Heading,
+    Input,
+    KeyboardAvoidingView,
+    ScrollView,
+    Button,
+    Pressable,
+} from "native-base";
+import { Ionicons } from "@expo/vector-icons";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { Keyboard, TouchableWithoutFeedbackComponent } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { TouchableOpacity } from "react-native";
+import { modifyGoal } from "../../utils/asyncStorage";
+function ModifyGoal(props) {
+    const { goal, handleGoalChange, onClose } = props;
+    const [localGoal, setLocalGoal] = React.useState(goal);
+
+    const setDBGoal = async (goal) => {
+        await modifyGoal(goal);
+    };
+
+    const handleGoalUpdate = () => {
+        Keyboard.dismiss();
+        async function updateGoal() {
+            await setDBGoal(localGoal);
+        }
+        updateGoal();
+        handleGoalChange(localGoal);
+        onClose();
+
+        // handleGoalChange(localGoal);
+    };
+
+    return (
+        <KeyboardAvoidingView bounces={false}>
+            <Heading size={"lg"}>Modify Daily Goal</Heading>
+            <View style={{ marginTop: 20, marginBottom: 10 }}>
+                <Input
+                    variant={"filled"}
+                    backgroundColor={"primary.100"}
+                    keyboardType="number-pad"
+                    type={"number"}
+                    value={localGoal}
+                    size={"2xl"}
+                    onChange={(e) => {
+                        setLocalGoal(e.nativeEvent.text);
+                    }}
+                    color={"primary.600"}
+                    fontSize={"2xl"}
+                    clearTextOnFocus={true}
+                    borderRadius={10}
+                    InputRightElement={
+                        <Text fontSize={"3xl"} color={"primary.600"}>
+                            ml{"   "}
+                        </Text>
+                    }
+                ></Input>
+            </View>
+            <Button
+                bgColor={"primary.400"}
+                _text={{ color: "black" }}
+                _pressed={{ bg: "primary.500" }}
+                variant={"subtle"}
+                endIcon={
+                    <MaterialCommunityIcons
+                        name="water-plus-outline"
+                        size={24}
+                        color="black"
+                    />
+                }
+                size={"lg"}
+                borderRadius={10}
+                onPress={() => {
+                    handleGoalUpdate();
+                }}
+            >
+                Modify Goal
+            </Button>
+        </KeyboardAvoidingView>
+    );
+}
+
+export default ModifyGoal;