wip: move some examples around

examples/_examples/list.rs

@@ -0,0 +1,174 @@
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_html_namespace as dioxus_elements;
+use dioxus_web::WebsysRenderer;
+use std::collections::BTreeMap;
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
+}
+
+static APP_STYLE: &'static str = include_str!("./todomvc/style.css");
+
+#[derive(PartialEq, Clone, Copy)]
+pub enum FilterState {
+    All,
+    Active,
+    Completed,
+}
+
+#[derive(Debug, PartialEq, Clone)]
+pub struct TodoItem {
+    pub id: uuid::Uuid,
+    pub checked: bool,
+    pub contents: String,
+}
+
+static App: FC<()> = |cx| {
+    let (draft, set_draft) = use_state_classic(cx, || "".to_string());
+    let (filter, set_filter) = use_state_classic(cx, || FilterState::All);
+    let todos = use_state(cx, || BTreeMap::<uuid::Uuid, TodoItem>::new());
+    cx.render(rsx!(
+        div {
+            id: "app"
+            div {
+                header {
+                    class: "header"
+                    h1 {"todos"}
+                    button {
+                        "press me"
+                        onclick: move |evt| {
+                            let contents = draft.clone();
+                            todos.modify(|f| {
+                                let id = uuid::Uuid::new_v4();
+                                f.insert(id.clone(), TodoItem {
+                                    id,
+                                    checked: false,
+                                    contents
+                                });
+                            })
+                        }
+                    }
+                    input {
+                        class: "new-todo"
+                        placeholder: "What needs to be done?"
+                        oninput: move |evt| set_draft(evt.value())
+                    }
+                }
+
+                { // list
+                    todos
+                    .iter()
+                    .filter(|(id, item)| match filter {
+                        FilterState::All => true,
+                        FilterState::Active => !item.checked,
+                        FilterState::Completed => item.checked,
+                    })
+                    .map(|(id, todo)| {
+                        rsx!{
+                            li {
+                                key: "{id}"
+                                "{todo.contents}"
+                                input {
+                                    class: "toggle"
+                                    r#type: "checkbox"
+                                    "{todo.checked}"
+                                }
+                            }
+                        }
+                    })
+                }
+
+                // filter toggle (show only if the list isn't empty)
+                {(!todos.is_empty()).then(||
+                    rsx!{
+                        footer {
+                            span {
+                                strong {"10"}
+                                span {"0 items left"}
+                            }
+                            ul {
+                                class: "filters"
+                            {[
+                                    ("All", "", FilterState::All),
+                                    ("Active", "active", FilterState::Active),
+                                    ("Completed", "completed", FilterState::Completed),
+                                ]
+                                .iter()
+                                .map(|(name, path, filter)| {
+                                    rsx!(
+                                        li {
+                                            class: "{name}"
+                                            a {
+                                                href: "{path}"
+                                                onclick: move |_| set_filter(filter.clone())
+                                                "{name}"
+                                            }
+                                        }
+                                    )
+                                })
+                            }}
+                        }
+                    }
+                )}
+            }
+
+
+            footer {
+                class: "info"
+                p {"Double-click to edit a todo"}
+                p {
+                    "Created by "
+                    a { "jkelleyrtp", href: "http://github.com/jkelleyrtp/" }
+                }
+                p {
+                    "Part of "
+                    a { "TodoMVC", href: "http://todomvc.com" }
+                }
+            }
+        }
+    ))
+};
+
+pub fn FilterToggles(cx: Context<()>) -> VNode {
+    // let reducer = recoil::use_callback(&cx, || ());
+    // let items_left = recoil::use_atom_family(&cx, &TODOS, uuid::Uuid::new_v4());
+
+    let toggles = [
+        ("All", "", FilterState::All),
+        ("Active", "active", FilterState::Active),
+        ("Completed", "completed", FilterState::Completed),
+    ]
+    .iter()
+    .map(|(name, path, _filter)| {
+        rsx!(
+            li {
+                class: "{name}"
+                a {
+                    href: "{path}"
+                    // onclick: move |_| reducer.set_filter(&filter)
+                    "{name}"
+                }
+            }
+        )
+    });
+
+    // todo
+    let item_text = "";
+    let items_left = "";
+
+    cx.render(rsx! {
+        footer {
+            span {
+                strong {"{items_left}"}
+                span {"{item_text} left"}
+            }
+            ul {
+                class: "filters"
+                {toggles}
+            }
+        }
+    })
+}