src/components/task-content.tsx - main - DME/NotesApp

src/components/task-content.tsx
73 строки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 { Checkbox } from './ui/checkbox'
import { Button } from './ui/button'
import { Input } from './ui/input'
import { Textarea } from './ui/textarea'
import { Loader } from 'lucide-react'

export default function TaskContent({ taskId }: { taskId: string }) {
    const router = useRouter()
    const { data: task, isLoading } = api.task.getById.useQuery({ id: taskId })
    const updateTask = api.task.update.useMutation()

    const [title, setTitle] = useState('')
    const [description, setDescription] = useState('')
    const [dueDate, setDueDate] = useState('')
    const [completed, setCompleted] = useState(false)

    useEffect(() => {
        if (task) {
            setTitle(task.title)
            setDescription(task.description || '')
            setDueDate(new Date(task.dueDate).toISOString().slice(0, 16))
            setCompleted(task.completed)
        }
    }, [task])

    const handleSave = () => {
        updateTask.mutate({
            id: taskId,
            title,
            description,
            dueDate,
            completed,
        }, {
            onSuccess: () => router.refresh()
        })
    }

    if (isLoading || !task) {
        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">Задача: {task.title}</h2>
            <div className="space-y-2">
                <label>Заголовок</label>
                <Input value={title} onChange={(e) => setTitle(e.target.value)} />

                <label>Описание</label>
                <Textarea value={description} onChange={(e) => setDescription(e.target.value)} />

                <label>Срок выполнения</label>
                <Input type="datetime-local" value={dueDate} onChange={(e) => setDueDate(e.target.value)} />

                <label className="flex items-center gap-2">
                    <Checkbox checked={completed} onCheckedChange={(val) => setCompleted(!!val)} />
                    <span>Задача выполнена</span>
                </label>

                <Button onClick={handleSave}>Сохранить</Button>
            </div>
        </div>
    )
}