gitark/taskncoffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement api task fetching in Dashboard component with loading state

Browse Source
This commit is contained in:
IluaAir
2025-10-16 23:41:10 +03:00
parent 2722488a4e
commit 6f49d2b171
1 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
taskncoffee-app/src/pages/Dashboard.jsx
View File

@@ -1,10 +1,14 @@
'use client'; 'use client';
import { useState, useEffect } from 'react';
import '../neon.css'; import '../neon.css';
import './dashboard.css'; import './dashboard.css';
import { MenuDock } from '@/components/ui/shadcn-io/menu-dock'; import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
import { Home, Settings, Bell } from 'lucide-react'; import { Home, Settings, Bell } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { jwtexp } from '@/lib/utils'; import { jwtexp } from '@/lib/utils';
import { getUserTasks } from '@/api/users.service';
const menuItems = [ const menuItems = [
{ label: 'home', icon: Home, onClick: () => console.log('Home clicked') }, { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
{ label: 'notify', icon: Bell, onClick: () => console.log('Notifications clicked') }, { label: 'notify', icon: Bell, onClick: () => console.log('Notifications clicked') },
@@ -12,18 +16,26 @@ const menuItems = [
]; ];
export default function Dashboard() { export default function Dashboard() {
// Mock data from backend const [tasksFromBackend, setTasksFromBackend] = useState([]);
const tasksFromBackend = [ const [loading, setLoading] = useState(true);
{ title: "testtitle", due_date: "2025-10-14", priority: "medium", id: 1, status: "open" },
{ title: "title", due_date: "2025-10-15", priority: "high", id: 3, status: "open" }, // Fetch tasks
{ title: "title title2", due_date: "2025-10-15", priority: "medium", id: 4, status: "closed" }, useEffect(() => {
{ title: "title title3", due_date: "2025-10-15", priority: "medium", id: 5, status: "open" }, const fetchTasks = async () => {
{ title: "title16", due_date: "2025-10-15", priority: "medium", id: 6, status: "completed" }, try {
{ title: "super late title", due_date: "2025-10-15", priority: "low", id: 2, status: "open" } const response = await getUserTasks(1);
]; console.log('Tasks from backend:', response);
const token = localStorage.getItem('access_token'); setTasksFromBackend(response);
const tokenExp = jwtexp(token); } catch (error) {
console.log(tokenExp); console.error('Failed to fetch tasks:', error);
} finally {
setLoading(false);
}
};
fetchTasks();
}, []);
// Get current date and week // Get current date and week
const today = new Date(); const today = new Date();
const currentDay = today.getDay(); const currentDay = today.getDay();
@@ -76,6 +88,16 @@ export default function Dashboard() {
}; };
}); });
if (loading) {
return (
<div className="dashboard-container">
<div className="flex items-center justify-center min-h-screen">
<p className="text-xl">Loading tasks...</p>
</div>
</div>
);
}
return ( return (
<div className="dashboard-container"> <div className="dashboard-container">
{/* Navigation Rail - Material Design 3 */} {/* Navigation Rail - Material Design 3 */}