SB Team Block JS

/**
 * Block dependencies
 */
import icon from './icon';
import SelectTeam from '../select-team';
//import './style.scss';
import './editor.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const {
    InspectorControls,
    registerBlockType,
    blockEditRender,
    Spinner
} = wp.blocks; // Import registerBlockType() from wp.blocks

//this is where block control componants go! a-ha!
const { ToggleControl, SelectControl } = InspectorControls;

registerBlockType(
    'sportsbench/team', {
        title: __('Sports Bench Team Page'),
        icon: icon,
        category: 'widgets',
        keywords: [ __( 'Sports' ), __( 'Bench' ), __( 'team' ) ],

        attributes: {
            getTeam: {
                type: 'boolean',
                default: true,
            },
            hasTeam: {
                type: 'boolean',
                default: false,
            },
            team_id: {
                type: 'int',
            },
            team_string: {
                type: 'string',
            },
            teams: {
                type: 'array',
            }
        },

        edit( { attributes, setAttributes, focus, setFocus, className } ) {
            const { getTeam, hasTeam, team_id, team_string, teams } = attributes;

            function onSelectTeam( option ){
                console.log('change team');
                if( option === null ){
                    console.log(null);
                    getTeams().then( function( options ) {
                        console.log(options);
                        setAttributes({
                            team_id: "",
                            team_string: "",
                            getTeam: false,
                            teams: options
                        });
                    });
                } else {
                    console.log('There is an option');
                    getTeams().then( function( options ) {
                        console.log(options);
                        setAttributes({
                            team_id: option.value,
                            team_string: option.label,
                            getTeam: true,
                            teams: options
                        });
                    });
                }
            }

            function getTeams(){
                console.log('get team');
                var url = '/wp-json/sportsbench/teams/';
                return fetch( url, {
                    credentials: 'same-origin',
                    method: 'get',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                        'X-WP-Nonce': sportsbench_globals.nonce
                    }})
                    .then( handleFetchErrors )
                    .then( ( response ) => response.json() )
                    .then( ( json ) => {
                        console.log(json);
                        var options = json.map( function(opt, i){
                            return {value: opt.team_id, label: opt.team_name}
                        })
                        return options;
                    })
                    .catch(function(e) {
                        console.log(e);
                    });

            }

            function handleFetchErrors( response ) {
                if (!response.ok) {
                    console.log('fetch error, status: ' + response.statusText);
                }
                return response;
            }

            var selectTeamValue = { value: team_id, label: team_string }
            const selectTeam = (
                <SelectTeam
                    onChange={ onSelectTeam }
                    restUrl="/wp-json/sportsbench/teams/?team_name="
                    initial_value={ selectTeamValue }
                    nonce={ sportsbench_globals.nonce }
                />
            );


            const controls = focus && (
                <InspectorControls key="inspector">
                    <div class="blocks-base-control">
                        <label class="blocks-base-control_label">{__('Select a Team')}</label>
                        { selectTeam }
                    </div>
                </InspectorControls>
            );

            return [
                controls,
                <div className={className}>
                    <h2>{__('Sports Bench Team Page')}</h2>
                    <p>{__('The team page block isn\'t editable. You can select the team to show in the block attributes in the right-hand column.')}</p>
                </div>
            ];
        },

        save() {
            // Rendering in PHP
            return null;
        },
    }
);