From e3ff3b7b0ab1c6e4859c2c79208c7dbf2abef7f3 Mon Sep 17 00:00:00 2001
From: Valentin Tolmer <valentin@tolmer.fr>
Date: Sun, 30 May 2021 17:51:28 +0200
Subject: [PATCH] App: Display users in a table

---
 app/src/user_table.rs | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/app/src/user_table.rs b/app/src/user_table.rs
index dfba040..91fc798 100644
--- a/app/src/user_table.rs
+++ b/app/src/user_table.rs
@@ -61,14 +61,39 @@ impl Component for UserTable {
     }
 
     fn view(&self) -> Html {
-        html! {
-            <p>{
-                match &self.users {
-                     None => "Loading...".to_string(),
-                     Some(Ok(users)) => format!("Users: {:?}", &users),
-                     Some(Err(e)) => e.to_string(),
+        match &self.users {
+            None => html! {{"Loading..."}},
+            Some(Err(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
+            Some(Ok(users)) => {
+                let table_content: Vec<_> = users
+                    .iter()
+                    .map(|u| {
+                        html! {
+                            <tr>
+                                <td>{&u.user_id}</td>
+                                <td>{&u.email}</td>
+                                <td>{&u.display_name.as_ref().unwrap_or(&String::new())}</td>
+                                <td>{&u.first_name.as_ref().unwrap_or(&String::new())}</td>
+                                <td>{&u.last_name.as_ref().unwrap_or(&String::new())}</td>
+                                <td>{&u.creation_date}</td>
+                            </tr>
+                        }
+                    })
+                    .collect();
+                html! {
+                    <table>
+                      <tr>
+                        <th>{"User ID"}</th>
+                        <th>{"Email"}</th>
+                        <th>{"Display name"}</th>
+                        <th>{"First name"}</th>
+                        <th>{"Last name"}</th>
+                        <th>{"Creation date"}</th>
+                      </tr>
+                      {table_content}
+                    </table>
                 }
-            }</p>
+            }
         }
     }
 }