feat: make toasts available on all routes

src/app.rs

@@ -3,6 +3,7 @@ use leptos::prelude::*;
 use leptos_meta::{MetaTags, Stylesheet, Title, provide_meta_context};
 use leptos_oidc::{Auth, AuthParameters, AuthSignal, Challenge};
 use leptos_router::{components::{Route, Router, Routes, ParentRoute}, path};
+use crate::components::ToastList;
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
@@ -94,6 +95,7 @@ pub fn AppWithRoutes() -> impl IntoView {
         <Title text="R15 Scholarship App DEV" />
         
         <main>
+            <ToastList>
                 // TODO Create a 404 page
                 <Routes fallback=|| "Page not found.".into_view()>
                     <Route path=path!("") view=HomePage/>
@@ -111,6 +113,7 @@ pub fn AppWithRoutes() -> impl IntoView {
                         <Route path=path!(":form_name") view=LoanerPage />
                     </ParentRoute>
                 </Routes>
+            </ToastList>
         </main>
     }
 }

src/components/toasts/toast_list.rs

@@ -4,6 +4,7 @@ use crate::components::toasts::toast::Toast;
 #[derive(Clone, Debug)]
 pub struct Toast {
     id: String,
+    header: String,
     message: String,
 }
 
@@ -11,10 +12,16 @@ impl Toast {
     pub fn new() -> Self {
         Toast {
             id: "".to_owned(),
+            header: "".to_owned(),
             message: "".to_owned(),
         }
     }
     
+    pub fn header(mut self, header: impl Into<String>) -> Self {
+        self.header = header.into();
+        self
+    }
+    
     pub fn msg(mut self, msg: impl Into<String>) -> Self {
         self.message = msg.into();
         self
@@ -61,11 +68,11 @@ pub fn ToastList(
             <For
                 each=move || context.messages.get()
                 key=|toast| toast.id.clone()
-                let(Toast { id, message })
+                let(Toast { id, header, message })
             >
                 <Toast
                     message=message
-                    title="Testing Toast"
+                    title=header
                     on_close=move || {
                         context.messages.update(|list|
                             list.retain(|v| v.id != id)

src/components/validated_form.rs

@@ -149,7 +149,7 @@ pub fn ValidatedForm(
                 }
                 button_type="submit"
             >
-                "Submit form (but actually)"
+                "Submit"
             </ActionButton>
         </form>
     }

src/pages/provider_contact.rs

@@ -3,7 +3,7 @@ use leptos::logging::log;
 use leptos::prelude::*;
 use leptos_oidc::{AuthLoaded, Authenticated};
 use crate::common::ValueType;
-use crate::components::{Banner, Loading, OutlinedTextField, Panel, Row, TextFieldType, ValidatedForm};
+use crate::components::{Banner, Loading, OutlinedTextField, Panel, Row, TextFieldType, Toast, ToastContext, ToastList, ValidatedForm};
 use crate::pages::UnauthenticatedPage;
 use crate::pages::utils::get_user_claims;
 
@@ -120,19 +120,32 @@ pub fn ProviderContactPage() -> impl IntoView {
         submit_action.pending().get()
     });
 
+    let mut toasts_context = expect_context::<ToastContext>();
+    Effect::new(move || {
+        submit_action.value().get().is_some()
+            .then(|| {
+                toasts_context.toast(
+                    Toast::new()
+                        .id(uuid::Uuid::new_v4())
+                        .header("Submission Successful")
+                        .msg("You can go back or continue editing your responses.")
+                );
+            });
+    });
+    
     // Display contact form.
     view! {
-        <Banner
-            title="R15 Scholarships"
-            logo="/PHS_Stacked_Acronym.png"
-            path="/"
-        />
+        <Banner title="R15 Scholarships" logo="/PHS_Stacked_Acronym.png" path="/" />
         <AuthLoaded fallback=Loading>
             <Authenticated unauthenticated=UnauthenticatedPage>
                 <Suspense fallback=Loading>
+                    <div class="flex flex-row">
+                        <div class="flex flex-col flex-1" />
                         <Panel>
                             <ValidatedForm on_submit=on_submit>
-                            {move || contact_resource.get()
+                                {move || {
+                                    contact_resource
+                                        .get()
                                         .map(|_| {
                                             view! {
                                                 <Row>
@@ -197,9 +210,11 @@ pub fn ProviderContactPage() -> impl IntoView {
                                                 </Row>
                                             }
                                         })
-                            }
+                                }}
                             </ValidatedForm>
                         </Panel>
+                        <div class="flex flex-col flex-1" />
+                    </div>
                 </Suspense>
             </Authenticated>
         </AuthLoaded>