smart-house-web: leptos эсперименты

smart-house-web/frontend/src/main.rs

@@ -3,83 +3,47 @@ use leptos::prelude::*;
 
 #[component]
 fn App() -> impl IntoView {
-    let (value, set_value) = signal(0);
+    let (value, set_value) = signal(Ok(0));
-    let is_odd = move || value.get() & 1 == 1;
-    let odd_text = move || if is_odd() { Some("How odd!") } else { None };
 
     view! {
-        <h1>"Control Flow"</h1>
+        <h1>"Error Handling"</h1>
-
+        <label>
-        // Simple UI to update and show a value
+            "Type a number (or something that's not a number!)"
-        <button on:click=move |_| *set_value.write() += 1>
+            <input type="number" on:input:target=move |ev| {
-            "+1"
+                // when input changes, try to parse a number from the input
-        </button>
+                set_value.set(ev.target().value().parse::<i32>())
-        <p>"Value is: " {value}</p>
+            }/>
-
+            // If an `Err(_) had been rendered inside the <ErrorBoundary/>,
-        <hr/>
+            // the fallback will be displayed. Otherwise, the children of the
-
+            // <ErrorBoundary/> will be displayed.
-        <h2><code>"Option<T>"</code></h2>
+            <ErrorBoundary
-        // For any `T` that implements `IntoView`,
+                // the fallback receives a signal containing current errors
-        // so does `Option<T>`
+                fallback=|errors| view! {
-
+                    <div class="error">
-        <p>{odd_text}</p>
+                        <p>"Not a number! Errors: "</p>
-        // This means you can use `Option` methods on it
+                        // we can render a list of errors
-        <p>{move || odd_text().map(|text| text.len())}</p>
+                        // as strings, if we'd like
-
+                        <ul>
-        <h2>"Conditional Logic"</h2>
+                            {move || errors.get()
-        // You can do dynamic conditional if-then-else
+                                .into_iter()
-        // logic in several ways
+                                .map(|(_, e)| view! { <li>{e.to_string()}</li>})
-        //
+                                .collect::<Vec<_>>()
-        // a. An "if" expression in a function
-        //    This will simply re-render every time the value
-        //    changes, which makes it good for lightweight UI
-        <p>
-            {move || if is_odd() {
-                "Odd"
-            } else {
-                "Even"
-            }}
-        </p>
-
-        // b. Toggling some kind of class
-        //    This is smart for an element that's going to
-        //    toggled often, because it doesn't destroy
-        //    it in between states
-        //    (you can find the `hidden` class in `index.html`)
-        <p class:hidden=is_odd>"Appears if even."</p>
-
-        // c. The <Show/> component
-        //    This only renders the fallback and the child
-        //    once, lazily, and toggles between them when
-        //    needed. This makes it more efficient in many cases
-        //    than a {move || if ...} block
-        <Show when=is_odd
-            fallback=|| view! { <p>"Even steven"</p> }
-        >
-            <p>"Oddment"</p>
-        </Show>
-
-        // d. Because `bool::then()` converts a `bool` to
-        //    `Option`, you can use it to create a show/hide toggled
-        {move || is_odd().then(|| view! { <p>"Oddity!"</p> })}
-
-        <h2>"Converting between Types"</h2>
-        // e. Note: if branches return different types,
-        //    you can convert between them with
-        //    `.into_any()` or using the `Either` enums
-        //    (`Either`, `EitherOf3`, `EitherOf4`, etc.)
-        {move || match is_odd() {
-            true if value.get() == 1 => {
-                // <pre> returns HtmlElement<Pre>
-                view! { <pre>"One"</pre> }.into_any()
-            },
-            false if value.get() == 2 => {
-                // <p> returns HtmlElement<P>
-                // so we convert into a more generic type
-                view! { <p>"Two"</p> }.into_any()
                             }
-            _ => view! { <textarea>{value.get()}</textarea> }.into_any()
+                        </ul>
-        }}
+                    </div>
+                }
+            >
+                <p>
+                    "You entered "
+                    // because `value` is `Result<i32, _>`,
+                    // it will render the `i32` if it is `Ok`,
+                    // and render nothing and trigger the error boundary
+                    // if it is `Err`. It's a signal, so this will dynamically
+                    // update when `value` changes
+                    <strong>{value}</strong>
+                </p>
+            </ErrorBoundary>
+        </label>
     }
 }