Merge branch 'main' of https://github.com/SCCapstone/CoolwithAnything

SCCapstone · Apr 22, 2024 · fe19b4e · fe19b4e
2 parents f0d14b7 + cbd7022
commit fe19b4e
Show file tree

Hide file tree

Showing 25 changed files with 765 additions and 368 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,7 @@
 module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['babel-preset-expo',],
     plugins: [
       'react-native-reanimated/plugin',
     ],

diff --git a/components/BDCelebration.js b/components/BDCelebration.js
@@ -1,67 +1,16 @@
 import React from 'react';
 import { View, Text, Image } from 'react-native';
-import { format, parse } from 'date-fns'; // Import parse along with format
 import getStyles from '../styles/HomeScreenStyles';
 import { useTheme } from '../services/ThemeContext';
 import CakeIcon from '../assets/cake-icon.png';
 
-const BirthdayCelebration = ({ userName, birthday }) => {
-  const today = new Date();
-  const todayStr = format(today, 'MM/dd');
+const BirthdayCelebration = ({ userName, isBirthday }) => {
   const { theme } = useTheme();
   const styles = getStyles(theme);
 
-  console.log("Birthday(BDC): ", birthday);
-  let userBirthdayStr = '';
-  let isUserBirthdayToday = false;
-
-  const parseBirthday = (birthdayString) => {
-    try {
-      // Detect the separator used in the date string (assuming "/" or "-" as common separators)
-      const separator = birthdayString.includes('/') ? '/' : birthdayString.includes('-') ? '-' : null;
-
-      if (!separator) {
-        throw new Error('Unsupported date format or separator');
-      }
-
-      const parts = birthdayString.split(separator);
-
-      if (parts.length !== 3) {
-        throw new Error('Invalid date format');
-      }
-
-      // Extract the month, day, and year assuming a consistent order
-      let [month, day, year] = parts.map(part => parseInt(part, 10));
-
-      // Basic validation of the date components
-      if (isNaN(month) || month < 1 || month > 12 || isNaN(day) || day < 1 || day > 31 || isNaN(year) || year < 1000 || year > 9999) {
-        throw new Error('Invalid date components');
-      }
-
-      // Adjust for JavaScript's zero-based month indexing
-      const parsedDate = new Date(year, month - 1, day);
-
-      if (isNaN(parsedDate.getTime())) {
-        throw new Error('Invalid date value');
-      }
-
-      return format(parsedDate, 'MM/dd');
-    } catch (error) {
-      console.error('Error parsing date:', error.message);
-      return '';
-    }
-  };
-
-
-
-  if (birthday) {
-    userBirthdayStr = parseBirthday(birthday);
-    isUserBirthdayToday = todayStr === userBirthdayStr;
-  }
-
   return (
     <View style={styles.container}>
-      {isUserBirthdayToday && (
+      {isBirthday && (
         <>
           <Text style={styles.greeting}>Happy Birthday, {userName}!</Text>
           <Image source={CakeIcon} style={styles.icon} />

diff --git a/components/Calendar.js b/components/Calendar.js
@@ -21,6 +21,7 @@ import {
   isDate,
   parseISO,
   isSameMonth,
+  isToday,
 } from "date-fns";
 import { fetchTasksForUser, deleteTask } from "../services/AuthAPI";
 import getStyles from "../styles/HomeScreenStyles";
@@ -33,7 +34,7 @@ import { FontAwesome5 } from "@expo/vector-icons";
 
 const days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 
-const Calendar = ({ userID, navigation, birthday }) => {
+const Calendar = ({ userID, navigation, birthday, userName }) => {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [currentMonth, setCurrentMonth] = useState(new Date());
   const [modalVisible, setModalVisible] = useState(false);
@@ -191,65 +192,50 @@ const Calendar = ({ userID, navigation, birthday }) => {
     );
   };
 
-  const renderDays = () => {
-    // Start from the first day of the week that includes the first day of the current month
-    const startDay = startOfWeek(startOfMonth(currentMonth));
+const renderDays = () => {
+  const startDay = startOfWeek(startOfMonth(currentMonth));
+  const endDay = endOfWeek(endOfMonth(currentMonth));
+  const daysArray = eachDayOfInterval({ start: startDay, end: endDay });
 
-    // End at the last day of the week that includes the last day of the current month
-    const endDay = endOfWeek(endOfMonth(currentMonth));
+  return daysArray.map((day, index) => {
+    const formattedDate = format(day, "yyyy-MM-dd");
+    const dayTasks = tasks.filter(task => format(parseISO(task.date), "yyyy-MM-dd") === formattedDate);
+    const uniqueTaskTypes = [...new Set(dayTasks.map(task => task.type))];
 
-    // Generate an array of days to be displayed
-    const daysArray = eachDayOfInterval({ start: startDay, end: endDay });
-
-    return daysArray.map((day, index) => {
-      // Format the day for comparison with task dates
-      const formattedDate = format(day, "yyyy-MM-dd");
-
-      // Filter tasks to find those for the current day
-      const dayTasks = tasks.filter(
-        (task) => format(parseISO(task.date), "yyyy-MM-dd") === formattedDate
-      );
-
-      // Identify unique task types for the day
-      const uniqueTaskTypes = [...new Set(dayTasks.map((task) => task.type))];
-
-      return (
-        // In the component rendering (assuming 'day' is already a Date object)
-        <TouchableOpacity
-          key={index}
+    return (
+      <TouchableOpacity
+        key={index}
+        style={[
+          styles.dayItem,
+          format(day, "MM-dd-yyyy") === format(selectedDate, "MM-dd-yyyy") ? styles.selectedDay :
+          isBirthday(day) ? styles.birthdayDay :
+          isToday(day) ? styles.todayDay : null, // Apply the todayDay style if it's today
+        ]}
+        onPress={() => onDateSelect(day)}
+      >
+        <Text
           style={[
-            styles.dayItem,
-            format(day, "MM-dd-yyyy") === format(selectedDate, "MM-dd-yyyy")
-              ? styles.selectedDay
-              : isBirthday(day)
-              ? styles.birthdayDay
-              : null,
+            styles.dayText,
+            isSameMonth(day, currentMonth) ? {} : { color: "#cccccc" },
           ]}
-          onPress={() => onDateSelect(day)}
         >
-          <Text
-            style={[
-              styles.dayText,
-              isSameMonth(day, currentMonth) ? {} : { color: "#cccccc" }, // Grey out the days that are not in the current month
-            ]}
-          >
-            {format(day, "d")}
-          </Text>
-          <View style={styles.indicatorContainer}>
-            {uniqueTaskTypes.map((type, typeIndex) => (
-              <View
-                key={typeIndex}
-                style={[
-                  styles.taskIndicator,
-                  { backgroundColor: taskTypeColors[type] || "#ccc" },
-                ]}
-              />
-            ))}
-          </View>
-        </TouchableOpacity>
-      );
-    });
-  };
+          {format(day, "d")}
+        </Text>
+        <View style={styles.indicatorContainer}>
+          {uniqueTaskTypes.map((type, typeIndex) => (
+            <View
+              key={typeIndex}
+              style={[
+                styles.taskIndicator,
+                { backgroundColor: taskTypeColors[type] || "#ccc" },
+              ]}
+            />
+          ))}
+        </View>
+      </TouchableOpacity>
+    );
+  });
+};
   useEffect(() => {
     const fetchTasks = async () => {
       try {
@@ -288,7 +274,7 @@ const Calendar = ({ userID, navigation, birthday }) => {
   return (
     <View style={styles.calendarContainer}>
       {/* Fixed Task Type Indicators View */}
-      <View style={styles.typeIndicatorsContainer}>
+      <View style={styles.indicatorContainer}>
         {Object.entries(taskTypeColors).map(([type, color]) => (
           <View key={type} style={styles.typeIndicatorWrapper}>
             <View style={[styles.typeIndicator, { backgroundColor: color }]}>
@@ -337,6 +323,7 @@ const Calendar = ({ userID, navigation, birthday }) => {
         selectedDate={selectedDate}
         navigation={navigation}
         isBirthday={isBirthday(selectedDate)}
+        userName={userName}
       />
 
       {/* Task Details and Actions Modal */}

diff --git a/components/DailyView.js b/components/DailyView.js
@@ -11,10 +11,11 @@ import { format, parseISO, startOfDay, endOfDay } from "date-fns";
 import { deleteTask, fetchTasksForUser } from "../services/AuthAPI";
 import eventEmitter from "./EventEmitter";
 import { Fontisto, MaterialCommunityIcons } from "@expo/vector-icons";
-import { useTheme } from '../services/ThemeContext';
+import { useTheme } from "../services/ThemeContext";
 import getStyles from "../styles/DailyViewStyles";
+import BirthdayCelebration from "./BDCelebration";
 
-const DailyView = ({ userID, selectedDate, navigation, isBirthday }) => {
+const DailyView = ({ userID, selectedDate, navigation, isBirthday, userName }) => {
   const [tasks, setTasks] = useState([]);
   const { theme } = useTheme();
   const styles = getStyles(theme);
@@ -85,10 +86,14 @@ const DailyView = ({ userID, selectedDate, navigation, isBirthday }) => {
         Daily Tasks for {format(selectedDate, "PPP")}
       </Text>
       {isBirthday && (
-        <Text style={{ fontSize: 30, alignSelf: "center" }}>
-          🎉 Happy Birthday! 🎉
+        <Text style={styles.BirthdayCelebration}>
+          🎉 Your Birthday! 🎉
         </Text>
       )}
+      <BirthdayCelebration
+        userName={userName}
+        isBirthday={isBirthday}
+      />
       <FlatList
         data={tasks}
         keyExtractor={(item) => item.id}
@@ -99,7 +104,7 @@ const DailyView = ({ userID, selectedDate, navigation, isBirthday }) => {
             </TouchableOpacity>
             {/* {item.showOptions && (
               <> */}
-                {/* <TouchableOpacity
+            {/* <TouchableOpacity
                   onPress={() => toggleCheckmark(item.id)}
                   style={[styles.checkmarkButton, { marginLeft: "58%" }]}
                 >
@@ -117,13 +122,13 @@ const DailyView = ({ userID, selectedDate, navigation, isBirthday }) => {
                     />
                   )}
                 </TouchableOpacity> */}
-                <TouchableOpacity
-                  style={styles.deleteButton}
-                  onPress={() => onTaskDelete(item.id)}
-                >
-                  <Text style={styles.deleteButtonText}>Delete</Text>
-                </TouchableOpacity>
-              {/* </>
+            <TouchableOpacity
+              style={styles.deleteButton}
+              onPress={() => onTaskDelete(item.id)}
+            >
+              <Text style={styles.deleteButtonText}>Delete</Text>
+            </TouchableOpacity>
+            {/* </>
             )} */}
             {/* <TouchableOpacity onPress={() => toggleDisplayOptions(item.id)} style={{}}>
               <MaterialCommunityIcons

diff --git a/components/NumberInput.js b/components/NumberInput.js
@@ -1,18 +1,24 @@
 import React from 'react';
 import { TextInput, View, StyleSheet } from 'react-native';
-import styles from '../styles/BiometricBoxesStyle';
+import styles from '../styles/BiometricScreenStyle';
+
+const NumberInput = ({ value, onChangeText, placeholder, style }) => {
+  // Convert the number to a string when passing to TextInput, handle undefined or null values
+  const handleTextChange = (text) => {
+    const number = parseInt(text, 10);
+    onChangeText(number || number === 0 ? number : ''); // Ensure to handle the zero condition
+  };
+
+  const stringValue = value === undefined || value === null || value === '' ? '' : value.toString();
 
-const NumberInput = ({ value, onChangeText, placeholder }) => {
   return (
-    <View style={styles.container}>
       <TextInput
-        style={styles.input}
+        style={[styles.input, style]}
         placeholder={placeholder}
-        value={value}
-        onChangeText={onChangeText}
+        value={stringValue} // Check if value is undefined or null before converting to string
+        onChangeText={handleTextChange}
         keyboardType="numeric"
       />
-    </View>
   );
 };
 

diff --git a/components/SubmitButton.js b/components/SubmitButton.js
@@ -5,7 +5,7 @@ import styles from '../styles/RegisterButtonStyle';
 const SubmitButton = ({ onPress }) => {
   return (
     <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Text style={styles.buttonText}>Add Bio</Text>
+      <Text style={styles.buttonText}>Submit</Text>
     </TouchableOpacity>
   );
 };

diff --git a/navigators/MainNavigator.js b/navigators/MainNavigator.js
@@ -19,6 +19,7 @@ import TaskDetailScreen from "../screens/TaskDetailScreen";
 import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { ActivityIndicator } from "react-native";
 import LoadingScreen from "../screens/LoadingScreen";
+import AdminPanel from "../screens/AdminPanel";
 
 const Stack = createNativeStackNavigator();
 
@@ -156,6 +157,11 @@ function MainNavigator({ isLoggedIn }) {
           component={EditPaymentMethodsScreen}
           options={{ headerShown: false }}
         />
+        <Stack.Screen
+          name = "AdminPanel"
+          component = {AdminPanel}
+          options = {{ headerShown: false }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );