update-article-form.js

"use strict";

const { fetch_article_by_title, fetch_delete_article, fetch_article } = require("../xhr");
const ArticleList = require("./articles-list");
const CreateArticleForm = require("./create-article-form");

class UpdateArticleForm {
    constructor() {
        this.state = {
            search_article_title: "",
            article_to_update: {},
        }
    }

    reset() {
        this.state = {
            search_article_title: "",
            search_result: {},
            article_to_update: {},
        };
    }

    handle_select_article(article) {
        fetch_article(article._id.$oid)
            .then(art => {
                this.state.article_to_update = art;
                this.refresh_update_form();

            }).catch(err => console.log(err))
    }

    handle_delete_article(article) {
        fetch_delete_article(article._id.$oid)
            .then(res => {
                alert(res);
                this.reset();
                this.refresh();
            })
            .catch(err => alert(err))
    }

    refresh_search_result() {
        obj2htm.subRender(
            this.render_search_result(),
            document.getElementById("update-article-form-search-result"),
            { mode: "replace" },
        );
    }

    render_search_result() {
        const { search_result } = this.state;
        return {
            tag: "div",
            id: "update-article-form-search-result",
            style_rules: {
                display: "flex",
                gap: "10px",
                alignItems: "center"
            },
            contents: search_result.title ? [
                { tag: "strong", contents: search_result.title },
                {
                    tag: "button", contents: "SELECT",
                    onclick: this.handle_select_result.bind(this)
                },
                {
                    tag: "button", contents: "DELETE",
                    onclick: this.handle_delete_article.bind(this)
                }
            ] : []
        }
    }

    refresh_update_form() {
        obj2htm.subRender(
            this.render_update_form(),
            document.getElementById("update-article-form-container"),
            { mode: "replace" },
        );
    }

    render_update_form() {
        return {
            tag: "div",
            id: "update-article-form-container",
            contents: this.state.article_to_update._id
                ? [new CreateArticleForm({
                    data: this.state.article_to_update,
                    on_article_sent: () => {
                        this.reset();
                        this.refresh_search_result();
                    }
                }).render()]
                : []
        }
    }

    refresh() {
        obj2htm.subRender(this.render(), document.getElementById("update-article-multiform"), { mode: "replace" })
    }

    render() {
        return {
            tag: "div",
            id: "update-article-multiform",
            style_rules: {
                display: "flex",
                flexDirection: "column",
                gap: "20px",
                maxWidth: "800px",
            },
            contents: [
                new ArticleList({
                    on_select_article: this.handle_select_article.bind(this),
                    on_delete_result: this.handle_delete_article.bind(this)
                }).render(),
                { tag: "hr", style_rules: { width: "100%" } },
                this.render_update_form(),
            ]
        }
    }
}

module.exports = UpdateArticleForm;