from channels.db import database_sync_to_async
from reactpy import component, html
from reactpy_django.hooks import use_query, use_mutation, use_connection, use_location, use_user
from reactpy_django.router import django_router
from reactpy_router import route


async def get_items():
    return await database_sync_to_async()()


@component
def todo_list():
    item_query = use_query(get_items)

    if item_query.loading:
        rendered_items = html.h2(f"Loading...")
    elif item_query.error or not item_query.data:
        rendered_items = html.h2(f"{item_query.error}, {item_query.data}")
    else:
        rendered_items = html.ul([html.li(f"{item.text} => {item.id}", key=item.pk) for item in item_query.data])

    return html.div("Rendered items: ", rendered_items)