23 lines
715 B
TypeScript
23 lines
715 B
TypeScript
import { useEffect } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
import { todoStore } from "../stores/TodoStore";
|
|
import { TodoList } from "./TodoList"
|
|
|
|
import './TodoView.scss';
|
|
|
|
export const TodoView = observer(function TodoView() {
|
|
useEffect(() => {
|
|
void todoStore.refresh();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<button type="button" onClick={() => void todoStore.refresh()} disabled={todoStore.loading}>
|
|
{todoStore.loading ? "Refreshing…" : "Refresh"}
|
|
</button>
|
|
{todoStore.error && <p>Failed to load todos: {todoStore.error}</p>}
|
|
{!todoStore.error && <TodoList items={todoStore.items} />}
|
|
</div>
|
|
);
|
|
});
|