Show user by ID implemented

At /users/{id},
Also minor bugfixes and improvements

frontend/src/pages/ticket.rs

@@ -36,7 +36,7 @@ pub struct TicketProps {
 }
 
 #[derive(Deserialize, Debug)]
-pub struct ApiError {
+struct ApiError {
     message: String,
     _status: String,
 }

frontend/src/pages/user.rs

@@ -40,7 +40,13 @@ pub struct FilteredUser {
 
 #[derive(Properties, PartialEq)]
 pub struct UserProps {
-    id: i16,
+    pub id: i16,
+}
+
+#[derive(Deserialize, Debug)]
+struct ApiError {
+    message: String,
+    _status: String,
 }
 
 #[component(Register)]
@@ -285,5 +291,71 @@ pub fn all_users_component() -> Html {
     }
 }
 
-//#[component(UserByID)]
-//pub fn user_by_id_component()
+#[component(UserByID)]
+pub fn user_by_id_component(props: &UserProps) -> Html {
+    let user = use_state(|| None::<FilteredUser>);
+    let error = use_state(|| None::<String>);
+    let loading = use_state(|| false);
+    let id = props.id;
+    let status = use_state(|| "".to_string());
+
+    {
+        let user = user.clone();
+        let error = error.clone();
+        let loading = loading.clone();
+
+        use_effect_with(id, move |id_ref| {
+            loading.set(true);
+            let user = user.clone();
+            let error = error.clone();
+            let id = *id_ref;
+            spawn_local(async move {
+                let url = format!("/api/users/{}", id);
+
+                match Request::get(&url).send().await {
+                    Ok(response) => {
+                        let status = response.status();
+                        if status == 200 {
+                            match response.json::<FilteredUser>().await {
+                                Ok(u) => user.set(Some(u)),
+                                Err(err) => error.set(Some(format!("Parse error: {}", err))),
+                            }
+                        } else {
+                            match response.json::<ApiError>().await {
+                                Ok(ae) => error.set(Some(ae.message)),
+                                Err(_) => {
+                                    if let Ok(text) = response.text().await {
+                                        error.set(Some(text));
+                                    } else {
+                                        error.set(Some(format!("Server error: {}", status)));
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                }
+                loading.set(false);
+            });
+            || ()
+        });
+    }
+
+    if *loading {
+        html! {<p>{ "Loading" }</p>}
+    } else if let Some(e) = &*error {
+        html! { <p>{ format!("Error: {}", e) }</p> }
+    } else if let Some(u) = &*user {
+        html! {
+            <div>
+                <h1>{ format!("User #{}", u.id) }</h1>
+                <p><strong>{ "Vorname: " }</strong>{ &u.first_name }</p>
+                <p><strong>{ "Nachname: " }</strong>{ &u.last_name }</p>
+                <p><strong>{ "Benutzername: " }</strong>{ &u.username }</p>
+                <p><strong>{ "Ist Admin: " }</strong>{ u.is_admin }</p>
+            </div>
+        }
+    } else {
+        html! { <p>{ "No ticket found." }</p> }
+    }
+}