From 6aa933be09d3b4d99c6b7c32f044ad40cdd872cf Mon Sep 17 00:00:00 2001
From: ecco257 <connorjwittman@gmail.com>
Date: Fri, 25 Oct 2024 22:59:06 -0400
Subject: [PATCH] Refactor profile picture display to account for no profile
 picture

---
 src/components/personal.rs | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/personal.rs b/src/components/personal.rs
index b199667..dc072b3 100644
--- a/src/components/personal.rs
+++ b/src/components/personal.rs
@@ -16,6 +16,7 @@ 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 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 || {
-        user.get().map(|user| {
-            if let Ok(user) = user {
-                return format!("/assets/images/profile/{}.webp", user.id.unwrap());
-            } else {
-                return "".to_string();
-            }
+        user.get().and_then(|user| {
+            user.ok().map(|user| format!("/assets/images/profile/{}.webp", user.id.unwrap()))
         })
     };
 
@@ -42,16 +39,23 @@ pub fn Profile() -> impl IntoView {
                         <h1>Not Logged In</h1>
                     }>
                     <h1>{move || user.get().map(|user| user.map(|user| user.username).unwrap_or_default())}</h1>
-					<h2>{move || user.get().map(|user| user.map(|user| user.email).unwrap_or_default())}</h2>
+                    <h2>{move || user.get().map(|user| user.map(|user| user.email).unwrap_or_default())}</h2>
                 </Show>
             </div>
             <div class="profile-icon" on:click=open_dropdown>
-                <Show
+                <Show 
                     when=move || logged_in.get().unwrap_or_default()
-                    fallback=|| view!{
-                        <Icon icon=icondata::CgProfile />
-                    }>  
-                    <img src=user_profile_picture />
+                    fallback=|| view! { <Icon icon=icondata::CgProfile /> }
+                >
+                    <Show
+                        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>
             </div>
             <div class="dropdown-container" style={move || if dropdown_open() {"display: flex"} else {"display: none"}}>