import {useState, useCallback, useEffect, lazy, Suspense} from 'react'; import styled from 'styled-components'; import api, {TodoItem, TodoItemDraft} from '@/api/todo'; import WorkerStatus from '@/components/WorkerStatus'; import List from '../List'; import BatchLabel from './BatchLabel'; import './lintIgnore'; import c from './index.less'; import './lintIgnore.global.css'; import decoration from './decoration.png'; const Create = lazy(() => import('../Create')); const Header = styled.h1` font-size: 100px; margin: 0; text-align: center; color: rgba(175, 47, 47, .15); `; const Title = styled.span` padding: 0 20px; background: transparent url(${decoration}) no-repeat top 24px right 12px; background-size: 23px 30px; `; const Meta = styled.aside` color: #a6a6a6; `; const Layout = styled.div` display: flex; flex-direction: column; gap: 20px; max-width: 800px; margin: 0 auto; `; export default function App() { const [todos, setTodos] = useState<TodoItem[]>([]); const requestList = useCallback( async () => { const dataSource = await api.list(); setTodos(dataSource); }, [] ); const createNew = useCallback( async (draft: TodoItemDraft) => { await api.save(draft); await requestList(); }, [requestList] ); const toggleItem = useCallback( async (id: string) => { await api.toggle(id); await requestList(); }, [requestList] ); useEffect( () => { requestList(); }, [requestList] ); return ( <Layout id="app" className={c('root')}> <Header> <Title>todos</Title> </Header> <Suspense fallback={<div style={{height: 64}} />}> <Create onSubmit={createNew} /> </Suspense> {/* @ts-expect-error */} <Meta id="app-meta" className="flex items-center justify-between"> <span className="flex items-center gap-1"> <WorkerStatus /> {todos.length} things waiting </span> {skr.features.batch && <BatchLabel onFinish={requestList} />} </Meta> <List dataSource={todos} onToggleItem={toggleItem} /> </Layout> ); }