dioxus/packages/web/examples/todomvcsingle.rs

213 lines
5.6 KiB
Rust
Raw Normal View History

2021-05-19 14:14:02 +00:00
//! Example: TODOVMC - One file
//! ---------------------------
//! This example shows how to build a one-file TODO MVC app with Dioxus and Recoil.
//! This project is confined to a single file to showcase the suggested patterns
//! for building a small but mighty UI with Dioxus without worrying about project structure.
//!
//! If you want an example on recommended project structure, check out the TodoMVC folder
//!
//! Here, we show to use Dioxus' Recoil state management solution to simplify app logic
#![allow(non_snake_case)]
use dioxus_web::dioxus::prelude::*;
use recoil::*;
use std::collections::HashMap;
use uuid::Uuid;
2021-04-05 01:47:53 +00:00
2021-05-26 15:22:44 +00:00
#[derive(PartialEq, Clone, Copy)]
pub enum FilterState {
All,
Active,
Completed,
}
2021-04-05 01:47:53 +00:00
2021-05-26 15:22:44 +00:00
#[derive(Debug, PartialEq, Clone)]
pub struct TodoItem {
pub id: Uuid,
pub checked: bool,
pub contents: String,
2021-05-19 14:14:02 +00:00
}
// Declare our global app state
2021-05-31 22:55:56 +00:00
const TODO_LIST: AtomHashMap<Uuid, TodoItem> = |_| {};
2021-05-26 15:22:44 +00:00
const FILTER: Atom<FilterState> = |_| FilterState::All;
const TODOS_LEFT: Selector<usize> = |api| api.get(&TODO_LIST).len();
2021-05-19 14:14:02 +00:00
// Implement a simple abstraction over sets/gets of multiple atoms
2021-05-26 05:40:30 +00:00
struct TodoManager(RecoilApi);
2021-05-19 14:14:02 +00:00
impl TodoManager {
fn add_todo(&self, contents: String) {
let item = TodoItem {
checked: false,
contents,
id: Uuid::new_v4(),
};
self.0.modify(&TODO_LIST, move |list| {
list.insert(item.id, item);
});
}
fn remove_todo(&self, id: &Uuid) {
self.0.modify(&TODO_LIST, move |list| {
list.remove(id);
})
}
fn select_all_todos(&self) {
self.0.modify(&TODO_LIST, move |list| {
for item in list.values_mut() {
item.checked = true;
2021-04-05 01:47:53 +00:00
}
})
2021-05-19 14:14:02 +00:00
}
fn toggle_todo(&self, id: &Uuid) {
self.0.modify(&TODO_LIST, move |list| {
list.get_mut(id).map(|item| item.checked = !item.checked)
});
}
fn clear_completed(&self) {
self.0.modify(&TODO_LIST, move |list| {
*list = list.drain().filter(|(_, item)| !item.checked).collect();
})
}
fn set_filter(&self, filter: &FilterState) {
self.0.modify(&FILTER, move |f| *f = *filter);
}
}
pub fn TodoList(ctx: Context<()>) -> VNode {
2021-05-19 14:14:02 +00:00
let draft = use_state_new(&ctx, || "".to_string());
2021-05-31 22:55:56 +00:00
let todos = use_read(&ctx, &TODO_LIST);
let filter = use_read(&ctx, &FILTER);
2021-04-05 01:47:53 +00:00
2021-05-19 14:14:02 +00:00
let todolist = todos
.values()
.filter(|item| match filter {
FilterState::All => true,
FilterState::Active => !item.checked,
FilterState::Completed => item.checked,
})
.map(|item| {
rsx!(TodoEntry {
key: "{order}",
id: item.id,
})
});
2021-05-31 22:55:56 +00:00
rsx! { in ctx,
div {
2021-04-05 01:47:53 +00:00
header {
class: "header"
h1 {"todos"}
input {
class: "new-todo"
placeholder: "What needs to be done?"
value: "{draft}"
2021-05-19 14:14:02 +00:00
oninput: move |evt| draft.set(evt.value)
2021-04-05 01:47:53 +00:00
}
}
2021-05-19 14:14:02 +00:00
{todolist}
2021-04-05 01:47:53 +00:00
2021-05-19 14:14:02 +00:00
// rsx! accepts optionals, so we suggest the `then` method in place of ternary
{(!todos.is_empty()).then(|| rsx!( FilterToggles {}) )}
2021-04-05 01:47:53 +00:00
}
2021-05-20 00:57:19 +00:00
}
2021-04-05 01:47:53 +00:00
}
#[derive(PartialEq, Props)]
pub struct TodoEntryProps {
2021-05-19 14:14:02 +00:00
id: Uuid,
2021-04-05 01:47:53 +00:00
}
pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> VNode {
2021-04-05 01:47:53 +00:00
let (is_editing, set_is_editing) = use_state(&ctx, || false);
let todo = use_read(&ctx, &TODO_LIST).get(&ctx.id).unwrap();
2021-04-05 01:47:53 +00:00
ctx.render(rsx! (
li {
"{todo.id}"
input {
class: "toggle"
type: "checkbox"
"{todo.checked}"
}
{is_editing.then(|| rsx!(
2021-04-05 01:47:53 +00:00
input {
2021-05-19 14:14:02 +00:00
value: "{todo.contents}"
2021-04-05 01:47:53 +00:00
}
))}
2021-04-05 01:47:53 +00:00
}
))
2021-05-31 22:55:56 +00:00
}
2021-04-05 01:47:53 +00:00
pub fn FilterToggles(ctx: Context<()>) -> VNode {
2021-05-31 22:55:56 +00:00
let reducer = TodoManager(use_recoil_api(ctx));
let items_left = use_read(ctx, &TODOS_LEFT);
2021-04-05 01:47:53 +00:00
let toggles = [
("All", "", FilterState::All),
("Active", "active", FilterState::Active),
("Completed", "completed", FilterState::Completed),
]
.iter()
.map(|(name, path, filter)| {
rsx!(
li {
class: "{name}"
2021-05-26 15:22:44 +00:00
a { "{name}",
2021-05-19 14:14:02 +00:00
href: "{path}",
onclick: move |_| reducer.set_filter(&filter),
2021-04-05 01:47:53 +00:00
}
}
)
});
2021-05-19 14:14:02 +00:00
let item_text = match items_left {
1 => "item",
_ => "items",
};
2021-04-05 01:47:53 +00:00
2021-05-19 14:14:02 +00:00
rsx! { in ctx,
2021-04-05 01:47:53 +00:00
footer {
span {
strong {"{items_left}"}
span {"{item_text} left"}
}
ul {
class: "filters"
{toggles}
}
}
2021-05-19 14:14:02 +00:00
}
2021-04-05 01:47:53 +00:00
}
pub fn Footer(ctx: Context<()>) -> VNode {
2021-05-20 00:57:19 +00:00
rsx! { in ctx,
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" }
}
}
2021-05-20 00:57:19 +00:00
}
2021-04-05 01:47:53 +00:00
}
2021-05-26 15:22:44 +00:00
const APP_STYLE: &'static str = include_str!("./todomvc/style.css");
fn App(ctx: Context<()>) -> VNode {
2021-05-31 22:55:56 +00:00
use_init_recoil_root(ctx, |_| {});
2021-05-26 15:22:44 +00:00
rsx! { in ctx,
2021-05-31 22:55:56 +00:00
div { id: "app"
2021-05-26 15:22:44 +00:00
TodoList {}
Footer {}
}
}
}
fn main() {
wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App));
}