mnml/client/src/components/list.jsx

const { connect } = require('preact-redux');
const preact = require('preact');

const { stringSort, NULL_UUID, COLOURS, constructAvatar } = require('./../utils');
const actions = require('./../actions');
const InstanceCreateForm = require('./instance.create.form');

const idSort = stringSort('id');

const addState = connect(
    function receiveState(state) {
        const { ws, constructs, team, instances, account } = state;

        function sendInstanceJoin(instance) {
            if (team.length) {
                return ws.sendInstanceJoin(instance.id, team);
            }
            return false;
        }

        function sendInstanceState(instance) {
            return ws.sendInstanceState(instance.id);
        }

        function sendInstanceList() {
            return ws.sendAccountInstances();
        }

        return {
            account,
            constructs,
            team,
            sendInstanceJoin,
            sendInstanceState,
            sendInstanceList,
            instances,
        };
    },

    function receiveDispatch(dispatch) {
        function navToTeam() {
            return dispatch(actions.setNav('team'));
        }
        return {
            navToTeam,
        };
    }
);

function List(args) {
    const {
        account,
        team,
        constructs,
        sendInstanceState,
        sendInstanceJoin,
        sendInstanceList,
        instances,
        navToTeam,
    } = args;

    function instanceList() {
        if (!instances) return <div>...</div>;

        const instancePanels = instances.map(instance => {
            const player = instance.players.find(p => p.id === account.id);
            const scoreText = player
                ? `${player.score.wins} : ${player.score.losses}`
                : '';

            function instanceClick() {
                if (!player) return sendInstanceJoin(instance);
                return sendInstanceState(instance);
            }

            return (
                <tr key={instance.id}
                    className="right"
                    onClick={instanceClick} >
                    <td>{instance.name}</td>
                    <td>{instance.players.length} / {instance.max_players}</td>
                    <td>{scoreText}</td>
                </tr>
            );
        });

        return (
            <div className="menu-instance-list" >
                <hr />
                <table>
                    <thead>
                        <tr>
                            <th>instance name</th>
                            <th>players</th>
                            <th>status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {instancePanels}
                        <tr className="right" onClick={() => sendInstanceList()}>
                            <td colSpan={3} >↺</td>
                        </tr>
                    </tbody>
                </table>
                <InstanceCreateForm />
            </div>
        );
    }

    const constructPanels = constructs
        .filter(c => team.includes(c.id))
        .sort(idSort)
        .map(construct => {
        const colour = team.indexOf(construct.id);
        const selected = colour > -1;

        return (
            <div
                key={construct.id}
                className="menu-construct" >
                {constructAvatar(construct.name, construct.id)}
                <h2>{construct.name}</h2>
            </div>
        );
    });

    const header = (
        <div className="top">
            <button
                className="instance-btn instance-ui-btn left"
                onClick={() => navToTeam()}>
                Select Constructs
            </button>
        </div>
    );


    return (
        <main className="menu-instances">
            {header}
            <div className="construct-list">
                {constructPanels}
            </div>
            {instanceList()}
        </main>
    );
}

module.exports = addState(List);