diff --git a/examples/router/index.html b/examples/router/index.html index b5ec4d243..7e3c8d4b2 100644 --- a/examples/router/index.html +++ b/examples/router/index.html @@ -2,6 +2,17 @@ + \ No newline at end of file diff --git a/examples/router/src/api.rs b/examples/router/src/api.rs index e91c2c346..def4d77bd 100644 --- a/examples/router/src/api.rs +++ b/examples/router/src/api.rs @@ -29,17 +29,29 @@ pub struct Contact { pub async fn get_contacts(search: String) -> Vec { // fake an API call with an artificial delay - delay(Duration::from_millis(100)).await; - vec![ContactSummary { - id: 0, - first_name: "Bill".into(), - last_name: "Smith".into(), - }] + delay(Duration::from_millis(300)).await; + vec![ + ContactSummary { + id: 0, + first_name: "Bill".into(), + last_name: "Smith".into(), + }, + ContactSummary { + id: 1, + first_name: "Tim".into(), + last_name: "Jones".into(), + }, + ContactSummary { + id: 2, + first_name: "Sally".into(), + last_name: "Stevens".into(), + }, + ] } pub async fn get_contact(id: Option) -> Option { // fake an API call with an artificial delay - delay(Duration::from_millis(350)).await; + delay(Duration::from_millis(500)).await; match id { Some(0) => Some(Contact { id: 0, @@ -53,6 +65,30 @@ pub async fn get_contact(id: Option) -> Option { email: "bill@smith.com".into(), phone: "617-121-1221".into(), }), + Some(1) => Some(Contact { + id: 1, + first_name: "Tim".into(), + last_name: "Jones".into(), + address_1: "56 Main Street".into(), + address_2: "".into(), + city: "Chattanooga".into(), + state: "TN".into(), + zip: "13371".into(), + email: "timjones@lmail.com".into(), + phone: "232-123-1337".into(), + }), + Some(2) => Some(Contact { + id: 2, + first_name: "Sally".into(), + last_name: "Stevens".into(), + address_1: "404 E 123rd St".into(), + address_2: "Apt 7E".into(), + city: "New York".into(), + state: "NY".into(), + zip: "10082".into(), + email: "sally.stevens@wahoo.net".into(), + phone: "242-121-3789".into(), + }), _ => None, } } diff --git a/examples/router/src/lib.rs b/examples/router/src/lib.rs index 96ac7047d..244f273e8 100644 --- a/examples/router/src/lib.rs +++ b/examples/router/src/lib.rs @@ -13,105 +13,148 @@ use crate::api::{get_contact, get_contacts}; fn contact_list( cx: Scope, - params: ParamsMap, + params: Memo, location: Location, ) -> Resource> { log::debug!("(contact_list) reloading contact list"); - create_resource(cx, location.search, move |s| get_contacts(s.to_string())) + create_resource(cx, location.search, get_contacts) } fn contact( cx: Scope, - params: ParamsMap, + params: Memo, location: Location, ) -> Resource, Option> { log::debug!("(contact) reloading contact"); create_resource( cx, move || { - params + params() .get("id") .cloned() .unwrap_or_default() .parse::() .ok() }, - move |id| get_contact(id), + get_contact, ) } pub fn router_example(cx: Scope) -> Element { view! {
- -
- - + + + } + > } + path="contacts" + element=move |cx| view! { } loader=contact_list.into() > } + element=move |cx| view! { } + /> + "Here is your list of contacts"

} + /> + "Select a contact."

} /> } + element=move |cx| view! { } /> } + element=move |cx| view! { } /> - - -
+ + +
} } #[component] -pub fn ContactList(cx: Scope) -> Vec { - let contacts = use_loader::>>(cx); - +pub fn Index(cx: Scope) -> Vec { view! { <> -

"Contacts"

- -
+ +
} } #[component] -pub fn Contact(cx: Scope) -> Element { - //let contact = use_loader::, Option>>(cx); +pub fn ContactList(cx: Scope) -> Element { + let contacts = use_loader::>>(cx); + + log::debug!( + "[ContactList] before , use_route(cx).path() is {:?}", + use_route(cx).path() + ); view! { - 
"Contact info here"
+
+

"Contacts"

+ "About" + "Link to first contact" +
    + "Loading contacts..."

    }>{ + move || { + log::debug!("[ContactList] inside , use_route(cx) is now {:?}", use_route(cx).path()); + view! { + + {move |cx, contact: &ContactSummary| { + view! { +
  • {&contact.first_name} " " {&contact.last_name}
    • + } + }} +     + } + } + }     +
+ +
} } #[component] -pub fn About(cx: Scope) -> Vec { +pub fn Contact(cx: Scope) -> Element { + let contact = use_loader::, Option>>(cx); + + view! { +
+ "Loading..."

}>{ + move || contact.read().flatten().map(|contact| view! { +
+

{contact.first_name} " " {contact.last_name}

+

{contact.address_1}
{contact.address_2}

+
+ }) + } +
+ } +} + +#[component] +pub fn About(_cx: Scope) -> Vec { view! { <>

"About"

@@ -121,7 +164,7 @@ pub fn About(cx: Scope) -> Vec { } #[component] -pub fn Settings(cx: Scope) -> Vec { +pub fn Settings(_cx: Scope) -> Vec { view! { <>

"Settings"