Trying to remake TODO app into Declarative style

[Wanna-Pizza]

Question

Im trying to toggle visibility using new methods in Flet.
Just like original ToDo app, but in declarative style.
Visibility of my tasks doesn't change correctly when I switching tabs. I need someone who can help me with that.

I think I understand how it should work: We should use use_state for the tab index bind to the interface. But apparently I don't quite understand how it works.

Code sample

import flet as ft
from dataclasses import dataclass, field


@ft.observable
@dataclass
class TodoTask:
    name: str
    completed: bool = False
    visible : bool = True

    def update(self, name: str):
        self.name = name

    def toggle(self, completed: bool):
        self.completed = completed
    
    def set_visibility(self, visible: bool):
        self.visible = visible


@ft.observable
@dataclass
class TodoList:
    tasks: list[TodoTask] = field(default_factory=list)
    filter_status: str = "All"

    def add_task(self, name: str):
        if name.strip():
            self.tasks.append(TodoTask(name))
    
    def delete_task(self, task: TodoTask):
        self.tasks.remove(task)
    
    def set_filter(self, status: str):
        self.filter_status = status

    
@ft.component
def TodoTaskView(task: TodoTask, on_remove_task, todo_list: TodoList) -> ft.Control:
    is_editing, set_is_editing = ft.use_state(False)
    new_name, set_new_name = ft.use_state(task.name)
    visible, set_visible = ft.use_state(True)

    ft.use_effect(
        lambda: set_visible(
            todo_list.filter_status == "All"
            or (todo_list.filter_status == "Active" and not task.completed)
            or (todo_list.filter_status == "Completed" and task.completed)
        ),
        [todo_list.filter_status, task.completed]
    )

    def edit():
        set_new_name(task.name)
        set_is_editing(True)
    
    def save():
        task.update(new_name)
        set_is_editing(False)
    
    
    if not is_editing:
        return ft.Row(
            [
                ft.Checkbox(
                    value=task.completed, 
                    on_change=lambda e: task.toggle(e.control.value)
                ),
                ft.Text(task.name),
                ft.Row(
                    [
                        ft.IconButton(icon=ft.Icons.EDIT, on_click=edit),
                        ft.IconButton(icon=ft.Icons.DELETE, on_click=lambda e: on_remove_task(task)),
                    ],
                    alignment=ft.MainAxisAlignment.END,
                    expand=True,
                )
            ],
            visible=visible


        )
    return ft.Row(
        [
             ft.TextField(
                value=new_name,
                autofocus=True,
                selection=ft.TextSelection(0, len(task.name)),
                on_change=lambda e: set_new_name(e.control.value),
                on_submit=save
            ),
            ft.Button("Save", on_click=save)
        ],
        visible=visible
    )


@ft.component
def TodoForm(on_add_task: callable, todo_list: TodoList) -> ft.Control:
    new_task, set_new_task = ft.use_state("")
    selected_tab, set_selected_tab = ft.use_state(0)

    def add_task():
        on_add_task(new_task)
        set_new_task("")
    
    
    def filter_tasks(e):
        status = filter_tabs.selected_index
        set_selected_tab(status)
        todo_list.set_filter(filter.tabs[status].label)

    row = ft.Row(
        [
            ft.TextField(
                label="What's needs to be done?",
                expand=True,
                value=new_task,
                on_change=lambda e: set_new_task(e.control.value)
            ),
            ft.FloatingActionButton(
                content=ft.Icon(ft.Icons.ADD),
                on_click=add_task
            )
        ]
    )
    
    filter = ft.TabBar(
        scrollable=False,
        tabs=[
            ft.Tab("All"),
            ft.Tab("Active"),
            ft.Tab("Completed"),
        ],
        on_click=filter_tasks,
    )
    filter_tabs = ft.Tabs(
        length=3,
        selected_index=selected_tab,
        content=filter
    )
    return ft.Column([row, filter_tabs])


@ft.component
def TodoApp():
    todo_list, _ = ft.use_state(
        TodoList(
            tasks=[
                TodoTask("ABOBA?"),
                TodoTask("ABOBA2312?")
            ]
        )
    )

    return [
        TodoForm(on_add_task=todo_list.add_task, todo_list=todo_list),
        *[TodoTaskView(task, on_remove_task=todo_list.delete_task, todo_list=todo_list) for task in todo_list.tasks]
    ]


ft.run(lambda page: page.render(TodoApp))

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[FeodorFitsner]

Here's ToDo declarative example: https://github.com/flet-dev/flet/blob/main/sdk/python/examples/apps/declarative/todo.py