fix: update error message

crates/app/Cargo.toml

@@ -35,6 +35,7 @@ ssr = [
   "dep:leptos_axum",
   "dep:serde_json",
   "dep:axum",
+  "reqwest",
 ]
 reqwest = ["dep:reqwest"]
 axum = ["dep:axum"]

crates/app/src/error_template.rs

@@ -25,7 +25,7 @@ impl AppError {
 #[component]
 pub fn ErrorTemplate(
     #[prop(optional)] outside_errors: Option<Errors>,
-    #[prop(optional)] errors: Option<RwSignal<Errors>>,
+    #[prop(optional, into)] errors: Option<RwSignal<Errors>>,
 ) -> impl IntoView {
     let errors = match outside_errors {
         Some(e) => RwSignal::new(e),

crates/app/src/lib.rs

@@ -1,9 +1,10 @@
 use crate::error_template::{AppError, ErrorTemplate};
 
-use leptos::{ev::SubmitEvent, html, prelude::*};
+use leptos::{either::Either, ev::SubmitEvent, html, prelude::*};
 use leptos_meta::*;
 use leptos_router::{components::*, StaticSegment};
 use message::Message;
+use serde::{Deserialize, Serialize};
 
 pub mod error_template;
 
@@ -70,55 +71,19 @@ fn smooth_scroll_to_bottom() {
 
 #[component]
 pub fn HomePage() -> impl IntoView {
-    let (messages, set_messages) = signal(
-        message::get_messages()
-            .into_iter()
-            .enumerate()
-            .map(|(index, value)| (index, ArcRwSignal::new(value)))
-            .collect::<Vec<_>>(),
-    );
-    let (input, set_input) = signal("".to_string());
-
-    let on_submit = move |ev: SubmitEvent| {
-        // stop the page from reloading!
-        ev.prevent_default();
-
-        let messages_len = messages.get().len();
-        let mut messages = set_messages.write();
-        messages.push((
-            messages_len,
-            ArcRwSignal::new(Message {
-                role: "user".into(),
-                content: input.get().into(),
-            }),
-        ));
-
-        set_input.set("".into());
-
-        request_animation_frame(move || {
-            smooth_scroll_to_bottom();
-        });
-    };
-
-    view! {
-        <div class="flex flex-col h-screen bg-gray-50">
-            <header class="flex items-center py-4 px-4 bg-white border-b border-gray-200">
-                <div class="flex justify-between items-center mx-auto w-full max-w-5xl">
-                    <h1 class="text-xl font-semibold text-gray-800">Medical Assistant</h1>
-                    <button class="flex gap-2 items-center py-2 px-4 text-sm text-gray-600 bg-white rounded-sm border border-gray-200 hover:bg-gray-50">
-                        New Chat
-                    </button>
-                </div>
-            </header>
-
-            <div class="overflow-y-auto flex-1 px-4" id="messages">
-                <div class="py-6 mx-auto space-y-6 max-w-5xl">
-                    <For
-                        each=move || messages.get()
-                        key=|message| message.0
-                        children=move |(_id, message)| {
-                            let message = message.read();
+    let messages = Resource::new(|| (), move |_| get_messages());
 
+    let existing_messages = move || {
+        Suspend::new(async move {
+            messages.await.map(|messages| {
+                if messages.messages.is_empty() {
+                    Either::Left(view! { <p>"No messages sent yet"</p> })
+                } else {
+                    Either::Right(
+                        messages
+                            .messages
+                            .iter()
+                            .map(move |message| {
                                 view! {
                                     <div class=format!(
                                         "flex {}",
@@ -138,13 +103,72 @@ pub fn HomePage() -> impl IntoView {
                                         )>{message.content.clone()}</div>
                                     </div>
                                 }
+                            })
+                            .collect::<Vec<_>>(),
+                    )
                 }
-                    />
+            })
+        })
+    };
+
+    let (_, set_messages) = signal(
+        message::get_messages()
+            .into_iter()
+            .enumerate()
+            .map(|(index, value)| (index, ArcRwSignal::new(value)))
+            .collect::<Vec<_>>(),
+    );
+    let (input, set_input) = signal("".to_string());
+
+    let on_submit = move |ev: SubmitEvent| {
+        // stop the page from reloading!
+        ev.prevent_default();
+
+        // let messages_len = messages.get().len();
+        // let mut messages = set_messages.write();
+        // messages.push((
+        //     messages_len,
+        //     ArcRwSignal::new(Message {
+        //         role: "user".into(),
+        //         content: input.get().into(),
+        //     }),
+        // ));
+
+        // set_input.set("".into());
+
+        // request_animation_frame(move || {
+        //     smooth_scroll_to_bottom();
+        // });
+    };
+
+    view! {
+        <div class="flex flex-col h-screen bg-gray-50">
+            <header class="flex items-center py-4 px-4 bg-white border-b border-gray-200">
+                <div class="flex justify-between items-center mx-auto w-full max-w-5xl">
+                    <h1 class="text-xl font-semibold text-gray-800">Medical Assistant</h1>
+                    <button class="flex gap-2 items-center py-2 px-4 text-sm text-gray-600 bg-white rounded-sm border border-gray-200 hover:bg-gray-50">
+                        New Chat
+                    </button>
+                </div>
+            </header>
+
+            <div class="overflow-y-auto flex-1 px-4" id="messages">
+                <div class="py-6 mx-auto space-y-6 max-w-5xl">
+
+                    <Transition fallback=move || {
+                        view! {
                             <div class="flex justify-start">
                                 <div class="py-3 px-4 bg-white rounded-sm border border-gray-200 max-w-[80%]">
                                     "Loading..."
                                 </div>
                             </div>
+                        }
+                    }>
+                        <ErrorBoundary fallback=|errors| {
+                            view! { <ErrorTemplate errors /> }
+                        }>{existing_messages}</ErrorBoundary>
+                    </Transition>
+
                     <div />
                 </div>
             </div>
@@ -171,3 +195,21 @@ pub fn HomePage() -> impl IntoView {
         </div>
     }
 }
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+pub struct Messages {
+    pub messages: Vec<Message>,
+}
+
+#[server]
+pub async fn get_messages() -> Result<Messages, ServerFnError> {
+    let messages: Messages =
+        reqwest::get("https://lebusiness-service.prod.kjuulh.app/api/messages")
+            .await
+            .map_err(|e| ServerFnError::new(e.to_string()))?
+            .json()
+            .await
+            .map_err(|e| ServerFnError::new(e.to_string()))?;
+
+    Ok(messages)
+}

crates/app/src/message.rs

@@ -1,3 +1,6 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
 pub struct Message {
     pub role: String,
     pub content: String,