eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Use global state user instead of local resource in personal page

Browse Source
This commit is contained in:
Connor Wittman 2024-11-17 18:42:57 -05:00
parent 3d1dc94b06
commit 73b4b7674e
2 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/personal.rs
View File

@ -1,8 +1,8 @@
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use crate::auth::get_user;
use crate::auth::logout;
use crate::util::state::GlobalState;
#[component]
pub fn Personal() -> impl IntoView {
@ -16,54 +16,66 @@ pub fn Personal() -> impl IntoView {
#[component]
pub fn Profile() -> impl IntoView {
let (dropdown_open, set_dropdown_open) = create_signal(false);
let (image_error, set_image_error) = create_signal(false);
let user = create_local_resource(move || dropdown_open.get(), |_| async move { get_user().await });
let user = GlobalState::logged_in_user();
let open_dropdown = move |_| {
let open_dropdown = move |_| {
set_dropdown_open.update(|value| *value = !*value);
};
let user_profile_picture = move || {
user.get().and_then(|user| {
user.ok().map(|user| format!("/assets/images/profile/{}.webp", user.id.unwrap()))
if let Some(user) = user {
if user.id.is_none() {
return None;
}
Some(format!("/assets/images/profile/{}.webp", user.id.unwrap()))
} else {
None
}
})
};
view! {
<div class="profile-container">
<div class="profile-name">
<Show
when=move || user.get().map(|user| user.is_ok()).unwrap_or_default()
<Suspense
fallback=|| view!{
<h1>Not Logged In</h1>
}>
<h1>{move || user.get().map(|user| user.map(|user| user.username).unwrap_or_default())}</h1>
</Show>
<Show
when=move || user.get().map(|user| user.is_some()).unwrap_or_default()
fallback=|| view!{
<h1>Not Logged In</h1>
}>
<h1>{move || user.get().map(|user| user.map(|user| user.username))}</h1>
</Show>
</Suspense>
</div>
<div class="profile-icon" on:click=open_dropdown>
<Show
when=move || user.get().map(|user| user.is_ok()).unwrap_or_default()
fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }
>
<Show
when=move || !image_error()
fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }
>
<img
src=user_profile_picture()
on:error=move |_| set_image_error.set(true)
/>
</Show>
</Show>
<Suspense fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }>
<Show
when=move || user.get().map(|user| user.is_some()).unwrap_or_default()
fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }
>
<object class="profile-image" data={user_profile_picture} type="image/webp">
<Icon class="profile-image" icon=icondata::CgProfile width="45" height="45"/>
</object>
</Show>
</Suspense>
</div>
<div class="dropdown-container" style={move || if dropdown_open() {"display: flex"} else {"display: none"}}>
<Show
when=move || user.get().map(|user| user.is_ok()).unwrap_or_default()
fallback=|| view!{
<DropDownNotLoggedIn />
}>
<DropDownLoggedIn />
</Show>
<Suspense
fallback=|| view!{
<DropDownNotLoggedIn />
}>
<Show
when=move || user.get().map(|user| user.is_some()).unwrap_or_default()
fallback=|| view!{
<DropDownNotLoggedIn />
}>
<DropDownLoggedIn />
</Show>
</Suspense>
</div>
</div>
}
@ -87,6 +99,8 @@ pub fn DropDownLoggedIn() -> impl IntoView {
if let Err(err) = result {
log!("Error logging out: {:?}", err);
} else {
let user = GlobalState::logged_in_user();
user.refetch();
log!("Logged out successfully");
}
});

2
style/personal.scss
View File

@ -34,7 +34,7 @@
height: 45;
width: 45;
margin-left: auto;
img {
.profile-image {
width: 100%;
height: 100%;
border-radius: 50%;