forgot to add these classes in last commit

components/ActiveTasks.js

@@ -0,0 +1,77 @@
+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);
+
+    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;
+
+            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);
+
+        return () => {
+            unsubscribeTaskUpdated();
+            unsubscribeMonthChange();
+        };
+    }, [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>
+    );
+};
+
+export default ActiveTasks;

components/CategoryCounters.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View } from 'react-native';
+import CategoryCounter from './CategoryCounter';
+
+const categories = [
+    { label: 'School', color: '#FFA07A', count: 10 },
+    { label: 'Work', color: '#20B2AA', count: 5 },
+    { label: 'Personal', color: '#778899', count: 8 },
+    { label: 'Gym', color: '#FFD700', count: 4 },
+];
+
+const CategoryCounters = ({ navigation }) => {
+    return (
+      <View style={{ flexDirection: 'row', justifyContent: 'space-around', flexWrap: 'wrap' }}>
+        {categories.map((category, index) => (
+          <CategoryCounter
+            key={index}
+            count={category.count}
+            label={category.label}
+            color={category.color}
+            onPress={() => navigation.navigate('CategoryTasksView', { category: category.label })}
+          />
+        ))}
+      </View>
+    );
+  };
+
+export default CategoryCounters;

components/CurrentMonthContext.js

@@ -0,0 +1,16 @@
+// CurrentMonthContext.js
+import React, { createContext, useContext, useState } from 'react';
+
+const CurrentMonthContext = createContext();
+
+export const useCurrentMonth = () => useContext(CurrentMonthContext);
+
+export const CurrentMonthProvider = ({ children }) => {
+    const [currentMonth, setCurrentMonth] = useState(new Date());
+
+    return (
+        <CurrentMonthContext.Provider value={{ currentMonth, setCurrentMonth }}>
+            {children}
+        </CurrentMonthContext.Provider>
+    );
+};

screens/CategoryTasksView.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+import { fetchTasksForUser } from '../services/AuthAPI';
+import { format } from 'date-fns';
+import eventEmitter from '../components/EventEmitter';
+import styles from '../styles/CategoryTasksViewStyle'; // Ensure this path matches the location of your styles
+
+const CategoryTasksView = ({ route, navigation }) => {
+    const { category, userID } = route.params;
+    const [tasks, setTasks] = useState([]);
+
+    useEffect(() => {
+        const fetchCategoryTasks = async () => {
+            const allTasks = await fetchTasksForUser(userID);
+            const filteredTasks = allTasks.filter(task => task.type === category);
+            setTasks(filteredTasks);
+        };
+
+        fetchCategoryTasks();
+
+        // Subscribe to taskUpdated event to refresh list
+        const unsubscribe = eventEmitter.subscribe('taskUpdated', fetchCategoryTasks);
+
+        return () => unsubscribe();
+    }, [category, userID]);
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{`${category} Active Tasks`}</Text>
+            <FlatList
+                data={tasks}
+                keyExtractor={item => item.id.toString()}
+                renderItem={({ item }) => (
+                    <TouchableOpacity
+                        style={styles.taskItem}
+                        onPress={() => navigation.navigate('EditTaskScreen', { task: item, userId: userID })}
+                    >
+                        <Text style={styles.taskName}>{item.name}</Text>
+                        <Text style={styles.taskDetail}>Date: {format(new Date(item.date), 'PPP')}</Text>
+                        <Text style={styles.taskDetail}>Priority: {item.priority}</Text>
+                        <Text style={styles.taskDetail}>Status: {item.completed ? 'Completed' : 'Pending'}</Text>
+                        <Text style={styles.taskDetail}>Location: {item.location}</Text>
+                        <Text style={styles.taskDetail}>Comments: {item.comment}</Text>
+                    </TouchableOpacity>
+                )}
+            />
+        </View>
+    );
+};
+
+export default CategoryTasksView;

styles/ActiveTasksStyle.js

@@ -0,0 +1,51 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const { width } = Dimensions.get('window'); // Get the window width
+const circleSize = width / 4 - 10; // Calculate size to fit 4 across with padding
+
+export default StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+    circle: {
+        width: '23%', // Adjust according to screen size or preferences
+        aspectRatio: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: 1,
+        borderRadius: 50,
+        padding: 10,
+    },
+    countText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    labelText: {
+        color: 'white',
+    },
+    title: {
+        fontWeight: 'bold',
+        fontSize: 18,
+        marginRight: 10,
+    },
+    switchContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'center',
+        marginBottom: 10,
+    },
+    switchLabel: {
+        marginLeft: 10,
+    },
+    darkText: {
+        color: '#ffffff', // Light text for dark backgrounds
+    },
+    lightText: {
+        color: '#000000', // Dark text for light backgrounds
+    },
+});

styles/CategoryTasksViewStyle.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        backgroundColor: '#f0f0f0', // Light grey background
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333', // Dark grey text for better readability
+        marginBottom: 20,
+    },
+    taskItem: {
+        backgroundColor: 'white', // White background for task items
+        borderRadius: 10, // Rounded corners
+        padding: 15,
+        marginBottom: 10,
+        shadowColor: '#000', // Shadow for 3D effect
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        elevation: 3,
+    },
+    taskDetail: {
+        fontSize: 16,
+        color: '#666', // Medium grey for text
+        marginBottom: 5,
+    },
+    taskPriority: {
+        fontWeight: 'bold',
+        color: '#007bff', // Blue color for emphasis on priority
+    },
+    touchableHighlight: {
+        borderRadius: 10, // Ensures the ripple effect stays within the rounded borders
+    },
+});