wip: todos

packages/web/examples/rsxt.rs

@@ -36,9 +36,9 @@ static Example: FC<ExampleProps> = |ctx, props| {
                 "Hello, {name}"
             }
             
-            CustomButton { name: "Jack!", handler: move |evt| name.set("Jack".to_string()) }
-            CustomButton { name: "Jill!", handler: move |evt| name.set("Jill".to_string()) }
-            CustomButton { name: "Bob!", handler: move |evt| name.set("Bob".to_string())}
+            CustomButton { name: "Jack!", handler: move |_| name.set("Jack".to_string()) }
+            CustomButton { name: "Jill!", handler: move |_| name.set("Jill".to_string()) }
+            CustomButton { name: "Bob!", handler: move |_| name.set("Bob".to_string())}
         }
     })
 };

packages/web/examples/todomvc/filtertoggles.rs

@@ -13,7 +13,7 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
     ]
     .iter()
     .map(|(name, path, filter)| {
-        rsx! {
+        rsx!(
             li {
                 class: "{name}"
                 a {
@@ -22,7 +22,7 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
                     "{name}"
                 }
             }
-        }
+        )
     });
 
     // todo

packages/web/examples/todomvc/main.rs

@@ -1,5 +1,4 @@
-use dioxus_core::prelude::*;
-use dioxus_web::WebsysRenderer;
+use dioxus_web::{prelude::*, WebsysRenderer};
 
 mod filtertoggles;
 mod recoil;
@@ -7,8 +6,6 @@ mod state;
 mod todoitem;
 mod todolist;
 
-use todolist::TodoList;
-
 static APP_STYLE: &'static str = include_str!("./style.css");
 
 fn main() {
@@ -19,7 +16,7 @@ fn main() {
                 style { "{APP_STYLE}" }
 
                 // list
-                TodoList {}
+                todolist::TodoList {}
 
                 // footer
                 footer {

packages/web/examples/todomvc/recoil.rs

@@ -85,3 +85,17 @@ mod atoms {
     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>;
 }
+
+pub use selectors::selector;
+mod selectors {
+    pub struct SelectorBuilder<Out, const Built: bool> {
+        _p: std::marker::PhantomData<Out>,
+    }
+    impl<O> SelectorBuilder<O, false> {
+        pub fn getter(self, f: impl Fn(()) -> O) -> SelectorBuilder<O, true> {
+            std::rc::Rc::pin(value)
+            todo!()
+        }
+    }
+    pub struct selector<O>(pub fn(SelectorBuilder<O, false>) -> SelectorBuilder<O, true>);
+}

packages/web/examples/todomvc/state.rs

@@ -1,7 +1,12 @@
 use crate::recoil::*;
+use dioxus_core::prelude::Context;
 
 pub static TODOS: AtomFamily<uuid::Uuid, TodoItem> = atom_family(|_| {});
 pub static FILTER: Atom<FilterState> = atom(|_| FilterState::All);
+pub static SHOW_ALL_TODOS: selector<bool> = selector(|g| g.getter(|f| false));
+
+// an atomfamily is just a HashMap<K, Pin<Rc<V>>> that pins the Rc and exposes the values by reference
+// we could do a more advanced management, but this is fine too
 
 #[derive(PartialEq)]
 pub enum FilterState {
@@ -17,11 +22,30 @@ pub struct TodoItem {
     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) {}
+pub fn add_todo(ctx: &Context, contents: String) {}
+
+pub fn remove_todo(ctx: &Context, id: &uuid::Uuid) {
+    TODOS.with(&ctx).remove(id)
 }
+
+pub fn select_all_todos(ctx: &Context) {}
+
+pub fn toggle_todo(ctx: &Context, id: &uuid::Uuid) {}
+
+pub fn clear_completed(ctx: &Context) {
+    let (set, get) = (self.set, self.get);
+
+    TOODS
+        .get(&ctx)
+        .iter()
+        .filter(|(k, v)| v.checked)
+        .map(|(k, v)| TODOS.remove(&ctx, k));
+}
+
+pub fn set_filter(ctx: &Context, filter: &FilterState) {}
+
+struct TodoManager<'a> {}
+fn use_todos(ctx: &Context) {}
+
+#[test]
+fn test() {}

packages/web/examples/todomvc/todoitem.rs

@@ -1,11 +1,10 @@
 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,
+    id: uuid::Uuid,
 }
 
 pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
@@ -20,17 +19,11 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
                 type: "checkbox"
                 "{todo.checked}"
             }
-            {is_editing.then(|| {
-                rsx!(input {
+            {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

@@ -1,20 +1,20 @@
 use super::state::{FilterState, TodoItem, FILTER, TODOS};
-use crate::filtertoggles::FilterToggles;
+use crate::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 (draft, set_draft) = use_state(&ctx, || "".to_string());
+    let (todos, _) = use_state(&ctx, || Vec::<TodoItem>::new());
     let filter = use_atom(&ctx, &FILTER);
 
     let list = todos
         .iter()
-        .filter(|f| match filter {
+        .filter(|item| match filter {
             FilterState::All => true,
-            FilterState::Active => !f.checked,
-            FilterState::Completed => f.checked,
+            FilterState::Active => !item.checked,
+            FilterState::Completed => item.checked,
         })
         .map(|item| {
             rsx!(TodoEntry {
@@ -25,25 +25,23 @@ pub fn TodoList(ctx: Context, props: &()) -> DomTree {
 
     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)
+                    value: "{draft}"
+                    oninput: move |evt| set_draft(evt.value)
                 }
             }
 
-            // list
             {list}
 
             // filter toggle (show only if the list isn't empty)
             {(!todos.is_empty()).then(||
-                rsx!{ FilterToggles {}
-            })}
+                rsx!( filtertoggles::FilterToggles {})
+            )}
         }
     })
 }