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>
    );
});