"use strict";

const { fetch_all_articles } = require("../xhr");

class ArticleList {
    constructor() {
        this.state = {
            articles: []
        }
        this.fetch_list();
    }

    fetch_list() {
        fetch_all_articles()
            .then(articles => {
                this.state.articles = articles;
                this.refresh_list();
            })
            .catch(err => console.log(err))
    }

    refresh_list() {
        obj2htm.subRender(this.render_list(), document.getElementById("browse-articles-results"), { mode: "replace" })
    }

    render_list() {
        return {
            tag: "ul",
            id: "browse-articles-results",
            contents: this.state.articles.map(art => {
                return { tag: "li", contents: `[${art.locale}] <b>${art.title}</b> - ${art._id.$oid}` };
            }),
        }
    }

    render() {
        return {
            tag: "div",
            contents: [
                { tag: "button", onclick: this.fetch_list.bind(this), contents: "REFRESH" },
                this.render_list()
            ],
        }
    }
}

module.exports = ArticleList;