Merge branch 'main' into feature/80/uitweaks

utmgdsc · Dec 18, 2023 · b6fc413 · b6fc413
2 parents bf1c7d8 + 1641949
commit b6fc413
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 17 deletions.
diff --git a/frontend/src/screens/Energy/energyEntryEdit.tsx b/frontend/src/screens/Energy/energyEntryEdit.tsx
@@ -47,7 +47,7 @@ export default function EnergyEntryEdit(): JSX.Element {
         household: user.household,
       };
       void EnergyAPI.updateEnergy(newEntry).then(() => {
-        navigation.navigate('DashBoard');
+        navigation.navigate('YourForms');
       });
     }
   };

diff --git a/frontend/src/screens/Food/foodEntryEdit.tsx b/frontend/src/screens/Food/foodEntryEdit.tsx
@@ -94,7 +94,7 @@ export default function FoodEntryEdit(): JSX.Element {
         food_waste: foodWaste,
       };
       void FoodAPI.updateFood(newEntry).then(() => {
-        navigation.navigate('DashBoard');
+        navigation.navigate('YourForms');
       });
     }
   };

diff --git a/frontend/src/screens/Transportation/transportationEntryEdit.tsx b/frontend/src/screens/Transportation/transportationEntryEdit.tsx
@@ -84,7 +84,7 @@ export default function TransportationEntryEdit(): JSX.Element {
         fuel_efficiency: user.fuel_efficiency,
       };
       void TransportationAPI.updateTransportation(newEntry).then(() => {
-        navigation.navigate('DashBoard');
+        navigation.navigate('YourForms');
       });
     }
   };

diff --git a/frontend/src/screens/communityHub.tsx b/frontend/src/screens/communityHub.tsx
@@ -7,6 +7,7 @@ import {
   ScrollView,
   ImageBackground,
   FlatList,
+  RefreshControl,
 } from 'react-native';
 import { useFonts } from 'expo-font';
 import Colors from '../../assets/colorConstants';
@@ -32,6 +33,7 @@ export default function DashBoardScreen(): JSX.Element {
   const [topUsersMonthly, setMonthlyUsers] = useState<RankUser[]>([]);
   const [, setYearlyUsers] = useState<RankUser[]>([]);
   const [topUsersOverall, setOverallUsers] = useState<RankUser[]>([]);
+  const [refreshing, setRefreshing] = useState(false);
 
   // User's monthly rank
   const userRankMonthly: RankUser = { rank: 89, name: 'Squishyhoshi', footprint: 200, score: 5 };
@@ -175,23 +177,56 @@ export default function DashBoardScreen(): JSX.Element {
   useEffect(() => {
     void UsersAPI.getTopUsers(10).then(async (res) => {
       if (res != null) {
-        if (res.top_monthly_users != null && res.top_yearly_users != null && res.top_overall_users != null) {
+        if (
+          res.top_monthly_users != null &&
+          res.top_yearly_users != null &&
+          res.top_overall_users != null
+        ) {
           setMonthlyUsers(res.top_monthly_users);
           setYearlyUsers(res.top_yearly_users);
           setOverallUsers(res.top_overall_users);
-          console.log(res.top_overall_users)
+          console.log(res.top_overall_users);
         }
       }
     });
   }, [loaded]);
 
+  const onRefresh = (): void => {
+    // Simulate a refresh action (e.g., fetch new data)
+    setRefreshing(true);
+
+    void UsersAPI.getTopUsers(10).then(async (res) => {
+      if (res != null) {
+        if (
+          res.top_monthly_users != null &&
+          res.top_yearly_users != null &&
+          res.top_overall_users != null
+        ) {
+          setMonthlyUsers(res.top_monthly_users);
+          setYearlyUsers(res.top_yearly_users);
+          setOverallUsers(res.top_overall_users);
+          console.log(res.top_overall_users);
+        }
+      }
+    });
+
+    setTimeout(() => {
+      setRefreshing(false); // Set refreshing to false after data is fetched
+    }, 2000); // Simulating a 2-second delay
+  };
+
   if (!loaded) {
     return <></>;
   }
 
   return (
     <View style={styles.container}>
-      <ScrollView style={styles.scrollContainer}>
+      <ScrollView
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor="#0000ff" />
+        }
+        style={styles.scrollContainer}
+      >
         <View style={styles.halfScreen}>
           <ImageBackground
             source={{

diff --git a/frontend/src/screens/dashboard.tsx b/frontend/src/screens/dashboard.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, View, StyleSheet } from 'react-native';
+import { ScrollView, View, StyleSheet, TouchableOpacity, RefreshControl } from 'react-native';
 import { useFonts } from 'expo-font';
 import Colors from '../../assets/colorConstants';
 
@@ -26,6 +26,9 @@ export default function DashBoardScreen(): JSX.Element {
   const [transportationEntry, setTransportationEntry] = useState<TransportationEntry>();
   const [foodEntry, setFoodEntry] = useState<FoodEntry>();
   const [energyEntry, setEnergyEntry] = useState<EnergyEntry>();
+  const [refreshing, setRefreshing] = useState(false);
+  const navigation = useNavigation<StackNavigation>();
+
 
   const [loaded] = useFonts({
     Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'),
@@ -40,29 +43,71 @@ export default function DashBoardScreen(): JSX.Element {
     });
     void TransportationAPI.getTransportationMetricForToday().then((res) => {
       if (res != null) {
-        setTransportationEntry(res)
+        setTransportationEntry(res);
       }
     });
     void FoodAPI.getFoodMetricForToday().then((res) => {
       if (res != null) {
-        setFoodEntry(res)
+        setFoodEntry(res);
       }
     });
     void EnergyAPI.getEnergyMetricForToday().then((res) => {
       if (res != null) {
-        setEnergyEntry(res)
+        setEnergyEntry(res);
       }
     });
   }, [loaded]);
 
-  if (!loaded || user === undefined || transportationEntry === undefined || foodEntry === undefined || energyEntry === undefined) {
+  const onRefresh = (): void => {
+    // Simulate a refresh action (e.g., fetch new data)
+    setRefreshing(true);
+
+    void UsersAPI.GetLoggedInUser().then((res) => {
+      if (res != null) {
+        setUser(res);
+      }
+    });
+    void TransportationAPI.getTransportationMetricForToday().then((res) => {
+      if (res != null) {
+        setTransportationEntry(res);
+      }
+    });
+    void FoodAPI.getFoodMetricForToday().then((res) => {
+      if (res != null) {
+        setFoodEntry(res);
+      }
+    });
+    void EnergyAPI.getEnergyMetricForToday().then((res) => {
+      if (res != null) {
+        setEnergyEntry(res);
+      }
+    });
+
+    setTimeout(() => {
+      setRefreshing(false); // Set refreshing to false after data is fetched
+    }, 2000); // Simulating a 2-second delay
+  };
+
+  if (
+    !loaded ||
+    user === undefined ||
+    transportationEntry === undefined ||
+    foodEntry === undefined ||
+    energyEntry === undefined
+  ) {
     return <></>;
   }
 
   return (
-    <ScrollView style={styles.container}>
+    <ScrollView
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor="#0000ff" />
+      }
+      style={styles.container}
+    >
       <View style={styles.profileWidgetContainer}>
         <View style={styles.widgetBoarder}>
+
             <ProfileWidgetBox
             user={user}
             />
@@ -74,7 +119,6 @@ export default function DashBoardScreen(): JSX.Element {
               <ChallengesWidget challenges={sampleChallenges}/>
           </View>
       </View>
-
     </ScrollView>
   );
 }
@@ -85,8 +129,8 @@ const styles = StyleSheet.create({
     flexGrow: 1,
   },
   profileWidgetContainer: {
-    alignItems: 'center', 
-    marginHorizontal: 10
+    alignItems: 'center',
+    marginHorizontal: 10,
   },
   widgetBoarder: {
     padding: 10,

diff --git a/frontend/src/screens/yourForms.tsx b/frontend/src/screens/yourForms.tsx
@@ -1,5 +1,13 @@
 import React, { useState } from 'react';
-import { Text, StyleSheet, ScrollView, View, TouchableOpacity, Image } from 'react-native';
+import {
+  Text,
+  StyleSheet,
+  ScrollView,
+  View,
+  TouchableOpacity,
+  Image,
+  RefreshControl,
+} from 'react-native';
 import { useFonts } from 'expo-font';
 import Colors from '../../assets/colorConstants';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
@@ -27,6 +35,7 @@ export default function YourForms(): JSX.Element {
   const [transportationEntry, setTransportationEntry] = useState<TransportationEntry>();
   const [foodEntry, setFoodEntry] = useState<FoodEntry>();
   const [energyEntry, setEnergyEntry] = useState<EnergyEntry>();
+  const [refreshing, setRefreshing] = useState(false);
 
   useFocusEffect(
     React.useCallback(() => {
@@ -78,6 +87,31 @@ export default function YourForms(): JSX.Element {
     }, [startDate, endDate]) // Include startDate and endDate in the dependency array
   );
 
+  const onRefresh = (): void => {
+    // Simulate a refresh action (e.g., fetch new data)
+    setRefreshing(true);
+
+    void TransportationAPI.getTransportationMetricForToday().then((res) => {
+      if (res != null) {
+        setTransportationEntry(res);
+      }
+    });
+    void FoodAPI.getFoodMetricForToday().then((res) => {
+      if (res != null) {
+        setFoodEntry(res);
+      }
+    });
+    void EnergyAPI.getEnergyMetricForToday().then((res) => {
+      if (res != null) {
+        setEnergyEntry(res);
+      }
+    });
+
+    setTimeout(() => {
+      setRefreshing(false); // Set refreshing to false after data is fetched
+    }, 2000); // Simulating a 2-second delay
+  };
+
   if (
     !loaded ||
     monthlyData === undefined ||
@@ -89,7 +123,12 @@ export default function YourForms(): JSX.Element {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <ScrollView
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor="#0000ff" />
+      }
+      contentContainerStyle={styles.container}
+    >
       <View style={styles.tabContainer}>
         <TouchableOpacity
           style={styles.tab}