import Head from 'next/head' import { useCallback, useState, FormEvent, ChangeEvent } from 'react' import useAspidaSWR from '@aspida/swr' import styles from '~/styles/Home.module.css' import { apiClient } from '~/utils/apiClient' import { Task } from '$prisma/client' import UserBanner from '~/components/UserBanner' const Home = () => { const { data: tasks, error, mutate: setTasks } = useAspidaSWR(apiClient.tasks) const [label, setLabel] = useState('') const inputLavel = useCallback( (e: ChangeEvent) => setLabel(e.target.value), [] ) const createTask = useCallback( async (e: FormEvent) => { e.preventDefault() if (!label) return await apiClient.tasks.post({ body: { label } }) setLabel('') setTasks(await apiClient.tasks.$get()) }, [label] ) const toggleDone = useCallback(async (task: Task) => { await apiClient.tasks._taskId(task.id).patch({ body: { done: !task.done } }) setTasks(await apiClient.tasks.$get()) }, []) const deleteTask = useCallback(async (task: Task) => { await apiClient.tasks._taskId(task.id).delete() setTasks(await apiClient.tasks.$get()) }, []) if (error) return
failed to load
if (!tasks) return
loading...
return (
frourio-todo-app

Welcome to Next.js!

frourio-todo-app

    {tasks.map((task) => (
  • deleteTask(task)} />
    • ))}
) } export default Home