PYRSS-Website/apps/home/static/home/js/servers.js

// region Loaded Servers

var _loadedServers = []
var selectedServer = null;

function getLoadedServer(options) {
    let servers = _loadedServers.filter(item => {

        for (let key in options) {
            if (item[key] !== options[key]) {
                return false
            }
        }

        return true;
    });

    return servers || [];
}

function getServerFromSnowflake(id) {
    server = getLoadedServer({id: id});
    if (!server.length) {
        throw new Error("No Server with that ID");
    }

    return server[0];
}

function addToLoadedServers(serverData, autoSelect=false) {
    _loadedServers.push(serverData);
    createSelectButton(serverData);

    if (autoSelect) {
        selectServer(serverData["id"]);
    }
}

function removeFromLoadedServers(id) {
    _loadedServers = _loadedServers.filter(item => item.id !== id);
    removeSelectButton(id)

    if (selectedServer.id === id) {
        selectedServer(null);
    }
}


// region Loaded Channels

var _loadedChannels = {};
function loadedChannels(serverId) {
    if (!(serverId in _loadedChannels)) {
        throw new Error(`channels not loaded for server: ${serverId}`);
    }

    return _loadedChannels[serverId]
}

$(document).on("selectedServerChange", async function() {
    serverId = selectedServer.id;  // take note incase 'selectedServer' changes

    try {
        channels = await ajaxRequest(`/generate-channels?guild=${serverId}`, "GET");
        _loadedChannels[serverId] = channels;
    }
    catch (error) {
        logError(error);
        await okModal(
            "Error: Bot Isn't a Member!",
            "The PYRSS Discord Bot is unable to access this server, certain features won't work! Ensure it's a member and has the necessary permissions.",
            "danger",
            "bi-arrow-return-right",
            null
        );
    }
});


// region UI Buttons

function createSelectButton(serverData) {
    // server details
    let id = serverData["id"];
    let name = serverData["name"];
    let iconHash = serverData["icon"];

    let template = $($("#serverItemTemplate").html());
    let imageUrl = `https://cdn.discordapp.com/icons/${id}/${iconHash}.webp?size=80`;
    let altText = name.split(' ').map(word => word.charAt(0)).join('');  // initials of server name, used if iconUrl is 404

    template.find(".js-image").attr("src", imageUrl).attr("alt", altText);
    template.find(".js-name").text(name);
    template.find(".js-id").text(id);
    template.find(".sidebar-item").attr("data-id", id);

    // Bind the button for selecting this server
    template.find(".sidebar-item").off("click").on("click", function() {
        const myID = $(this).data("id");

        // only select if not already selected, otherwise hide sidebar on smaller screens (responsive)
        selectedServer?.id !== myID ? selectServer(myID) : setSidebarVisibility(false);
    });

    $("#serverList").prepend(template);
}

function removeSelectButton(id) {
    $(`#serverList .server-item[data-id=${id}]`).remove();
}

$("#backToSelectServer").on("click", function() {
    $("#noSelectedServer").show();
    $("#selectedServerContainer").hide();
    $("#serverList .server-item > .server-item-selector.active").removeClass("active");
    selectedServer = null;
});


// #region Server Selection

function selectServer(id) {
    let server = getServerFromSnowflake(id);
    if (!server) {
        $("#noSelectedServer").show();
        $("#selectedServerContainer").hide();
        selectServer = null;
        return;
    }

    // Change appearance of selected vs none-selected items
    $("#serverList .sidebar-item").removeClass("active");
    $(`#serverList .sidebar-item[data-id="${id}"]`).addClass("active");

    // Global variable
    selectedServer = server;

    // Update UI
    $("#noSelectedServer").hide();
    $("#selectedServerContainer").show().css("display", "flex");

    // Close sidebar on smaller screens
    setSidebarVisibility(false);

    // Announce change to any listeners
    $(document).trigger("selectedServerChange");
}


// #region Resolve Strings

function resolveServerStrings() {
    // Server icon
    $(".resolve-to-server-icon").attr(
        "src",
        `https://cdn.discordapp.com/icons/${selectedServer.id}/${selectedServer.icon}.webp?size=80`
    ).attr("alt", selectedServer.name.split(' ').map(word => word.charAt(0)).join(''));

    // Server names
    $(".resolve-to-server-name").text(selectedServer.name);

    // Server Guild Ids
    $(".resolve-to-server-id").text(selectedServer.id);

    // Bot Invite links
    $(".resolve-to-invite-link").attr("href", `https://discord.com/oauth2/authorize
?client_id=${discordClientId}
&permissions=2147534848
&scope=bot+applications.commands
&guild_id=${selectedServer.id}
&disable_guild_select=true`);
}


// region Change Listener

$(document).on("selectedServerChange", async function() {
    resolveServerStrings();
    $("#serverJoinAlert").hide();
});


// region Load Servers

async function loadServers() {

    // Remove any previously loaded servers
    $(".sidebar .sidebar-item").closest("li").remove();

    // Show placeholder items & hide rate limit warning
    $(".sidebar .sidebar-loading").show();
    $(".sidebar .server-rate-limit").hide();

    try {
        const servers = await generateServers();
        servers.forEach(server => addToLoadedServers(server, false));
    }
    catch (error) {
        switch (error?.status) {
            case 401:
                window.location.href = "/login";  // discord token has expired
                break;
            case 429:
                $(".sidebar .server-rate-limit").show();
                break;
            default:
                logError(error);
                break;
        }
    }
    finally {
        $(".sidebar .sidebar-loading").hide();
    }
}

// Retry load servers button
$(".sidebar .sidebar-retry-btn").on("click", loadServers);