Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@vuvnguyen95
vuvnguyen95 committed Apr 23, 2024
1 parent d4d3e79 commit c19cac2
Show file tree
Hide file tree
Showing 5 changed files with 347 additions and 195 deletions.
165 changes: 98 additions & 67 deletions components/ActiveTasks.js
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,108 @@
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Switch } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { format, startOfMonth, endOfMonth, parseISO, isSameMonth } from 'date-fns';
import styles from '../styles/ActiveTasksStyle';
import { fetchTasksForUser } from '../services/AuthAPI';
import eventEmitter from '../components/EventEmitter';
import { useCurrentMonth } from './CurrentMonthContext';

import React, { useState, useEffect } from "react";
import { View, Text, TouchableOpacity, Switch } from "react-native";
import { useNavigation } from "@react-navigation/native";
import {
format,
startOfMonth,
endOfMonth,
parseISO,
isSameMonth,
} from "date-fns";
import styles from "../styles/ActiveTasksStyle";
import { fetchTasksForUser } from "../services/AuthAPI";
import eventEmitter from "../components/EventEmitter";
import { useCurrentMonth } from "./CurrentMonthContext";

const ActiveTasks = ({ userID }) => {
const navigation = useNavigation();
const { currentMonth } = useCurrentMonth();
const [categories, setCategories] = useState([
{ label: 'School', color: '#FFA07A' },
{ label: 'Work', color: '#20B2AA' },
{ label: 'Personal', color: '#778899' },
{ label: 'Gym', color: '#FFD700' },
]);
const [currentMonthOnly, setCurrentMonthOnly] = useState(false);
const navigation = useNavigation();
const { currentMonth } = useCurrentMonth();
const [categories, setCategories] = useState([
{ label: "School", color: "#FFA07A" },
{ label: "Work", color: "#20B2AA" },
{ label: "Personal", color: "#778899" },
{ label: "Gym", color: "#FFD700" },
]);
const [currentMonthOnly, setCurrentMonthOnly] = useState(false);

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>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>
);
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;
122 changes: 77 additions & 45 deletions components/AddTask.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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;
Loading

0 comments on commit c19cac2

Please sign in to comment.