Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
root.js 2.02 KiB
Newer Older
  • Learn to ignore specific revisions
  • 
    const CreateArticleForm = require("./create-article-form");
    
    const UpdateArticleForm = require("./update-article-form");
    
    const ArticleList = require("./articles-list");
    
    
    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 new UpdateArticleForm().render();
    
                case "browse":
                    return new ArticleList().render();
    
                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),
                            },
    
                            {
                                tag: "span", contents: "Browse articles", tab_name: "browse",
                                class: this.state.selected_tab === "browse" ? "selected" : "",
                                onclick: this.handle_nav_click.bind(this),
                            },
    
                        ],
                    },
                    this.render_state(),
                ],
            };
        }
    }
    
    module.exports = RootComponent;