spaceselect.tsx

import React, { useState } from "react";
import SpaceManager from "./spacemanager";
import "./spaceselect.css";

interface SpaceSelectProps {
    onLoadSpace: (spaceId: string) => Promise<boolean>;
    onDeleteSpace: (spaceId: string) => void;
    onRenameSpace: (newId: string) => void;
    onDuplicateSpace: (newId: string) => void;
    onCreateSpace: (spaceId: string) => void;
    spaces: string[];
    spaceId: string;
}

function SpaceSelect({
    onLoadSpace,
    spaces,
    spaceId,
    onRenameSpace,
    onDuplicateSpace,
    onCreateSpace,
    onDeleteSpace,
}: SpaceSelectProps) {
    const [managerVisible, setMangerVisible] = useState(false);

    const hideManagerAndCall = (call: (id: string) => void) => {
        return (spaceId: string) => {
            setMangerVisible(false);
            call(spaceId);
        };
    };

    return (
        <div id="spaceselect">
            <select
                onChange={(event) => onLoadSpace(event.target.value)}
                value={spaceId}
                onFocus={() => setMangerVisible(false)}
            >
                {spaces.map((spaceName: string) => (
                    <option key={spaceName} value={spaceName}>
                        {spaceName}
                    </option>
                ))}
            </select>

            <button onClick={() => setMangerVisible(!managerVisible)}>
                Space manager
            </button>
            {managerVisible && (
                <SpaceManager
                    spaces={spaces}
                    spaceId={spaceId}
                    onCreateSpace={hideManagerAndCall(onCreateSpace)}
                    onRenameSpace={hideManagerAndCall(onRenameSpace)}
                    onDeleteSpace={hideManagerAndCall(onDeleteSpace)}
                    onDuplicateSpace={hideManagerAndCall(onDuplicateSpace)}
                />
            )}
        </div>
    );
}

export default SpaceSelect;