nanotroy

CREATE TABLE employees (
first_name varchar(25),
last_name  varchar(25),
department varchar(15),
email  varchar(50)
);

nanotroy

INSERT INTO employees (first_name, last_name, department, email) 
VALUES ('Lorenz', 'Vanthillo', 'IT', '[email protected]');

nanotroy

import { hc, text } from '@crui/core'
const Title = hc('h1', [
    text('TODO App')
])

nanotroy

import { StreamBox } from '@crui/reactive/rx/box';
export type Todo = {
    text: string,
}
export type TodoList = Todo[]
export class TodoStore {
    public readonly input: StreamBox<string>
    public readonly todos: TodoList
    constructor() {
        this.input = new StreamBox('')

nanotroy

const submit = (store: TodoStore) =>
    h('button', {
        props: { className: 'add-todo-submit' },
        events: {
            click: (e) => {
                e.preventDefault()
                store.addTodo(store.input.get())
                store.input.set('')
            }
        },

nanotroy

import { StreamBox } from '@crui/reactive/rx/box';
import { StreamList } from '@crui/reactive/rx/list';
export type Todo = {
    text: string,
}
export type TodoList = StreamList<Todo>
export class TodoStore {
    public readonly input: StreamBox<string>
    public readonly todos: TodoList
    constructor() {

nanotroy

import { h$map } from '@crui/reactive/elems/$children'
const TodoList = (store: TodoStore) => h$map(
   h('ul'), 
   store.todos,
   TodoComponent
)
const TodoComponent = ({ text }) => ht('li', text)

nanotroy

const TodoComponent = (todo: Todo) => (
    hcc('li', 'todo-wrapper', [
        hcc('label', 'todo', [
            h$('input', {
                props: {
                    type: 'checkbox',
                },
                $bind: {
                    checked: todo.done
                }

nanotroy

const submit = h('button', {
    props: { className: 'add-todo-submit' },
    events: {
        click: (e) => {
            e.preventDefault()
            // what to do?
        }
    },
    children: [
        text('Add')

nanotroy

type AddTodo = (todo: string) => void
const submit = (todo: StreamBox<string>, addTodo: AddTodo) =>
    h('button', {
        props: { className: 'add-todo-submit' },
        events: {
            click: (e) => {
                e.preventDefault()
                addTodo(todo.get())
                todo.set('')
            }