styled category task view + edit task

SCCapstone · Apr 23, 2024 · 303c643 · 303c643
2 parents 058faee + c19cac2
commit 303c643
Show file tree

Hide file tree

Showing 7 changed files with 338 additions and 183 deletions.
diff --git a/components/ActiveTasks.js b/components/ActiveTasks.js
@@ -22,62 +22,85 @@ const ActiveTasks = ({ userID }) => {
     const { theme } = useTheme();
     const styles = getStyles(theme);
 
-    useEffect(() => {
-        const fetchAndCountTasks = async () => {
-            const startDate = startOfMonth(currentMonth);
-            const endDate = endOfMonth(currentMonth);
-                    // Log to see if and when this function runs
-        console.log("Fetching tasks for month:", format(currentMonth, 'yyyy-MM'));
-        console.log("Current month only:", currentMonthOnly);
+  useEffect(() => {
+    const fetchAndCountTasks = async () => {
+      const startDate = startOfMonth(currentMonth);
+      const endDate = endOfMonth(currentMonth);
+      // Log to see if and when this function runs
+      console.log("Fetching tasks for month:", format(currentMonth, "yyyy-MM"));
+      console.log("Current month only:", currentMonthOnly);
 
-            // Fetch tasks for the whole month irrespective of the switch
-            const tasks = await fetchTasksForUser(userID, startDate.toISOString(), endDate.toISOString());
-            const filteredTasks = currentMonthOnly ? tasks.filter(task => 
-                isSameMonth(parseISO(task.date), currentMonth)
-            ) : tasks;
+      // Fetch tasks for the whole month irrespective of the switch
+      const tasks = await fetchTasksForUser(
+        userID,
+        startDate.toISOString(),
+        endDate.toISOString()
+      );
+      const filteredTasks = currentMonthOnly
+        ? tasks.filter((task) => isSameMonth(parseISO(task.date), currentMonth))
+        : tasks;
 
-            const updatedCategories = categories.map(category => {
-                const categoryTasks = filteredTasks.filter(task => task.type === category.label);
-                return { ...category, count: categoryTasks.length };
-            });
-            setCategories(updatedCategories);
-        };
+      const updatedCategories = categories.map((category) => {
+        const categoryTasks = filteredTasks.filter(
+          (task) => task.type === category.label
+        );
+        return { ...category, count: categoryTasks.length };
+      });
+      setCategories(updatedCategories);
+    };
 
-        fetchAndCountTasks();
-        // Listen to task updates, month changes, or toggle of currentMonthOnly
-        const unsubscribeTaskUpdated = eventEmitter.subscribe('taskUpdated', fetchAndCountTasks);
-        const unsubscribeMonthChange = eventEmitter.subscribe('monthChanged', fetchAndCountTasks);
+    fetchAndCountTasks();
+    // Listen to task updates, month changes, or toggle of currentMonthOnly
+    const unsubscribeTaskUpdated = eventEmitter.subscribe(
+      "taskUpdated",
+      fetchAndCountTasks
+    );
+    const unsubscribeMonthChange = eventEmitter.subscribe(
+      "monthChanged",
+      fetchAndCountTasks
+    );
+    const unsubscribeTaskDeleted = eventEmitter.subscribe(
+      "taskDeleted",
+      fetchAndCountTasks
+    );
+    const unsubscribeTaskAdded = eventEmitter.subscribe(
+      "taskAdded",
+      fetchAndCountTasks
+    );
 
-        return () => {
-            unsubscribeTaskUpdated();
-            unsubscribeMonthChange();
-        };
-    }, [userID, currentMonth, currentMonthOnly]); // Include currentMonthOnly in dependencies to trigger re-fetch
+    return () => {
+      unsubscribeTaskUpdated();
+      unsubscribeMonthChange();
+      unsubscribeTaskDeleted();
+      unsubscribeTaskAdded();
+    };
+  }, [userID, currentMonth, currentMonthOnly]); // Include currentMonthOnly in dependencies to trigger re-fetch
 
-    return (
-        <View style={styles.container}>
-            <View style={styles.switchContainer}>
-                <Text style={styles.taskText}>Showing: {currentMonthOnly ? "This Month's Tasks" : "All Time Tasks"}</Text>
-                <Switch
-                    value={currentMonthOnly}
-                    onValueChange={setCurrentMonthOnly}
-                />
-            </View>
-            {categories.map((category, index) => (
-                <TouchableOpacity
-                    key={index}
-                    style={[styles.circle, { backgroundColor: category.color }]}
-                    onPress={() => navigation.navigate('CategoryTasksView', { 
-                        category: category.label, 
-                        userID: userID,
-                    })}
-                >
-                    <Text style={styles.countText}>{category.count}</Text>
-                    <Text style={styles.labelText}>{category.label}</Text>
-                </TouchableOpacity>
-            ))}
-        </View>
-    );
+  return (
+    <View style={styles.container}>
+      <View style={styles.switchContainer}>
+        <Text>
+          Showing: {currentMonthOnly ? "This Month's Tasks" : "All Time Tasks"}
+        </Text>
+        <Switch value={currentMonthOnly} onValueChange={setCurrentMonthOnly} />
+      </View>
+      {categories.map((category, index) => (
+        <TouchableOpacity
+          key={index}
+          style={[styles.circle, { backgroundColor: category.color }]}
+          onPress={() =>
+            navigation.navigate("CategoryTasksView", {
+              category: category.label,
+              userID,
+            })
+          }
+        >
+          <Text style={styles.countText}>{category.count}</Text>
+          <Text style={styles.labelText}>{category.label}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
 };
 
-export default ActiveTasks;
+export default ActiveTasks;
diff --git a/components/AddTask.js b/components/AddTask.js
@@ -1,5 +1,12 @@
 import React, { useState } from "react";
-import { ScrollView, Alert, Pressable, Text, View, TextInput } from "react-native";
+import {
+  ScrollView,
+  Alert,
+  Pressable,
+  Text,
+  View,
+  TextInput,
+} from "react-native";
 import Header from "./Header";
 import DateTimePicker from "./DateTimePicker";
 import TypeSelector from "./TypeSelector";
@@ -42,57 +49,82 @@ const CreateTaskScreen = ({ route }) => {
     try {
       await saveTaskForUser(userID, taskData);
       Alert.alert("Success", "Task created successfully!");
-      eventEmitter.emit("taskCreated");
+      eventEmitter.emit("taskAdded");
+      eventEmitter.emit("taskUpdated");
+      eventEmitter.emit("monthChanged");
+      eventEmitter.emit("completedTasks");
       navigation.goBack();
+
+      // Clear all input fields after successful task creation
+      setTaskName("");
+      setLocation("");
+      setTaskType("");
+      setComment("");
+      setDate(new Date());
+      setPriority("medium");
     } catch (error) {
-      Alert.alert("Error", "There was an error creating your task. Please try again.");
+      Alert.alert(
+        "Error",
+        "There was an error creating your task. Please try again."
+      );
       console.error("Error creating task:", error);
     }
   };
 
   return (
-    <ScrollView style={styles.screen}>
-      <Header onClose={() => navigation.goBack()} />
-      <TextInput
-        style={styles.input}
-        value={taskName}
-        placeholder="Name"
-        onChangeText={setTaskName}
-      />
-      <DateTimePicker initialDate={date} onConfirm={setDate} />
-      <TextInput
-        style={styles.input}
-        value={location}
-        placeholder="Location"
-        onChangeText={setLocation}
-      />
-      <TypeSelector selectedType={taskType} onSelect={setTaskType} />
-      <TextInput
-        style={[styles.input, styles.tallInput]}
-        value={comment}
-        placeholder="Comments"
-        multiline
-        onChangeText={setComment}
-      />
-      <Text style={styles.priorityText}>Priority:</Text>
-      <Picker
-        selectedValue={priority}
-        onValueChange={(itemValue, itemIndex) => setPriority(itemValue)}
-        style={styles.priorityPicker}
-        testID="priority-selector"
-      >
-        <Picker.Item label="Low" value="low" />
-        <Picker.Item label="Medium" value="medium" />
-        <Picker.Item label="High" value="high" />
-      </Picker>
-      <CreateButton
-        onPress={handleCreateTask}
-        label="Create Task"
-        disabled={!taskName.trim()}
-        testID="create-task-button"
-      />
-    </ScrollView>
+    <View style={styles.screen} testID="add-meal-test">
+      <View style={styles.createTextContainer}>
+        <Pressable onPress={() => navigation.goBack()}>
+          <Text style={styles.backButton}>←</Text>
+        </Pressable>
+        <Text style={styles.createText} testID="add-meal-safe">
+          Create Task
+        </Text>
+        <View style={{ width: 24 }} />
+      </View>
+      <ScrollView style={styles.container}>
+        <Header onClose={() => navigation.goBack()} />
+        <TextInput
+          style={styles.input}
+          value={taskName}
+          placeholder="Name"
+          onChangeText={setTaskName}
+        />
+        <DateTimePicker initialDate={date} onConfirm={setDate} />
+        <TextInput
+          style={styles.input}
+          value={location}
+          placeholder="Location"
+          onChangeText={setLocation}
+        />
+        <TypeSelector selectedType={taskType} onSelect={setTaskType} />
+        <TextInput
+          style={[styles.input, styles.tallInput]}
+          value={comment}
+          placeholder="Comments"
+          multiline
+          onChangeText={setComment}
+        />
+        <Text style={styles.priorityText}>Priority:</Text>
+        <Picker
+          selectedValue={priority}
+          onValueChange={(itemValue, itemIndex) => setPriority(itemValue)}
+          style={styles.priorityPicker}
+          testID="priority-selector"
+        >
+          <Picker.Item label="Low" value="low" />
+          <Picker.Item label="Medium" value="medium" />
+          <Picker.Item label="High" value="high" />
+        </Picker>
+        <CreateButton
+          onPress={handleCreateTask}
+          label="Create Task"
+          disabled={!taskName.trim()}
+          testID="create-task-button"
+        />
+      </ScrollView>
+    </View>
   );
 };
 
-export default CreateTaskScreen;
+export default CreateTaskScreen;