todo.py

from retink import run, Text, View, Button, TextInput, component, create_state, create_effect
from typing import Callable


@component
def TodoForm(on_submit: Callable[[str], None]):
    text, set_text = create_state("")

    def submit():
        on_submit(text)
        set_text("")

    return TextInput(text, on_change=set_text), Button("submit", on_click=submit)


@component
def Todo(
    text: str,
    on_delete: Callable[[int], None],
    edit_callback: Callable[[int, str], None],
    index: int,
):
    is_editing, set_editing = create_state(False)
    internal_text, set_internal_text = create_state(text)

    normal_ui = [
        Text(text),
        Button("delete", on_click=lambda: on_delete(index)),
        Button(
            "edit",
            on_click=lambda: set_editing(True),
        ),
    ]

    def submit_edit():
        set_editing(False)
        edit_callback(index, internal_text)

    editing_ui = [
        TextInput(internal_text, on_change=set_internal_text),
        Button("submit", on_click=submit_edit),
    ]

    return View(
        editing_ui if is_editing else normal_ui,
        row=True,
    )


@component
def App():
    todos, set_todos = create_state([])

    create_effect(lambda: print(todos), [todos])    

    def delete_todo(i):
        set_todos(todos[:i] + todos[i + 1 :])

    def edit_todo(i, text):
        todos[i] = text
        set_todos(todos)

    return TodoForm(on_submit=lambda text: set_todos(todos + [text])), *(
        Todo(text, on_delete=delete_todo, edit_callback=edit_todo, index=i)
        for i, text in enumerate(todos)
    )


run(App)