Refactor profile picture display to account for no profile picture

This commit is contained in:
Connor Wittman 2024-10-25 22:59:06 -04:00
parent acf15961cd
commit 6aa933be09

View File

@ -16,6 +16,7 @@ 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 = create_local_resource(move || dropdown_open.get(), |_| async move { get_user().await }); let user = create_local_resource(move || dropdown_open.get(), |_| async move { get_user().await });
let logged_in = create_local_resource(move || dropdown_open.get(), |_| async move { get_user().await.is_ok() }); let logged_in = create_local_resource(move || dropdown_open.get(), |_| async move { get_user().await.is_ok() });
@ -24,12 +25,8 @@ pub fn Profile() -> impl IntoView {
}; };
let user_profile_picture = move || { let user_profile_picture = move || {
user.get().map(|user| { user.get().and_then(|user| {
if let Ok(user) = user { user.ok().map(|user| format!("/assets/images/profile/{}.webp", user.id.unwrap()))
return format!("/assets/images/profile/{}.webp", user.id.unwrap());
} else {
return "".to_string();
}
}) })
}; };
@ -48,10 +45,17 @@ pub fn Profile() -> impl IntoView {
<div class="profile-icon" on:click=open_dropdown> <div class="profile-icon" on:click=open_dropdown>
<Show <Show
when=move || logged_in.get().unwrap_or_default() when=move || logged_in.get().unwrap_or_default()
fallback=|| view!{ fallback=|| view! { <Icon icon=icondata::CgProfile /> }
<Icon icon=icondata::CgProfile /> >
}> <Show
<img src=user_profile_picture /> when=move || !image_error()
fallback=|| view! { <Icon icon=icondata::CgProfile /> }
>
<img
src=user_profile_picture()
on:error=move |_| set_image_error.set(true)
/>
</Show>
</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"}}>