src/components/task-list.tsx - main - DME/Notes

src/components/task-list.tsx
57 строк2 KB
Karasique333
Commit
19 июн 2025, 15:09
19 июн 2025, 15:09d96c829
"use client"

import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'

import { api } from '@/trpc/react'
import { Task } from '@/server/db/schema'
import { Button } from './ui/button'
import { Loader } from 'lucide-react'
import TaskContent from './task-content'

export default function TaskList() {
    const router = useRouter()
    const { data: tasks, isLoading } = api.task.getAll.useQuery()

    const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)

    useEffect(() => {
        if (selectedTaskId) {
            router.push(`/tasks/${selectedTaskId}`)
        }
    }, [selectedTaskId, router])

    if (isLoading) {
        return (
            <div className="flex justify-center py-10">
                <Loader className="animate-spin" />
            </div>
        )
    }

    return (
        <div className="space-y-4">
            <h2 className="text-xl font-bold text-neutral-900 dark:text-white">Ваши задачи</h2>
            {tasks && tasks.length > 0 ? (
                <ul className="space-y-2">
                    {tasks.map((task) => (
                        <li
                            key={task.id}
                            className="cursor-pointer rounded border border-neutral-300 p-4 shadow hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800"
                            onClick={() => setSelectedTaskId(task.id)}
                        >
                            <h3 className="font-semibold text-neutral-800 dark:text-white">{task.title}</h3>
                            <p className="text-sm text-neutral-600 dark:text-neutral-300">
                                Срок: {new Date(task.dueDate).toLocaleString()} | Статус:{' '}
                                {task.completed ? 'Выполнено' : 'Не выполнено'}
                            </p>
                        </li>
                    ))}
                </ul>
            ) : (
                <p className="text-sm text-neutral-600 dark:text-neutral-300">Задачи не найдены.</p>
            )}
            <Button onClick={() => setSelectedTaskId('new')}>Создать новую задачу</Button>
        </div>
    )
}