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">

taskncoffee-app/src/pages/Dashboard.jsx

@@ -6,7 +6,6 @@ import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
 import { Home, Settings, Bell } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { jwtexp } from '@/lib/utils';
-import { getUserTasks } from '@/api/users.service';
 import Calendar from '@/components/Calendar';
 
 const menuItems = [
@@ -19,12 +18,12 @@ export default function Dashboard() {
     const [loading, setLoading] = useState(true);
     const [authError, setAuthError] = useState(false);
 
-    // Fetch tasks
+    // Validate token on page load
     useEffect(() => {
         console.log('Dashboard useEffect triggered');
-        const fetchTasks = async () => {
+        const validateAuth = async () => {
             try {
-                console.log('Starting fetchTasks...');
+                console.log('Validating authentication...');
                 const token = localStorage.getItem('access_token');
                 if (token) {
                     console.log('Token found, validating...');
@@ -41,19 +40,16 @@ export default function Dashboard() {
                     setLoading(false);
                     return;
                 }
-
-                console.log('Fetching user tasks...');
-                const response = await getUserTasks(1);
-                console.log('Tasks from backend:', response);
-                setTasksFromBackend(response);
+                console.log('Authentication validated successfully');
             } catch (error) {
-                console.error('Failed to fetch tasks:', error);
+                console.error('Authentication validation error:', error);
+                setAuthError(true);
             } finally {
                 setLoading(false);
             }
         };
 
-        fetchTasks();
+        validateAuth();
     }, []);
 
     // Get current date and week