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

2
style/personal.scss
View File

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