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,7 +71,47 @@ fn smooth_scroll_to_bottom() {
 
 #[component]
 pub fn HomePage() -> impl IntoView {
-    let (messages, set_messages) = signal(
+    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 {}",
+                                        if message.role == "assistant" {
+                                            "justify-start"
+                                        } else {
+                                            "justify-end"
+                                        },
+                                    )>
+                                        <div class=format!(
+                                            "max-w-[80%] rounded-sm px-4 py-3 {}",
+                                            if message.role == "assistant" {
+                                                "bg-white border border-gray-200"
+                                            } else {
+                                                "bg-blue-500 text-white"
+                                            },
+                                        )>{message.content.clone()}</div>
+                                    </div>
+                                }
+                            })
+                            .collect::<Vec<_>>(),
+                    )
+                }
+            })
+        })
+    };
+
+    let (_, set_messages) = signal(
         message::get_messages()
             .into_iter()
             .enumerate()
@@ -83,21 +124,21 @@ pub fn HomePage() -> impl IntoView {
         // stop the page from reloading!
         ev.prevent_default();
 
-        let messages_len = messages.get().len();
+        // let messages_len = messages.get().len();
-        let mut messages = set_messages.write();
+        // let mut messages = set_messages.write();
-        messages.push((
+        // messages.push((
-            messages_len,
+        //     messages_len,
-            ArcRwSignal::new(Message {
+        //     ArcRwSignal::new(Message {
-                role: "user".into(),
+        //         role: "user".into(),
-                content: input.get().into(),
+        //         content: input.get().into(),
-            }),
+        //     }),
-        ));
+        // ));
 
-        set_input.set("".into());
+        // set_input.set("".into());
 
-        request_animation_frame(move || {
+        // request_animation_frame(move || {
-            smooth_scroll_to_bottom();
+        //     smooth_scroll_to_bottom();
-        });
+        // });
     };
 
     view! {
@@ -113,38 +154,21 @@ pub fn HomePage() -> impl IntoView {
 
             <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();
 
-                            view! {
+                    <Transition fallback=move || {
-                                <div class=format!(
+                        view! {
-                                    "flex {}",
+                            <div class="flex justify-start">
-                                    if message.role == "assistant" {
+                                <div class="py-3 px-4 bg-white rounded-sm border border-gray-200 max-w-[80%]">
-                                        "justify-start"
+                                    "Loading..."
-                                    } else {
-                                        "justify-end"
-                                    },
-                                )>
-                                    <div class=format!(
-                                        "max-w-[80%] rounded-sm px-4 py-3 {}",
-                                        if message.role == "assistant" {
-                                            "bg-white border border-gray-200"
-                                        } else {
-                                            "bg-blue-500 text-white"
-                                        },
-                                    )>{message.content.clone()}</div>
                                 </div>
-                            }
+                            </div>
                         }
-                    />
+                    }>
-                    <div class="flex justify-start">
+                        <ErrorBoundary fallback=|errors| {
-                        <div class="py-3 px-4 bg-white rounded-sm border border-gray-200 max-w-[80%]">
+                            view! { <ErrorTemplate errors /> }
-                            "Loading..."
+                        }>{existing_messages}</ErrorBoundary>
-                        </div>
+                    </Transition>
-                    </div>
+
                     <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,