("");
12 | return (
13 |
36 | );
37 | }
38 |
39 | const TodoView = memo(
40 | ({
41 | todo,
42 | editing,
43 | startEditing,
44 | saveTodo,
45 | }: {
46 | key?: any;
47 | todo: Todo;
48 | editing: boolean;
49 | startEditing: (t: Todo) => void;
50 | saveTodo: (todo: Todo, text: string) => void;
51 | }) => {
52 | let body;
53 |
54 | const [text, setText] = useState(todo.text);
55 | useBind(todo, ["text", "completed"]);
56 | const deleteTodo = () => todo.delete().save();
57 | const toggleTodo = () => todo.update({ completed: !todo.completed }).save();
58 |
59 | if (editing) {
60 | body = (
61 | saveTodo(todo, text)}
67 | onKeyUp={(e) => e.key === "Enter" && saveTodo(todo, text)}
68 | onChange={(e) => setText(e.target.value)}
69 | />
70 | );
71 | } else {
72 | body = (
73 |
74 |
80 |
81 |
82 |
83 | );
84 | }
85 | return (
86 |
91 | {body}
92 |
93 | );
94 | }
95 | );
96 |
97 | function Footer({
98 | remaining,
99 | todos,
100 | clearCompleted,
101 | todoList,
102 | }: {
103 | remaining: number;
104 | todos: Todo[];
105 | clearCompleted: () => void;
106 | todoList: TodoList;
107 | }) {
108 | let clearCompletedButton;
109 | if (remaining !== todos.length) {
110 | clearCompletedButton = (
111 |
114 | );
115 | }
116 |
117 | const updateFilter = (filter: Filter) => todoList.update({ filter }).save();
118 |
119 | return (
120 |
154 | );
155 | }
156 |
157 | export default function App({ list }: { list: TodoList }) {
158 | const clearCompleted = () =>
159 | commit(
160 | list.ctx,
161 | completeTodos.map((t) => t.delete())
162 | );
163 | const startEditing = useCallback(
164 | (todo: Todo) => list.update({ editing: todo.id }).save(),
165 | [list]
166 | );
167 | const saveTodo = useCallback(
168 | (todo: Todo, text: string) => {
169 | commit(
170 | list.ctx,
171 | todo.update({ text: text }),
172 | list.update({ editing: null })
173 | );
174 | },
175 | [list]
176 | );
177 | const toggleAll = () => {
178 | if (remaining === 0) {
179 | // uncomplete all
180 | commit(
181 | list.ctx,
182 | completeTodos.map((t) => t.update({ completed: false }))
183 | );
184 | } else {
185 | // complete all
186 | commit(
187 | list.ctx,
188 | activeTodos.map((t) => t.update({ completed: true }))
189 | );
190 | }
191 | };
192 | let toggleAllCheck;
193 |
194 | useBind(list, ["filter", "editing"]);
195 | const activeTodos = useQuery(() =>
196 | list.queryTodos().whereCompleted(P.equals(false))
197 | ).data;
198 | const completeTodos = useQuery(() =>
199 | list.queryTodos().whereCompleted(P.equals(true))
200 | ).data;
201 | const allTodos = useQuery(() => list.queryTodos(), [], {
202 | on: UpdateType.CREATE_OR_DELETE,
203 | }).data;
204 |
205 | const remaining = activeTodos.length;
206 | let todos =
207 | list.filter === "active"
208 | ? activeTodos
209 | : list.filter === "completed"
210 | ? completeTodos
211 | : allTodos;
212 |
213 | if (allTodos.length) {
214 | toggleAllCheck = (
215 | <>
216 |
223 |
224 |
225 | );
226 | }
227 |
228 | return (
229 |
230 |
231 |
0 ? {} : { display: "none" }}
234 | >
235 | {toggleAllCheck}
236 |
237 | {todos.map((t) => (
238 |
245 | ))}
246 |
247 |
253 |
254 |