TODO アプリ

import { ReactNode, useState } from 'react'; import { Button, Checkbox, Container, Flex, Input, LoadingOverlay, Stack, Title, } from '@mantine/core'; import { atom, useAtom } from 'jotai'; // ミリ秒後に resolve する sleep 関数 const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms)); type Todo = { name: string }; // タスクリスト初期データ const initialTodoList: Todo[] = [ { name: '観光スポットのリサーチをする' }, { name: 'スーパーに大根と卵を買いに行く' }, { name: '家計簿アプリにデータを入力する' }, ]; // 画面全体にローディング表示を管理するatom const isShowLoadingOverlayAtom = atom(false); // 画面全体にローディングを出すグローバルなプロバイダー const LoadingOverlayProvider = ({ children }: { children: ReactNode }) => { const [isShowLoadingOverlay] = useAtom(isShowLoadingOverlayAtom); return ( <> {children} ); }; const TodoAppContent = () => { const [name, setName] = useState(''); const [todoList, setTodoList] = useState(initialTodoList); const [, setIsShowLoadingOverlay] = useAtom(isShowLoadingOverlayAtom); // タスク作成処理 const createTodo = async () => { setIsShowLoadingOverlay(true); try { await sleep(3000); // 時間のかかるタスク作成 API 呼び出しを想定 setTodoList((todoList) => [{ name }, ...todoList]); setName(''); } catch { alert('エラーが発生しました'); } setIsShowLoadingOverlay(false); }; return ( {/* タイトル */} TODO アプリ {/* 入力欄 */} setName(event.currentTarget.value)} /> {/* タスクリスト */} {todoList.map(({ name }) => ( ))} ); }; export const TodoApp = () => ( );