@component
def use_user_data():
 user_data_query, user_data_mutation = reactpy_django.hooks.use_user_data()
 user1 = reactpy_django.hooks.use_query(get_or_create_user1)
 user2 = reactpy_django.hooks.use_query(get_or_create_user2)
 current_user = reactpy_django.hooks.use_user()
 scope = reactpy_django.hooks.use_scope()
 async def login_user1(event):
 await login(scope, user1.data)
 user_data_query.refetch()
 user_data_mutation.reset()
 async def login_user2(event):
 await login(scope, user2.data)
 user_data_query.refetch()
 user_data_mutation.reset()
 async def logout_user(event):
 await logout(scope)
 user_data_query.refetch()
 user_data_mutation.reset()
 async def clear_data(event):
 user_data_mutation({})
 user_data_query.refetch()
 user_data_mutation.reset()
 async def on_submit(event):
 if event["key"] == "Enter":
 user_data_mutation((user_data_query.data or {}) | {event["target"]["value"]: event["target"]["value"]})
 return html.div(
 {
 "id": "use-user-data",
 "data-success": bool(user_data_query.data),
 "data-fetch-error": bool(user_data_query.error),
 "data-mutation-error": bool(user_data_mutation.error),
 "data-loading": user_data_query.loading or user_data_mutation.loading,
 "data-username": ("AnonymousUser" if current_user.is_anonymous else current_user.username),
 },
 html.div("use_user_data"),
 html.button({"className": "login-1", "onClick": login_user1}, "Login 1"),
 html.button({"className": "login-2", "onClick": login_user2}, "Login 2"),
 html.button({"className": "logout", "onClick": logout_user}, "Logout"),
 html.button({"className": "clear", "onClick": clear_data}, "Clear Data"),
 html.div(f"User: {current_user}"),
 html.div(f"Data: {user_data_query.data}"),
 html.div(f"Data State: (loading={user_data_query.loading}, error={user_data_query.error})"),
 html.div(f"Mutation State: (loading={user_data_mutation.loading}, error={user_data_mutation.error})"),
 html.div(html.input({"onKeyPress": on_submit, "placeholder": "Type here to add data"})),
 )

@navigate_to_page("/")
 def test_component_use_user_data(self):
 text_input = self.page.wait_for_selector("#use-user-data input")
 login_1 = self.page.wait_for_selector("#use-user-data .login-1")
 login_2 = self.page.wait_for_selector("#use-user-data .login-2")
 logout = self.page.wait_for_selector("#use-user-data .logout")
 clear = self.page.wait_for_selector("#use-user-data .clear")
 # Test AnonymousUser data
 user_data_div = self.page.wait_for_selector(
 "#use-user-data[data-success=false][data-fetch-error=false][data-mutation-error=false][data-loading=false][data-username=AnonymousUser]"
 )
 assert "Data: None" in user_data_div.text_content()
 # Test first user's data
 login_1.click(delay=CLICK_DELAY)
 user_data_div = self.page.wait_for_selector(
 "#use-user-data[data-success=false][data-fetch-error=false][data-mutation-error=false][data-loading=false][data-username=user_1]"
 )
 assert "Data: {}" in user_data_div.text_content()
 text_input.type("test", delay=CLICK_DELAY)
 text_input.press("Enter", delay=CLICK_DELAY)
 user_data_div = self.page.wait_for_selector(
 "#use-user-data[data-success=true][data-fetch-error=false][data-mutation-error=false][data-loading=false][data-username=user_1]"
 )
 assert "Data: {'test': 'test'}" in user_data_div.text_content()

def use_user_data(
 default_data: (None | dict[str, Callable[[], Any] | Callable[[], Awaitable[Any]] | Any]) = None,
 save_default_data: bool = False,
) -> UserData:
 """Get or set user data stored within the REACTPY_DATABASE.

 Kwargs:
 default_data: A dictionary containing `{key: default_value}` pairs. \
 For computationally intensive defaults, your `default_value` \
 can be sync or async functions that return the value to set.
 save_default_data: If True, `default_data` values will automatically be stored \
 within the database if they do not exist.
 """
 from reactpy_django.models import UserDataModel
 user = use_user()
 async def _set_user_data(data: dict):
 if not isinstance(data, dict):
 msg = f"Expected dict while setting user data, got {type(data)}"
 raise TypeError(msg)
 if user.is_anonymous:
 msg = "AnonymousUser cannot have user data."
 raise ValueError(msg)
 pk = get_pk(user)
 model, _ = await UserDataModel.objects.aget_or_create(user_pk=pk)
 model.data = orjson.dumps(data)
 await model.asave()
 query: Query[dict | None] = use_query(
 _get_user_data,
 kwargs={
 "user": user,
 "default_data": default_data,
 "save_default_data": save_default_data,
 },
 postprocessor=None,
 )
 mutation = use_mutation(_set_user_data, refetch=_get_user_data)
 return UserData(query, mutation)

def use_user_data(
 default_data: (None | dict[str, Callable[[], Any] | Callable[[], Awaitable[Any]] | Any]) = None,
 save_default_data: bool = False,
) -> UserData:
 """Get or set user data stored within the REACTPY_DATABASE.

 Kwargs:
 default_data: A dictionary containing `{key: default_value}` pairs. \
 For computationally intensive defaults, your `default_value` \
 can be sync or async functions that return the value to set.
 save_default_data: If True, `default_data` values will automatically be stored \
 within the database if they do not exist.
 """
 from reactpy_django.models import UserDataModel
 user = use_user()
 user_ref = use_ref(user)
 user_ref.current = user # Always update the ref to the latest user
 async def _set_user_data(data: dict):
 current_user = user_ref.current
 if not isinstance(data, dict):
 msg = f"Expected dict while setting user data, got {type(data)}"
 raise TypeError(msg)
 if current_user.is_anonymous:
 msg = "AnonymousUser cannot have user data."
 raise ValueError(msg)
 pk = get_pk(current_user)
 model, _ = await UserDataModel.objects.aget_or_create(user_pk=pk)
 model.data = orjson.dumps(data)
 await model.asave()