swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: todomvc

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-04-01 00:01:42 -04:00
1 parent ce33031519
commit cfa0927cdd
20 files changed
+934 -245
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/web/examples/todomvc.rs
+160 -120
View File
@@ -1,75 +1,49 @@
use std::{
collections::{BTreeMap, BTreeSet},
sync::atomic::AtomicUsize,
};
use dioxus_core::prelude::*;
use dioxus_web::WebsysRenderer;
use recoil::{use_recoil_callback, RecoilContext};
use uuid::Uuid;
// Entry point
static TODOS: AtomFamily<Uuid, TodoItem> = atom_family(|_| {});
fn main() {
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, props| {
ctx.create_context(|| model::TodoManager::new());
let global_reducer = use_recoil_callback(|| ());
let todos = use_atom(TODOS).iter().map(|(order, item)| {
rsx!(TodoItem {
key: "{order}",
id: item.id,
})
});
ctx.render(rsx! {
div {
TodoList {}
{todos}
Footer {}
}
})
}))
}
static TodoList: FC<()> = |ctx, props| {
let todos = use_state_new(&ctx, || BTreeMap::<usize, model::TodoItem>::new());
let items = todos.iter().map(|(order, item)| {
rsx!(TodoItem {
// key: "{}",
todo: item
})
});
ctx.render(rsx! {
div {
{items}
}
})
};
#[derive(Debug, PartialEq, Props)]
struct TodoItemsProp<'a> {
todo: &'a model::TodoItem,
#[derive(Debug, PartialEq, Clone)]
pub struct TodoItem {
pub id: Uuid,
pub checked: bool,
pub contents: String,
}
fn TodoItem(ctx: Context, props: &TodoItemsProp) -> DomTree {
let (editing, set_editing) = use_state(&ctx, || false);
let id = props.todo.id;
ctx.render(rsx! (
li {
div {
"{id}"
}
// {input}
}
))
// build a global context for the app
// as we scale the app, we can create separate, stateful impls
impl RecoilContext<()> {
fn add_todo(&self) {}
fn remove_todo(&self) {}
fn select_all_todos(&self) {}
}
static Footer: FC<()> = |ctx, props| {
ctx.render(html! {
<footer className="info">
<p>"Double-click to edit a todo"</p>
<p>
"Created by "<a href="http://github.com/jkelleyrtp/">"jkelleyrtp"</a>
</p>
<p>
"Part of "<a href="http://todomvc.com">"TodoMVC"</a>
</p>
</footer>
})
};
mod hooks {
use super::*;
fn use_keyboard_shortcuts(ctx: &Context) {}
}
// The data model that the todo mvc uses
mod model {
@@ -84,12 +58,26 @@ mod model {
pub contents: String,
}
struct Dispatcher {}
fn atom() {}
// struct Dispatcher {}
struct AppContext<T: Clone> {
_t: std::rc::Rc<T>,
}
// pub fn use_appcontext<T: Clone>(ctx: &Context, f: impl FnOnce() -> T) -> AppContext<T> {
// todo!()
// }
// static TodoList: ContextFamily = context_family();
// struct TodoBoss<'a> {}
// fn use_recoil_todos() -> TodoBoss {}
// pub fn use_context_family(ctx: &Context) {}
impl<T: Clone> AppContext<T> {
fn dispatch(&self, f: impl FnOnce(&mut T)) {}
fn async_dispatch(&self, f: impl Future<Output = ()>) {}
@@ -101,78 +89,130 @@ mod model {
}
}
// use im-rc if your contexts are too large to clone!
// or, dangerously mutate and update subscriptions manually
#[derive(Clone)]
pub struct TodoManager {
items: Vec<u32>,
// // use im-rc if your contexts are too large to clone!
// // or, dangerously mutate and update subscriptions manually
// #[derive(Clone, Debug, PartialEq)]
// pub struct TodoManager {
// items: Vec<u32>,
// }
// // App context is an ergonomic way of sharing data models through a tall tree
// // Because it holds onto the source data with Rc, it's cheap to clone through props and allows advanced memoization
// // It's particularly useful when moving through tall trees, or iterating through complex data models.
// // By wrapping the source type, we can forward any mutation through "dispatch", making it clear when clones occur.
// // This also enables traditional method-style
// impl AppContext<TodoManager> {
// fn get_todos(&self, ctx: &Context) {}
// fn remove_todo(&self, id: Uuid) {
// self.dispatch(|f| {
// // todos... remove
// })
// }
// async fn push_todo(&self, todo: TodoItem) {
// self.dispatch(|f| {
// //
// f.items.push(10);
// });
// }
// fn add_todo(&self) {
// // self.dispatch(|f| {});
// // let items = self.get(|f| &f.items);
// }
// }
// pub enum TodoActions {}
// impl TodoManager {
// pub fn reduce(s: &mut Rc<Self>, action: TodoActions) {
// match action {
// _ => {}
// }
// }
// pub fn new() -> Rc<Self> {
// todo!()
// }
// pub fn get_todo(&self, id: Uuid) -> &TodoItem {
// todo!()
// }
// pub fn get_todos(&self) -> &BTreeMap<String, TodoItem> {
// todo!()
// }
// }
// pub struct TodoHandle {}
// impl TodoHandle {
// fn get_todo(&self, id: Uuid) -> &TodoItem {
// todo!()
// }
// fn add_todo(&self, todo: TodoItem) {}
// }
// // use_reducer, but exposes the reducer and context to children
// fn use_reducer_context() {}
// fn use_context_selector() {}
// fn use_context<'b, 'c, Root: 'static, Item: 'c>(
// ctx: &'b Context<'c>,
// f: impl Fn(Root) -> &'c Item,
// ) -> &'c Item {
// todo!()
// }
// pub fn use_todo_item<'b, 'c>(ctx: &'b Context<'c>, item: Uuid) -> &'c TodoItem {
// todo!()
// // ctx.use_hook(|| TodoManager::new(), |hook| {}, cleanup)
// }
// fn use_todos(ctx: &Context) -> TodoHandle {
// todo!()
// }
// fn use_todo_context(ctx: &Context) -> AppContext<TodoManager> {
// todo!()
// }
// fn test(ctx: Context) {
// let todos = use_todos(&ctx);
// let todo = todos.get_todo(Uuid::new_v4());
// let c = use_todo_context(&ctx);
// // todos.add_todo();
// }
}
mod recoil {
pub struct RecoilContext<T: 'static> {
_inner: T,
}
impl AppContext<TodoManager> {
fn remove_todo(&self, id: Uuid) {
self.dispatch(|f| {})
}
impl<T: 'static> RecoilContext<T> {
/// Get the value of an atom. Returns a reference to the underlying data.
async fn push_todo(&self, todo: TodoItem) {
self.dispatch(|f| {
//
f.items.push(10);
});
}
pub fn get(&self) {}
fn add_todo(&self) {
// self.dispatch(|f| {});
// let items = self.get(|f| &f.items);
}
/// Replace an existing value with a new value
///
/// This does not replace the value instantly, and all calls to "get" within the current scope will return
pub fn set(&self) {}
// Modify lets you modify the value in place. However, because there's no previous value around to compare
// the new one with, we are unable to memoize the change. As such, all downsteam users of this Atom will
// be updated, causing all subsrcibed components to re-render.
//
// This is fine for most values, but might not be performant when dealing with collections. For collections,
// use the "Family" variants as these will stay memoized for inserts, removals, and modifications.
//
// Note - like "set" this won't propogate instantly. Once all "gets" are dropped, only then will we run the
pub fn modify(&self) {}
}
impl TodoManager {
pub fn new() -> Self {
todo!()
}
pub fn get_todo(&self) -> &TodoItem {
todo!()
}
}
pub struct TodoHandle {}
impl TodoHandle {
fn get_todo(&self, id: Uuid) -> &TodoItem {
todo!()
}
fn add_todo(&self, todo: TodoItem) {}
}
// use_reducer, but exposes the reducer and context to children
fn use_reducer_context() {}
fn use_context_selector() {}
fn use_context<'b, 'c, Root: 'static, Item: 'c>(
ctx: &'b Context<'c>,
f: impl Fn(Root) -> &'c Item,
) -> &'c Item {
pub fn use_recoil_callback<G>(f: impl Fn() -> G) -> RecoilContext<G> {
todo!()
}
pub fn use_todo_item<'b, 'c>(ctx: &'b Context<'c>, item: Uuid) -> &'c TodoItem {
todo!()
// ctx.use_hook(|| TodoManager::new(), |hook| {}, cleanup)
}
fn use_todos(ctx: &Context) -> TodoHandle {
todo!()
}
fn use_todo_context(ctx: &Context) -> AppContext<TodoManager> {
todo!()
}
fn test(ctx: Context) {
let todos = use_todos(&ctx);
let todo = todos.get_todo(Uuid::new_v4());
let c = use_todo_context(&ctx);
// todos.add_todo();
}
}
packages/web/examples/todomvc/filtertoggles.rs
+44
View File
@@ -0,0 +1,44 @@
use crate::recoil;
use crate::state::{FilterState, TODOS};
use dioxus_core::prelude::*;
pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
let reducer = recoil::use_callback(&ctx, || ());
let items_left = recoil::use_atom_family(&ctx, &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 = "";
ctx.render(rsx! {
footer {
span {
strong {"{items_left}"}
span {"{item_text} left"}
}
ul {
class: "filters"
{toggles}
}
}
})
}
packages/web/examples/todomvc/main.rs
+40
View File
@@ -0,0 +1,40 @@
use dioxus_core::prelude::*;
use dioxus_web::WebsysRenderer;
mod filtertoggles;
mod recoil;
mod state;
mod todoitem;
mod todolist;
use todolist::TodoList;
static APP_STYLE: &'static str = include_str!("./style.css");
fn main() {
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| {
ctx.render(rsx! {
div {
id: "app"
style { "{APP_STYLE}" }
// list
TodoList {}
// footer
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" }
}
}
}
})
}))
}
packages/web/examples/todomvc/recoil.rs
+87
View File
@@ -0,0 +1,87 @@
use dioxus_core::context::Context;
pub struct RecoilContext<T: 'static> {
_inner: T,
}
impl<T: 'static> RecoilContext<T> {
/// Get the value of an atom. Returns a reference to the underlying data.
pub fn get(&self) {}
/// Replace an existing value with a new value
///
/// This does not replace the value instantly, and all calls to "get" within the current scope will return
pub fn set(&self) {}
// Modify lets you modify the value in place. However, because there's no previous value around to compare
// the new one with, we are unable to memoize the change. As such, all downsteam users of this Atom will
// be updated, causing all subsrcibed components to re-render.
//
// This is fine for most values, but might not be performant when dealing with collections. For collections,
// use the "Family" variants as these will stay memoized for inserts, removals, and modifications.
//
// Note - like "set" this won't propogate instantly. Once all "gets" are dropped, only then will we run the
pub fn modify(&self) {}
}
pub fn use_callback<'a, G>(c: &Context<'a>, f: impl Fn() -> G) -> &'a RecoilContext<G> {
todo!()
}
pub fn use_atom<T: PartialEq, O>(c: &Context, t: &'static Atom<T>) -> O {
todo!()
}
pub fn use_batom<T: PartialEq, O>(c: &Context, t: impl Readable) -> O {
todo!()
}
pub trait Readable {}
impl<T: PartialEq> Readable for &'static Atom<T> {}
impl<K: PartialEq, V: PartialEq> Readable for &'static AtomFamily<K, V> {}
pub fn use_atom_family<'a, K: PartialEq, V: PartialEq>(
c: &Context<'a>,
t: &'static AtomFamily<K, V>,
g: K,
) -> &'a V {
todo!()
}
pub use atoms::{atom, Atom};
pub use atoms::{atom_family, AtomFamily};
mod atoms {
use super::*;
pub struct AtomBuilder<T: PartialEq> {
pub key: String,
pub manual_init: Option<Box<dyn Fn() -> T>>,
_never: std::marker::PhantomData<T>,
}
impl<T: PartialEq> AtomBuilder<T> {
pub fn new() -> Self {
Self {
key: uuid::Uuid::new_v4().to_string(),
manual_init: None,
_never: std::marker::PhantomData {},
}
}
pub fn init<A: Fn() -> T + 'static>(&mut self, f: A) {
self.manual_init = Some(Box::new(f));
}
pub fn set_key(&mut self, _key: &'static str) {}
}
pub struct atom<T: PartialEq>(pub fn(&mut AtomBuilder<T>) -> T);
pub type Atom<T: PartialEq> = atom<T>;
pub struct AtomFamilyBuilder<K, V> {
_never: std::marker::PhantomData<(K, V)>,
}
pub struct atom_family<K: PartialEq, V: PartialEq>(pub fn(&mut AtomFamilyBuilder<K, V>));
pub type AtomFamily<K: PartialEq, V: PartialEq> = atom_family<K, V>;
}
packages/web/examples/todomvc/state.rs
+27
View File
@@ -0,0 +1,27 @@
use crate::recoil::*;
pub static TODOS: AtomFamily<uuid::Uuid, TodoItem> = atom_family(|_| {});
pub static FILTER: Atom<FilterState> = atom(|_| FilterState::All);
#[derive(PartialEq)]
pub enum FilterState {
All,
Active,
Completed,
}
#[derive(Debug, PartialEq, Clone)]
pub struct TodoItem {
pub id: uuid::Uuid,
pub checked: bool,
pub contents: String,
}
impl crate::recoil::RecoilContext<()> {
pub fn add_todo(&self, contents: String) {}
pub fn remove_todo(&self) {}
pub fn select_all_todos(&self) {}
pub fn toggle_todo(&self, id: uuid::Uuid) {}
pub fn clear_completed(&self) {}
pub fn set_filter(&self, filter: &FilterState) {}
}
packages/web/examples/todomvc/style.css
+376
View File
@@ -0,0 +1,376 @@
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
}
:focus {
outline: 0;
}
.hidden {
display: none;
}
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.new-todo {
padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
.toggle-all {
text-align: center;
border: none; /* Mobile Safari */
opacity: 0;
position: absolute;
}
.toggle-all + label {
width: 60px;
height: 34px;
font-size: 0;
position: absolute;
top: -52px;
left: -13px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toggle-all + label:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
.toggle-all:checked + label:before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 12px 16px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle {
opacity: 0;
}
.todo-list li .toggle + label {
/*
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
*/
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center left;
}
.todo-list li .toggle:checked + label {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}
.todo-list li label {
word-break: break-all;
padding: 15px 15px 15px 60px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.toggle-all,
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
}
@media (max-width: 430px) {
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}
}
packages/web/examples/todomvc/todoitem.rs
+36
View File
@@ -0,0 +1,36 @@
use super::state::TODOS;
use crate::recoil::use_atom_family;
use dioxus_core::prelude::*;
use uuid::Uuid;
#[derive(PartialEq, Props)]
pub struct TodoEntryProps {
id: Uuid,
}
pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
let (is_editing, set_is_editing) = use_state(&ctx, || false);
let todo = use_atom_family(&ctx, &TODOS, props.id);
ctx.render(rsx! (
li {
"{todo.id}"
input {
class: "toggle"
type: "checkbox"
"{todo.checked}"
}
{is_editing.then(|| {
rsx!(input {
value: "{contents}"
})
})}
}
))
}
pub fn Example(ctx: Context, id: Uuid, name: String) -> DomTree {
ctx.render(rsx! {
div {}
})
}
packages/web/examples/todomvc/todolist.rs
+49
View File
@@ -0,0 +1,49 @@
use super::state::{FilterState, TodoItem, FILTER, TODOS};
use crate::filtertoggles::FilterToggles;
use crate::recoil::use_atom;
use crate::todoitem::TodoEntry;
use dioxus_core::prelude::*;
pub fn TodoList(ctx: Context, props: &()) -> DomTree {
let (entry, set_entry) = use_state(&ctx, || "".to_string());
let todos: &Vec<TodoItem> = todo!();
let filter = use_atom(&ctx, &FILTER);
let list = todos
.iter()
.filter(|f| match filter {
FilterState::All => true,
FilterState::Active => !f.checked,
FilterState::Completed => f.checked,
})
.map(|item| {
rsx!(TodoEntry {
key: "{order}",
id: item.id,
})
});
ctx.render(rsx! {
div {
// header
header {
class: "header"
h1 {"todos"}
input {
class: "new-todo"
placeholder: "What needs to be done?"
value: "{entry}"
oninput: move |evt| set_entry(evt.value)
}
}
// list
{list}
// filter toggle (show only if the list isn't empty)
{(!todos.is_empty()).then(||
rsx!{ FilterToggles {}
})}
}
})
}