TODO アプリ

import { useState } from 'react'; import { Button, Checkbox, Container, Flex, Input, Stack, Title, } from '@mantine/core'; import useSWRMutation from 'swr/mutation'; // ミリ秒後に resolve する sleep 関数 const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms)); type Todo = { name: string }; // タスクリスト初期データ const initialTodoList: Todo[] = [ { name: '観光スポットのリサーチをする' }, { name: 'スーパーに大根と卵を買いに行く' }, { name: '家計簿アプリにデータを入力する' }, ]; export const TodoApp = () => { const [name, setName] = useState(''); const [todoList, setTodoList] = useState(initialTodoList); // タスク作成処理 const { trigger, isMutating: isCreating } = useSWRMutation( '/api/todos', async (_, { arg: name }: { arg: string }) => { await sleep(3000); // 時間のかかるタスク作成 API 呼び出しを想定 setTodoList((todoList) => [{ name }, ...todoList]); setName(''); } ); const createTodo = () => trigger(name); return ( {/* タイトル */} TODO アプリ {/* 入力欄 */} setName(event.currentTarget.value)} /> {/* タスクリスト */} {todoList.map(({ name }) => ( ))} ); };