spacemanager.tsx

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

interface SpaceManagerProps {
    spaces: string[];
    spaceId: string;
    onDeleteSpace: (spaceId: string) => void;
    onRenameSpace: (newId: string) => void;
    onDuplicateSpace: (newId: string) => void;
    onCreateSpace: (spaceId: string) => void;
}

function SpaceManager({
    spaces,
    spaceId,
    onDeleteSpace,
    onRenameSpace,
    onDuplicateSpace,
    onCreateSpace,
}: SpaceManagerProps) {
    const [deleteConfirmationVisible, setDeleteConfirmationVisible] =
        useState(false);
    const [newSpaceName, setNewSpaceName] = useState("New space");

    const handleDeleteSpace = () => {
        setDeleteConfirmationVisible(false);
        onDeleteSpace(spaceId);
    };

    const normalizedNewSpaceName = () => newSpaceName.trim();
    const isSpaceCreationAllowed = () =>
        newSpaceName.length === 0 || spaces.includes(normalizedNewSpaceName());

    return (
        <div id="space-manager">
            <label htmlFor="space-name">New space name</label>
            <br />
            <input
                id="space-name"
                type={"text"}
                value={newSpaceName}
                onChange={(e) => setNewSpaceName(e.target.value)}
            />

            <ul>
                <li>
                    <button
                        disabled={isSpaceCreationAllowed()}
                        onClick={() => onCreateSpace(normalizedNewSpaceName())}
                    >
                        Create empty space{" "}
                        {'"' + normalizedNewSpaceName() + '"'}
                    </button>
                </li>
                <li>
                    <button
                        disabled={isSpaceCreationAllowed()}
                        onClick={() =>
                            onDuplicateSpace(normalizedNewSpaceName())
                        }
                    >
                        Duplicate as {'"' + normalizedNewSpaceName() + '"'}
                    </button>
                </li>
                <li>
                    <button
                        disabled={isSpaceCreationAllowed()}
                        onClick={() => onRenameSpace(normalizedNewSpaceName())}
                    >
                        Rename to {'"' + normalizedNewSpaceName() + '"'}
                    </button>
                </li>
            </ul>
            <hr />
            <ul>
                <li>
                    <button
                        onClick={() =>
                            setDeleteConfirmationVisible(
                                !deleteConfirmationVisible
                            )
                        }
                    >
                        Delete space {'"' + spaceId + '"'}?
                    </button>
                </li>
                {deleteConfirmationVisible && (
                    <li>
                        <button className="warning" onClick={handleDeleteSpace}>
                            Delete the space {'"' + spaceId + '"'} and all its
                            data
                        </button>
                    </li>
                )}
            </ul>
        </div>
    );
}

export default SpaceManager;