mnml/client/src/components/list.jsx

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

const { stringSort } = require('./../utils');
const { ConstructAvatar } = require('./construct');
const actions = require('./../actions');
const InstanceCreateForm = require('./instance.create.buttons');
const Inventory = require('./inventory');

const idSort = stringSort('id');

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            constructs,
            constructRename,
            team,
            instanceList,
            mtxActive,
        } = state;

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

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

        function sendConstructAvatarReroll(id) {
            console.log('using', mtxActive, 'on', id);
            return ws.sendMtxApply(id, mtxActive, '');
        }

        function sendConstructRename(id, name) {
            ws.sendMtxApply(id, 'Rename', name);
        }

        return {
            constructs,
            instanceList,
            mtxActive,
            constructRename,
            team,
            sendConstructRename,
            sendInstanceJoin,
            sendInstanceList,
            sendConstructAvatarReroll,
        };
    },

    function receiveDispatch(dispatch) {
        function setConstructRename(id) {
            dispatch(actions.setConstructRename(id));
        }

        function clearMtxRename() {
            dispatch(actions.setConstructRename(null));
            dispatch(actions.setMtxActive(null));
        }

        return {
            clearMtxRename,
            setConstructRename,
        };
    }

);

function List(args) {
    const {
        team,
        constructs,
        constructRename,
        clearMtxRename,
        setConstructRename,
        sendConstructRename,
        sendInstanceJoin,
        sendInstanceList,
        instanceList,
        mtxActive,
        sendConstructAvatarReroll,
    } = args;

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

        const instancePanels = instanceList.map(instance => {
            function instanceClick() {
                return sendInstanceJoin(instance);
            }

            return (
                <tr key={instance.id}
                    class="right"
                    onClick={instanceClick} >
                    <td>{instance.name}</td>
                </tr>
            );
        });

        return (
            <div class="menu-instance-list" >
                <h1>Join Game</h1>
                <table>
                    <thead>
                        <tr>
                            <th>opponent name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {instancePanels}
                        <tr class="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 constructName = constructRename === construct.id
                ? <input id='renameInput' type="text" style="text-align: center" placeholder="enter a new name"></input>
                : <h2>{construct.name}</h2>;

            const confirm = constructRename === construct.id
                ? <button onClick={() => sendConstructRename(construct.id, document.getElementById('renameInput').value)}>
                    Confirm
                </button>
                : false;

            const cancel = constructRename === construct.id
                ? <button onClick={() => clearMtxRename()}>
                    Cancel
                </button>
                : false;
            return (
                <div
                    key={construct.id}
                    style={ mtxActive ? { cursor: 'pointer' } : {}}
                    onClick={() => {
                        if (!mtxActive) return false;
                        if (mtxActive === 'Rename') return setConstructRename(construct.id);
                        return sendConstructAvatarReroll(construct.id);
                    }}
                    class="menu-construct" >
                    <ConstructAvatar construct={construct} />
                    {constructName}
                    {confirm}
                    {cancel}
                </div>
            );
        });

    return (
        <main class="menu-instances">
            <div class="construct-list">
                {constructPanels}
            </div>
            <Inventory />
            {listElements()}
        </main>
    );
}

module.exports = addState(List);