Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
class TodoIndex < HyperComponent
# TodoIndex is the conventional name for listing
# a set of items.
INITIAL_TODOS = [
{
todo: 'clean the house'
},
{
todo: 'buy milk'
}
]
before_mount { @list = INITIAL_TODOS.dup }
def create_new_todo_item
mutate @list << { todo: @todo }, @todo = nil
end
render(DIV, class: 'ToDo') do
IMG(class: 'Logo', src: 'assets/logo.png', alt: 'Hyperstack Logo')
H1(class: 'ToDo-Header') { 'Hyperstack To Do' }
DIV(class: 'ToDo-Container') do
DIV(class: 'ToDo-Content') do
@list.each do |item|
TodoItem(key: item, item: item[:todo])
.on(:delete_item) { mutate @list.delete(item) }
end
end
DIV do
INPUT(type: :text, value: @todo)
.on(:change) { |e| mutate @todo = e.target.value }
.on(:enter) { create_new_todo_item }
BUTTON(class: 'ToDo-Add') { '+' }
.on(:click) { create_new_todo_item }
end
end
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.