From 692618ea216276508c971ec2b4e01f4f1e8f4ba1 Mon Sep 17 00:00:00 2001
From: IluaAir <ilya@air.ru>
Date: Sun, 19 Oct 2025 23:18:24 +0300
Subject: [PATCH] Implement task fetching in Calendar component with loading
 state

---
 taskncoffee-app/src/components/Calendar.jsx | 34 ++++++++++++++++++---
 taskncoffee-app/src/pages/Dashboard.jsx     | 18 +++++------
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/taskncoffee-app/src/components/Calendar.jsx b/taskncoffee-app/src/components/Calendar.jsx
index f19f6cb..26c1e68 100644
--- a/taskncoffee-app/src/components/Calendar.jsx
+++ b/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">
diff --git a/taskncoffee-app/src/pages/Dashboard.jsx b/taskncoffee-app/src/pages/Dashboard.jsx
index 6f5127d..0eac2d8 100644
--- a/taskncoffee-app/src/pages/Dashboard.jsx
+++ b/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