Merge pull request #36 from utmgdsc/feature/58/BottomNavigation

nav bar finally added
utmgdsc · Nov 30, 2023 · 6c0c9b8 · 6c0c9b8
2 parents 80b8c7c + 5ecfd82
commit 6c0c9b8
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 42 deletions.
diff --git a/frontend/assets/colorConstants.tsx b/frontend/assets/colorConstants.tsx
@@ -14,4 +14,4 @@ const Colors = {
   BLUE: 'blue',
 };
 
-export default Colors;
+export default Colors;
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "@react-native-firebase/auth": "^18.6.0",
     "@react-native-firebase/firestore": "^18.6.0",
     "@react-native-picker/picker": "^2.5.1",
+    "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.15",
     "@react-navigation/stack": "^6.3.19",
@@ -68,7 +69,7 @@
     "eslint-plugin-react-native": "^4.1.0",
     "prettier": "3.0.3",
     "react-native-svg-transformer": "^1.1.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.3.2"
   },
   "private": true
 }
diff --git a/frontend/src/APIs/FLASK_API.tsx b/frontend/src/APIs/FLASK_API.tsx
@@ -1,6 +1,6 @@
 import axios from "axios";
 import firebaseService from "../utilities/firebase";
-const FLASK_LOCAL_ADDRESS: string = "http://10.0.10.10:6050";
+const FLASK_LOCAL_ADDRESS: string = "http://100.112.45.130:6050";
 
 // Function to get the Firebase authentication token
 const getFirebaseAuthToken = async (): Promise<string | null> => {

diff --git a/frontend/src/components/appNavigation.tsx b/frontend/src/components/appNavigation.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import type { RootStackParamList } from './types';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { Fontisto, AntDesign } from '@expo/vector-icons';
+import Colors from '../../assets/colorConstants';
 import HomeScreen from '../screens/home';
 import LogInScreen from '../screens/login';
 import SignUpScreen from '../screens/signup';
 import DashBoardScreen from '../screens/dashboard';
 import Forum from '../screens/forum';
-import CommunityHub from '../screens/communityHub';
 import FoodForum from '../screens/Food/foodForum';
 import EnergyForum from '../screens/Energy/energyForum';
 import TransportationForum from '../screens/Transportation/transportationForum';
@@ -17,34 +19,118 @@ import TransportationHistory from '../screens/Transportation/transportationHisto
 import EnergyHistory from '../screens/Energy/energyHistory';
 import EnergyEntryEdit from '../screens/Energy/energyEntryEdit';
 import FoodEntryEdit from '../screens/Food/foodEntryEdit';
+import SettingsScreen from '../screens/settings';
+import YourForms from '../screens/yourForms';
+import CommunityHub from '../screens/communityHub';
 
-const Stack = createNativeStackNavigator<RootStackParamList>();
+const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
 
 const AppNavigation = (): JSX.Element => {
   return (
+
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{ headerShown: false }}>
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="LogIn" component={LogInScreen} />
-        <Stack.Screen name="SignUp" component={SignUpScreen} />
-        <Stack.Screen name="DashBoard" component={DashBoardScreen} />
-        <Stack.Screen name="Forum" component={Forum} />
-        <Stack.Screen name="CommunityHub" component={CommunityHub} />
-
-        <Stack.Screen name="TransportationForum" component={TransportationForum} />
-        <Stack.Screen name="TransportationEntryEdit" component={TransportationEntryEdit} />
-        <Stack.Screen name="TransportationHistory" component={TransportationHistory} />
-
-        <Stack.Screen name="FoodForum" component={FoodForum} />
-        <Stack.Screen name="FoodEntryEdit" component={FoodEntryEdit} />
-        <Stack.Screen name="FoodHistory" component={FoodHistory} />
-
-        <Stack.Screen name="EnergyForum" component={EnergyForum} />
-        <Stack.Screen name="EnergyEntryEdit" component={EnergyEntryEdit} />
-        <Stack.Screen name="EnergyHistory" component={EnergyHistory} />
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="Settings" component={SettingsScreen} />
+        <Stack.Screen name="MainApp" component={MainAppTabs} options={{ headerShown: false }} />
+
+        <Stack.Screen name="Forum" component={Forum} options={{ headerShown: false }}  />
+
+        <Stack.Screen name="TransportationForum" component={TransportationForum} options={{ headerShown: false }}/>
+        <Stack.Screen name="TransportationEntryEdit" component={TransportationEntryEdit} options={{ headerShown: false }} />
+        <Stack.Screen name="TransportationHistory" component={TransportationHistory} options={{ headerShown: false }} />
+
+        <Stack.Screen name="FoodForum" component={FoodForum} options={{ headerShown: false }} />
+        <Stack.Screen name="FoodEntryEdit" component={FoodEntryEdit} options={{ headerShown: false }}/>
+        <Stack.Screen name="FoodHistory" component={FoodHistory} options={{ headerShown: false }} />
+
+        <Stack.Screen name="EnergyForum" component={EnergyForum} options={{ headerShown: false }} />
+        <Stack.Screen name="EnergyEntryEdit" component={EnergyEntryEdit} options={{ headerShown: false }} />
+        <Stack.Screen name="EnergyHistory" component={EnergyHistory} options={{ headerShown: false }} />
+
       </Stack.Navigator>
-    </NavigationContainer>
+  </NavigationContainer>
+  );
+}      
+
+const MainAppTabs = (): JSX.Element => {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        tabBarActiveTintColor: Colors.LIGHTFGREEN,
+        tabBarInactiveTintColor: Colors.WHITE,
+        tabBarStyle: {
+          backgroundColor: Colors.DARKGREEN,
+        },
+      }}
+    >
+
+      <Tab.Screen name="Dashboard" component={DashboardStack}
+        options={{
+          headerShown: false,
+          tabBarIcon: ({ focused }) => (
+            <Ionicons
+              name={'home-sharp'}
+              size={24}
+              style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }}
+            />
+          ),
+        }}
+      />
+      <Tab.Screen name="SettingsPage" component={SettingsScreen}
+        options={{
+          title: 'Settings',
+          headerStyle: { backgroundColor: Colors.DARKGREEN },
+          headerTintColor: '#fff',
+          headerTitleStyle: { fontWeight: 'bold' },
+          tabBarIcon: ({ focused }) => (
+            <Ionicons
+              name={'settings'}
+              size={24}
+              style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }}
+            />
+          ),
+        }} />
+      <Tab.Screen name="YourForms" component={YourForms}
+        options={{
+          title: 'My Forms',
+          headerStyle: { backgroundColor: Colors.DARKGREEN },
+          headerTintColor: '#fff',
+          headerTitleStyle: { fontWeight: 'bold' },
+          tabBarIcon: ({ focused }) => (
+            <AntDesign name="form" size={24} color="black" style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }} />
+          ),
+        }} />
+      <Tab.Screen name="CommunityHub" component={CommunityHub}
+        options={{
+          title: 'Community Hub',
+          headerStyle: { backgroundColor: Colors.DARKGREEN },
+          headerTintColor: '#fff',
+          headerTitleStyle: { fontWeight: 'bold' },
+          tabBarIcon: ({ focused }) => (
+            <Fontisto name="world-o" size={24} color="black" style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }} />
+          ),
+        }} />
+    </Tab.Navigator>
   );
 };
 
+const DashboardStack = (): React.JSX.Element => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="DashBoard"
+      component={DashBoardScreen}
+      options={{
+        title: 'Dashboard',
+        headerStyle: { backgroundColor: Colors.DARKGREEN },
+        headerTintColor: '#fff',
+        headerTitleStyle: { fontWeight: 'bold' },
+      }}
+    />
+  </Stack.Navigator>
+);
+
 export default AppNavigation;
diff --git a/frontend/src/components/types.tsx b/frontend/src/components/types.tsx
@@ -4,6 +4,7 @@ export interface RootStackParamList {
   Home: undefined;
   LogIn: undefined;
   SignUp: undefined;
+  MainApp: { screen: string } | undefined;
   DashBoard: undefined;
   Forum: undefined;
   FoodForum: undefined;
@@ -12,7 +13,7 @@ export interface RootStackParamList {
   TransportationForum: undefined;
   FoodHistory: undefined;
   TransportationHistory: undefined;
-  [key: string]: undefined;
+  [key: string]: { screen: string } | undefined
 }
 
 export interface GoogleSVGType {

diff --git a/frontend/src/screens/dashboard.tsx b/frontend/src/screens/dashboard.tsx
@@ -109,16 +109,6 @@ export default function DashBoardScreen(): JSX.Element {
           </TouchableOpacity>
         </View>
 
-        <View style={styles.widgetBoarder}>
-          <TouchableOpacity
-            onPress={() => {
-              navigation.navigate('Settings');
-            }}
-          >
-            <WidgetBox title="Settings" content={"Access User Settings"} />
-          </TouchableOpacity>
-        </View>
-
       </View>
     </View>
   );

diff --git a/frontend/src/screens/login.tsx b/frontend/src/screens/login.tsx
@@ -2,7 +2,6 @@ import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { useFonts } from 'expo-font';
 import type { RootStackParamList } from '../components/types';
 import type { StackNavigationProp } from '@react-navigation/stack';
-import { useNavigation } from '@react-navigation/native';
 import firebaseService from '../utilities/firebase';
 import Colors from '../../assets/colorConstants';
 import { Formik } from 'formik';
@@ -12,6 +11,11 @@ import { UsersAPI } from '../APIs/UsersAPI';
 
 export type StackNavigation = StackNavigationProp<RootStackParamList>;
 
+
+export interface LoginScreenProps {
+  navigation: StackNavigationProp<RootStackParamList, 'LogIn'>; // Specify the type for the navigation prop
+};
+
 interface ILogInFields {
   email: string;
   password: string;
@@ -21,16 +25,14 @@ const LogInSchema = Yup.object().shape({
   password: Yup.string().required('Password is required'),
 });
 
-export default function LogInScreen(): JSX.Element {
-  const navigation = useNavigation<StackNavigation>();
-
+export default function LogInScreen({ navigation }: LoginScreenProps): JSX.Element {
   const handleLogIn = async (fields: ILogInFields): Promise<void> => {
     const { email, password } = fields;
     try {
       await firebaseService.signInUser(email, password).then(async () => {
         await UsersAPI.GetLoggedInUser().then((res) => {
           if (res != null) {
-            navigation.navigate('DashBoard');
+            navigation.navigate('MainApp', { screen: 'DashBoard' });
           } else {
             console.warn('User was not logged in: ' + res);
           }

diff --git a/frontend/src/screens/settings.tsx b/frontend/src/screens/settings.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Colors from '../../assets/colorConstants';
+
+
+export default function SettingsScreen(): JSX.Element {
+  return (
+    <View style={styles.container}>
+        <Text> Welcome to Settings </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.LIGHTFGREEN,
+  },
+
+});
diff --git a/frontend/src/screens/yourForms.tsx b/frontend/src/screens/yourForms.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, StyleSheet, ScrollView } from 'react-native';
+import { useFonts } from 'expo-font';
+import Colors from '../../assets/colorConstants';
+
+export default function YourForms(): JSX.Element {
+  const [loaded] = useFonts({
+    Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'),
+    Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'),
+  });
+
+  if (!loaded) {
+    return <></>;
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+        <Text> Complete your Food 🍉 Quiz! </Text>
+        <Text> Complete your Energy 💡 Quiz! </Text>
+        <Text> Complete your Transportation 🚗 Quiz! </Text>
+      </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexGrow: 1,
+    backgroundColor: Colors.LIGHTFGREEN,
+  },
+
+});