Implement task fetching in Calendar component with loading state

taskncoffee-app/src/components/Calendar.jsx

@@ -1,9 +1,27 @@
-import { useState } from 'react';
-
-
+import { useState, useEffect } from 'react';
+import { getUserTasks } from '@/api/users.service';
 
 export default function Calendar() {
     const [tasksFromBackend, setTasksFromBackend] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    // Fetch tasks when component mounts
+    useEffect(() => {
+        const fetchTasks = async () => {
+            try {
+                console.log('Calendar: Fetching user tasks...');
+                const response = await getUserTasks(1);
+                console.log('Calendar: Tasks from backend:', response);
+                setTasksFromBackend(response);
+            } catch (error) {
+                console.error('Calendar: Failed to fetch tasks:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchTasks();
+    }, []);
 
     const today = new Date();
     const currentDay = today.getDay();
@@ -56,7 +74,15 @@ export default function Calendar() {
         };
     });
 
-
+    if (loading) {
+        return (
+            <div className="dashboard-surface-container">
+                <div className="flex items-center justify-center p-8">
+                    <p className="text-lg">Loading tasks...</p>
+                </div>
+            </div>
+        );
+    }
 
     return (
         <div className="dashboard-surface-container">