root.js

const CreateArticleForm = require("./create-article-form");

class RootComponent {
    constructor() {
        this.state = {
            selected_tab: ""
        };
    }

    handle_nav_click(e) {
        this.state.selected_tab = e.target.tab_name;
        obj2htm.renderCycle();
    }

    render_state() {
        switch (this.state.selected_tab) {
            case "create":
                return new CreateArticleForm().render();
            case "update":
                return undefined;
            default:
                return undefined;
        }
    }

    render() {
        return {
            tag: "main",
            contents: [
                { tag: "h1", contents: "Kuadrado admin panel" },
                {
                    tag: "nav",
                    contents: [
                        {
                            tag: "span", contents: "Create article", tab_name: "create",
                            class: this.state.selected_tab === "create" ? "selected" : "",
                            onclick: this.handle_nav_click.bind(this),
                        },
                        {
                            tag: "span", contents: "Update article", tab_name: "update",
                            class: this.state.selected_tab === "update" ? "selected" : "",
                            onclick: this.handle_nav_click.bind(this),
                        },
                    ],
                },
                this.render_state(),
            ],
        };
    }
}

module.exports = RootComponent;