import { useState, useEffect, useMemo } from "react";
import { Sub, reflect, emit } from "@tty-pt/sub";

class TodoSub extends Sub {
    constructor() {
        super("TodoSub", { url: "initial" }, { useState, useEffect, useMemo });
    }

    @emit("$url/todos")
    add(name, text) {
        return {
            ...this.get(),
            [name]: text,
        };
    }
}

export
const todoSub = new TodoSub();

export default
function Todos(props) {
    const todos = todoSub.use("$url/todos");

    return <div>{
        Object.entries(todos).map(([key, value]) => (
            <div key={key}>{value}</div>
        ));
    }</div>
}