cordis/client/webapp/elements/guild-list-guild.ts

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

import BaseElements from './require/base-elements';
import ElementsUtil from './require/elements-util';

import { GuildMetadata } from '../data-types';
import Q from '../q-module';
import UI from '../ui';
import Actions from '../actions';
import createGuildContextMenu from './context-menu-srv';
import Controller from '../controller';
import CombinedGuild from '../guild-combined';

export default function createGuildListGuild(document: Document, q: Q, ui: UI, controller: Controller, guild: CombinedGuild) {
    let element = q.create({ class: 'guild', 'meta-id': guild.id, 'meta-name': guild.id, content: [
        { class: 'pill' },
        { tag: 'img', src: './img/loading.svg', alt: 'guild' }, // src is set later by script.js 
    ] }) as HTMLElement;

    // Hover over for name + connection info
    (async () => {
        let guildData: GuildMetadata;
        try {
            guildData = await guild.grabMetadata();
            if (!guildData.iconResourceId) throw new Error('guild icon not identified yet');
            let guildIcon = await guild.fetchResource(guildData.iconResourceId);
            let guildIconSrc = await ElementsUtil.getImageBufferSrc(guildIcon);
            (q.$$$(element, 'img') as HTMLImageElement).src = guildIconSrc;
        } catch (e) {
            LOG.error('Error fetching guild icon', e);
            (q.$$$(element, 'img') as HTMLImageElement).src = './img/error.png';
            return;
        }

        element.setAttribute('meta-name', guildData.name);

        let contextElement = q.create({ class: 'context', content: {
            class: 'info', content: [
                BaseElements.TAB_LEFT,
                { class: 'content guild' } // populated later
            ]
        } }) as HTMLElement;

        // TODO: future: update the status in real-time with the update-member event

        element.addEventListener('mouseenter', async () => {
            Q.clearChildren(q.$$$(contextElement, '.content'));
            q.$$$(contextElement, '.content').appendChild(q.create({ class: 'name', content: element.getAttribute('meta-name') }));
            document.body.appendChild(contextElement);
            ElementsUtil.alignContextElement(contextElement, element, { left: 'right', centerY: 'centerY' });
            (async () => {
                let connection = await guild.fetchConnectionInfo();
                let connectionElement = q.create({ class: 'connection ' + connection.status, content: [
                    { class: 'status-circle' },
                    { class: 'display-name', content: connection.displayName }
                ] });
                q.$$$(contextElement, '.content').appendChild(connectionElement);
                ElementsUtil.alignContextElement(contextElement, element, { left: 'right', centerY: 'centerY' });
            })();
        });

        element.addEventListener('mouseleave', () => {
            if (contextElement.parentElement) {
                contextElement.parentElement.removeChild(contextElement);
            }
        });
    })();

    element.addEventListener('click', async () => {
        if (element.classList.contains('active')) return;

        ui.setActiveGuild(guild);

        // Connection information
        (async () => {
            await Actions.fetchAndUpdateConnection(ui, guild);
        })();

        // Guild Channel Name
        (async () => {
            // Explicitly not using a withPotentialError to make this simpler
            try {
                let guildData = await guild.grabMetadata();
                ui.updateGuildName(guild, guildData.name);
            } catch (e) {
                LOG.error('Error fetching guild name', e);
                ui.updateGuildName(guild, 'ERROR');
            }
        })();

        // Guild Channel List
        (async () => {
            await Actions.fetchAndUpdateChannels(q, ui, guild);
        })();
        
        // Guild Members
        (async () => {
            await Actions.fetchAndUpdateMembers(q, ui, guild);
        })();
    });

    element.addEventListener('contextmenu', (e) => {
        let contextMenu = createGuildContextMenu(document, q, ui, controller, guild);
        document.body.appendChild(contextMenu);
        let relativeTo = { x: e.pageX, y: e.pageY };
        ElementsUtil.alignContextElement(contextMenu, relativeTo, { top: 'centerY', left: 'centerX' });
    });

    return element;
}