spaceselect.tsx

import React, { ChangeEvent } from "react";
import { ReactNode } from "react";
import { listAllSpaces } from "../../../datasets";
import "./spaceselect.css";

type propTypes = {
    onLoadSpace: (spaceId: string) => boolean;
};

type stateTypes = {
    spaces: string[];
};

export class SpaceSelect extends React.Component<propTypes, stateTypes> {
    constructor(props: propTypes) {
        super(props);
        this.state = {
            spaces: [],
        };

        this.handleSelectChange = this.handleSelectChange.bind(this);
        this.updateSpaceList = this.updateSpaceList.bind(this);

        listAllSpaces().then(this.updateSpaceList);
    }

    /**
     * Render list of spaces as available options.
     * @param spaceList Array containing all available space names.
     */
    updateSpaceList(spaceList: string[]) {
        this.setState({
            spaces: spaceList,
        });
    }

    /**
     * Triggered when another option (space) is selected. Calls given function to load specified space.
     * @param e Select-event that references the select element and allows to access the new value (space).
     */
    handleSelectChange(e: ChangeEvent<HTMLSelectElement>) {
        const success = this.props.onLoadSpace(e.target.value);

        if (!success) {
            alert("Failed to load space with id [" + e.target.value + "]");
        }
    }

    render(): ReactNode {
        return (
            <div id="spaceselect">
                <select onChange={this.handleSelectChange}>
                    {this.state.spaces.map((spaceName: string) => (
                        <option key={spaceName} value={spaceName}>
                            {spaceName}
                        </option>
                    ))}
                </select>
            </div>
        );
    }
}