interlanguage-checker/src/main/js/Main.js

import {html, render} from "htm/preact";
import {InterlangTable, MessageHandler, ValidatableInput} from "./DOM";
import {discoverNetwork, InterlangNetwork, MediaWiki, MediaWikiManager} from "./MediaWiki";
import {$, doAfterLoad} from "./Shared";


doAfterLoad(async () => {
    const urlInput = new ValidatableInput($("#url"), (value) => {
        if (value.trim() === "")
            return "URL must not be empty.";

        try {
            new URL(value); // Throws exception if invalid
            return "";
        } catch (error) {
            return error.message;
        }
    });
    const pageInput = new ValidatableInput($("#page"), (value) => {
        return value.trim() === "" ? "Page must not be empty" : "";
    });
    const checkButton = $("#check");

    const messageHandler = new MessageHandler($("#messages"))
        .setCallback((level, message) => {
            if (level === "error") console.error(message);
        });


    let previousUrl = undefined;
    let mwm = undefined;

    const submit = async () => {
        // Clean up
        urlInput.showBlank();
        pageInput.showBlank();
        messageHandler.clear();

        const oldTable = $("#networkTable");
        if (oldTable !== null)
            oldTable.parentNode.removeChild(oldTable);

        // Validate
        const urlValidity = urlInput.validate();
        if (urlValidity !== "") return messageHandler.handle("error", urlValidity);

        const pageValidity = pageInput.validate();
        if (pageValidity !== "") return messageHandler.handle("error", pageValidity);

        // Initialize
        if (urlInput.getValue() !== previousUrl) {
            messageHandler.handle("progress", `Initializing <code>${urlInput.getValue()}</code>`);

            try {
                const mw = new MediaWiki(urlInput.getValue());
                mwm = await new MediaWikiManager().init(mw);
            } catch (error) {
                messageHandler.handle("error", error);
                return;
            }

            previousUrl = urlInput.getValue();
        }

        // Discover
        discoverNetwork(mwm, pageInput.getValue(), it => messageHandler.handle("progress", it))
            .then(({pages, redirects}) => new InterlangNetwork(pages, redirects))
            .then(network => {
                messageHandler.handle("progress", "Creating table");

                const form = $("#networkTableForm");
                form.textContent = "";
                render(html`<${InterlangTable} id="networkTable" network=${network} />`, form);

                switch (network.checkState()) {
                    case "complete":
                        messageHandler.handle("complete", "A perfect network! 🙂");
                        break;
                    case "incomplete":
                        messageHandler.handle("warning", "The network is incomplete 😞");
                        break;
                    case "imperfect":
                        messageHandler.handle("warning", "The network is complete but flawed 😕 ");
                        break;
                }
            })
            .catch(error => messageHandler.handle("error", error));
    };

    urlInput.input.addEventListener("keypress", (event) => {
        if (event.key.toLowerCase() === "enter") submit();
    });
    pageInput.input.addEventListener("keypress", (event) => {
        if (event.key.toLowerCase() === "enter") submit();
    });
    checkButton.addEventListener("click", () => submit());
});