chore: handle the errors for the title

TownHallHQ · Sep 24, 2024 · 84852f9 · 84852f9
1 parent f829d0c
commit 84852f9
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/crates/web/src/components/publisher/mod.rs b/crates/web/src/components/publisher/mod.rs
@@ -1,4 +1,7 @@
-use leptos::{component, create_action, create_rw_signal, view, IntoView, SignalGet};
+use leptos::{
+    component, create_action, create_rw_signal, view, IntoView, RwSignal, Show, SignalGet,
+    SignalSet,
+};
 use townhall_client::{post::post_create::post_create::PostCreateInput, Client};
 
 use crate::components::text_field::TextField;
@@ -8,12 +11,15 @@ pub fn Publisher() -> impl IntoView {
     let text_title = create_rw_signal(String::default());
     let text_content = create_rw_signal(String::default());
 
-    let send_post_action = create_action(|data: &(String, String)| {
+    let creation_error: RwSignal<Option<String>> = create_rw_signal(None);
+
+    let send_post_action = create_action(move |data: &(String, String)| {
         let (title, content) = data;
 
         let title = title.to_owned();
 
         if title.is_empty() {
+            creation_error.set(Some("Title is required".to_owned()));
             ()
         }
 
@@ -43,7 +49,7 @@ pub fn Publisher() -> impl IntoView {
                     <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=3164&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A beautiful image" />
                 </figure>
             </div>
-            <div id="publisher-form" class="flex flex-col items-start justify-start w-full space-y-2">
+            <div id="publisher-form" class="flex flex-col items-start justify-start w-full space-y-5">
                 <form class="flex flex-col justify-start w-full" on:submit=move |ev| {
                             ev.prevent_default();
                             let content = text_content.get();
@@ -52,6 +58,9 @@ pub fn Publisher() -> impl IntoView {
                         }>
                     <div class="w-full h-12">
                         <TextField class="w-full" name="title" value=text_title placeholder="Title" required=true />
+                        <Show when=move || creation_error.get().is_some() fallback=move || ()>
+                            <p class="text-red-500 mb-3">{creation_error.get().unwrap()}</p>
+                        </Show>
                     </div>
                     <div class="w-full h-12">
                         <TextField class="w-full" name="content" value=text_content placeholder="Content" />