1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

use crate::{input::text_input, Todo};
use mox::mox;
use moxie_dom::{
    elements::{
        forms::Input,
        html::*,
        text_content::{Div, Li},
    },
    prelude::*,
};

#[illicit::from_env(todos: &Key<Vec<Todo>>)]
fn item_edit_input(todo: Todo, editing: Key<bool>) -> Input {
    let todos = todos.clone();
    let text = todo.title.clone();
    text_input(&text, true, move |value: String| {
        editing.set(false);
        todos.update(|todos| {
            let mut todos = todos.to_vec();
            if let Some(mut todo) = todos.iter_mut().find(|t| t.id == todo.id) {
                todo.title = value;
            }
            Some(todos)
        });
    })
}

#[illicit::from_env(todos: &Key<Vec<Todo>>)]
fn item_with_buttons(todo: Todo, editing: Key<bool>) -> Div {
    let todos = todos.clone();
    let id = todo.id;
    let toggle_todos = todos.clone();

    let toggle_completion = move |_| {
        toggle_todos.update(|t| {
            Some(
                t.iter()
                    .cloned()
                    .map(move |mut t| {
                        if t.id == id {
                            t.completed = !t.completed;
                            t
                        } else {
                            t
                        }
                    })
                    .collect(),
            )
        })
    };

    mox! {
        <div class="view">
            <input class="toggle" type="checkbox" checked=todo.completed onclick=toggle_completion />

            <label ondblclick = move |_| editing.set(true)>
                { todo.title }
            </label>

            <button class="destroy" onclick={move |_| {
                todos.update(|t| Some(t.iter().filter(|t| t.id != id).cloned().collect()));
            }} />
        </div>
    }
}

#[topo::nested(slot = "&todo.id")]
pub fn todo_item(todo: &Todo) -> Li {
    let (editing, set_editing) = state(|| false);

    let mut classes = String::new();
    if todo.completed {
        classes.push_str("completed ");
    }
    if *editing {
        classes.push_str("editing");
    }

    let mut item = li();
    item = item.class(classes);

    if *editing {
        item = item.child(item_edit_input(todo.clone(), set_editing));
    } else {
        item = item.child(item_with_buttons(todo.clone(), set_editing));
    }

    item.build()
}

#[cfg(test)]
mod tests {
    use super::*;
    use pretty_assertions::assert_eq;

    #[wasm_bindgen_test::wasm_bindgen_test]
    pub async fn single_item() {
        let root = document().create_element("div");
        crate::App::boot_fn(&[Todo::new("weeeee")], root.clone(), || {
            let todo = &illicit::expect::<Key<Vec<Todo>>>()[0];
            todo_item(todo)
        });

        assert_eq!(
            root.pretty_outer_html(2),
            r#"<div>
  <li class="">
    <div class="view">
      <input class="toggle" type="checkbox" checked="false">
      </input>
      <label>weeeee</label>
      <button class="destroy">
      </button>
    </div>
  </li>
</div>"#
        );
    }
}