wp-plugin-swiss-football-matchdata/assets/post-context.js

(function(wp){
    const { registerPlugin } = wp.plugins;
    const PluginDocumentSettingPanel = (wp && wp.editor && wp.editor.PluginDocumentSettingPanel) ? wp.editor.PluginDocumentSettingPanel : (wp && wp.editPost && wp.editPost.PluginDocumentSettingPanel) ? wp.editPost.PluginDocumentSettingPanel : null;
    const { withSelect, withDispatch } = wp.data;
    const { useState, useEffect } = wp.element;
    const { SelectControl, PanelRow, Spinner, Button } = wp.components;

    function PostContextPanel(props) {
        const meta = (props.meta || {});
        const ctx = meta.swi_foot_context || {};

        if (!PluginDocumentSettingPanel) return null;

        const [teams, setTeams] = useState([]);
        const [matches, setMatches] = useState([]);
        const [loadingTeams, setLoadingTeams] = useState(false);
        const [loadingMatches, setLoadingMatches] = useState(false);

        const restBaseRaw = (window.swi_foot_post_context && window.swi_foot_post_context.rest_url) || '/wp-json/swi-foot/v1';
        const restBase = restBaseRaw.replace(/\/$/, '');

        useEffect(() => {
            setLoadingTeams(true);
            fetch(restBase + '/teams', { credentials: 'same-origin', headers: { 'X-WP-Nonce': window.swi_foot_post_context.rest_nonce } })
                .then(r => r.json()).then(data => {
                    if (Array.isArray(data)) setTeams(data);
                }).catch(() => {}).finally(() => setLoadingTeams(false));
        }, []);

        useEffect(() => {
            const teamId = ctx.team_id || '';
            if (!teamId) {
                setMatches([]);
                return;
            }
            setLoadingMatches(true);
            fetch(restBase + '/matches?team_id=' + encodeURIComponent(teamId), { credentials: 'same-origin', headers: { 'X-WP-Nonce': window.swi_foot_post_context.rest_nonce } })
                .then(r => r.json()).then(data => {
                    if (Array.isArray(data)) {
                        setMatches(data);

                        // If no match selected yet, pick the next future match by date
                        try {
                            if (!ctx.match_id) {
                                const now = Date.now();
                                let next = null;
                                data.forEach(m => {
                                    if (!m.matchDate) return;
                                    const t = Date.parse(m.matchDate);
                                    if (isNaN(t)) return;
                                    if (t > now) {
                                        if (!next || t < next.time) next = { time: t, id: m.matchId };
                                    }
                                });
                                if (next && next.id) {
                                    updateContext('match_id', next.id);
                                }
                            }
                        } catch (e) {
                            // ignore
                        }
                    }
                }).catch(() => {}).finally(() => setLoadingMatches(false));
        }, [ctx.team_id]);

        function updateContext(key, val) {
            const newMeta = Object.assign({}, meta, { swi_foot_context: Object.assign({}, ctx, { [key]: val }) });
            props.editPost({ meta: newMeta });
        }

        const teamOptions = [{ value: '', label: '— use post default —' }].concat(
            teams.map(t => ({ value: t.teamId, label: t.teamName + (t.teamLeagueName ? ' (' + t.teamLeagueName + ')' : '') }))
        );

        const matchOptions = [{ value: '', label: '— use team/season default —' }].concat(
            matches.map(m => {
                var datePart = m.matchDate ? (m.matchDate.substr(0,10) + ' — ') : '';
                var opposing = m.matchId;
                var role = '';
                try {
                    var selectedTeam = (ctx.team_id || '').toString();
                    var teamAId = (m.teamAId || m.homeTeamId || '').toString();
                    var teamBId = (m.teamBId || m.awayTeamId || '').toString();
                    var teamAName = m.teamNameA || m.homeTeamName || '';
                    var teamBName = m.teamNameB || m.awayTeamName || '';
                    if (selectedTeam && selectedTeam === teamAId) {
                        opposing = teamBName || teamAName || m.matchId;
                        role = 'home';
                    } else if (selectedTeam && selectedTeam === teamBId) {
                        opposing = teamAName || teamBName || m.matchId;
                        role = 'away';
                    } else {
                        opposing = teamBName || teamAName || m.teamName || m.matchId;
                    }
                } catch (e) {
                    opposing = m.teamNameB || m.teamNameA || m.awayTeamName || m.homeTeamName || m.teamName || m.matchId;
                }
                var label = datePart + opposing + (role ? (' (' + role + ')') : '');
                return { value: m.matchId, label: label };
            })
        );

        return wp.element.createElement(
            PluginDocumentSettingPanel,
            { title: 'Swiss Football Context', className: 'swi-foot-post-context-panel' },
            wp.element.createElement(PanelRow, null,
                wp.element.createElement('div', { style: { width: '100%' } },
                    wp.element.createElement('label', null, 'Season'),
                    wp.element.createElement('input', {
                        type: 'number',
                        value: ctx.season || window.swi_foot_post_context.default_season,
                        onChange: function(e){ updateContext('season', e.target.value); },
                        style: { width: '100%' }
                    })
                )
            ),
            wp.element.createElement(PanelRow, null,
                wp.element.createElement('div', { style: { width: '100%' } },
                    wp.element.createElement('label', null, 'Team'),
                    loadingTeams ? wp.element.createElement(Spinner, null) : wp.element.createElement(SelectControl, {
                        value: ctx.team_id || '',
                        options: teamOptions,
                        onChange: function(v){ updateContext('team_id', v); },
                        __next40pxDefaultSize: true,
                        __nextHasNoMarginBottom: true
                    })
                )
            ),
            wp.element.createElement(PanelRow, null,
                wp.element.createElement('div', { style: { width: '100%' } },
                    wp.element.createElement('label', null, 'Match'),
                    loadingMatches ? wp.element.createElement(Spinner, null) : wp.element.createElement(SelectControl, {
                        value: ctx.match_id || '',
                        options: matchOptions,
                        onChange: function(v){ updateContext('match_id', v); },
                        __next40pxDefaultSize: true,
                        __nextHasNoMarginBottom: true
                    })
                )
            ),
                wp.element.createElement(PanelRow, null,
                    wp.element.createElement('div', { style: { width: '100%', color: '#666', fontSize: '12px', marginTop: '6px' } },
                        ctx.match_id ? ('Match ID: ' + ctx.match_id) : ''
                    )
                ),
            wp.element.createElement(PanelRow, null,
                wp.element.createElement(Button, { isSecondary: true, onClick: function(){ props.editPost({ meta: Object.assign({}, meta, { swi_foot_context: {} }) }); } }, 'Clear Context')
            )
        );
    }

    const Connected = withSelect( (select) => ({ meta: select('core/editor').getEditedPostAttribute('meta') || {} }) )( withDispatch( (dispatch) => ({ editPost: dispatch('core/editor').editPost }) )( PostContextPanel ) );

    registerPlugin('swi-foot-post-context', { render: Connected });

})(window.wp);