feat: signal refactor for loaner page

src/components/text_field.rs

@@ -21,7 +21,6 @@ pub enum TextFieldType {
 
 /// Entry point for validating a text field.
 fn validate(required: bool, value: &str, input_type: &TextFieldType) -> ValidationState {
-    log!("Input information: required: {}, value: \"{}\", input_type: {:?}", required, value, input_type);
     if required && value.is_empty() {
         ValidationState::Invalid("This field is required.".to_string())
     } else {
@@ -36,7 +35,6 @@ fn validate(required: bool, value: &str, input_type: &TextFieldType) -> Validati
 /// Validates an email address.
 fn validate_email(input: &str) -> ValidationState {
     // TODO Accept more than just Region 15 addresses.
-    log!("Validating email: {}", input);
     let pattern = regex::Regex::new(r"^[a-zA-Z0-9._%+-]+@region15\.org$").expect("Invalid regex pattern");
 
     if pattern.is_match(input) {
@@ -48,7 +46,6 @@ fn validate_email(input: &str) -> ValidationState {
 
 /// Validates a number.
 fn validate_number(input: &str) -> ValidationState {
-    log!("Validating number: {}", input);
     if input.parse::<i32>().is_ok() {
         ValidationState::Valid
     } else {

src/pages/loaner_page.rs

@@ -5,9 +5,7 @@ use aws_sdk_dynamodb::{Client, error::ProvideErrorMetadata, types::AttributeValu
 use serde_dynamo::{from_item, to_item};
 
 use crate::common::{ExpandableInfo, ValueType};
-use crate::components::{
-    ActionButton, Banner, DashboardButton, OutlinedTextField, Panel, Row, Select,
-};
+use crate::components::{ActionButton, Banner, DashboardButton, OutlinedTextField, Panel, Row, Select, TextFieldType, ValidatedForm};
 use chrono::{FixedOffset, TimeZone};
 use leptos::Params;
 use leptos::either::{Either, EitherOf3};
@@ -247,11 +245,20 @@ pub fn LoanerBorrowForm() -> impl IntoView {
     let create_entry_action = ServerAction::<CreateBorrowEntry>::new();
     let navigate = use_navigate();
 
-    let temp = ExpandableInfo::new(uuid::Uuid::new_v4().to_string());
-    let temp_reactive = temp.as_reactive();
-    let elements_disabled = RwSignal::new(false);
+    let data = RwSignal::new(HashMap::new());
+    let elements_disabled = Signal::derive(move || create_entry_action.pending().get());
+
+    let on_submit = move |_| {
+        create_entry_action.dispatch(CreateBorrowEntry {
+            input: ExpandableInfo {
+                subject: uuid::Uuid::new_v4().to_string(),
+                data: data.get(),
+            }
+        });
+    };
 
     view! {
+        <ValidatedForm on_submit=Callback::new(on_submit)>
             <div class="flex flex-col justify-center gap-2 mb-1 py-3 px-2">
                 <h2 class="text-2xl font-bold">"Borrower Information"</h2>
                 <p class="text-lg">"Please fill out the form below."</p>
@@ -262,14 +269,14 @@ pub fn LoanerBorrowForm() -> impl IntoView {
                     placeholder="John"
                     disabled=elements_disabled
                     data_member="first_name"
-                data_map=temp_reactive.data
+                    data_map=data
                 />
                 <OutlinedTextField
                     label="Last Name:"
                     placeholder="Smith"
                     disabled=elements_disabled
                     data_member="last_name"
-                data_map=temp_reactive.data
+                    data_map=data
                 />
             </Row>
             <Row>
@@ -278,7 +285,8 @@ pub fn LoanerBorrowForm() -> impl IntoView {
                     placeholder="example@region15.org"
                     disabled=elements_disabled
                     data_member="email"
-                data_map=temp_reactive.data
+                    data_map=data
+                    input_type=TextFieldType::Email
                 />
             </Row>
             <Row>
@@ -293,7 +301,7 @@ pub fn LoanerBorrowForm() -> impl IntoView {
                     ]
                     disabled=elements_disabled
                     data_member="collateral"
-                data_map=temp_reactive.data
+                    data_map=data
                 />
             </Row>
             <Row>
@@ -306,22 +314,10 @@ pub fn LoanerBorrowForm() -> impl IntoView {
                     ]
                     disabled=elements_disabled
                     data_member="loan"
-                data_map=temp_reactive.data
+                    data_map=data
                 />
             </Row>
-        <Row>
-            <ActionButton
-                on:click=move |_| {
-                    let captured = temp_reactive.capture();
-                    log!("Loaner record taken.");
-                    log!("{:?}", captured);
-                    create_entry_action.dispatch(CreateBorrowEntry {
-                        input: captured
-                    });
-                    navigate("/loaners", Default::default());
-                }
-            >"Submit"</ActionButton>
-        </Row>
+        </ValidatedForm>
     }
 }